Skip to content

Instantly share code, notes, and snippets.

@sijad

sijad/json-api-react.ts

Last active June 18, 2018 05:25
Download ZIP

Revisions

  1. sijad revised this gist Jun 18, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion json-api-react.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    var Model, Component, find, findAll, Loading;
    import { Model, find, findAll } from 'react-jsonapi';

    class User extends Model {
    name: string;
  2. sijad created this gist Jun 18, 2018.
    45 changes: 45 additions & 0 deletions json-api-react.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    var Model, Component, find, findAll, Loading;

    class User extends Model {
    name: string;

    email: string;

    createdAt: Date;
    }

    @find(User)
    @findAll(User, {
    // other options
    name: 'usersQuery', // prop name
    cachePolicy: 'network', // always send a new request to server
    })
    class MyComponent extends Component {
    componentDidUpdate() {
    // Find(User) query result
    const {
    loading,
    result: user,
    } = this.props.data;

    if (!loading) {
    user.name = 'new name';
    user.save();
    }
    }

    render() {
    const {
    loading, // true if users query still loading
    result: users, // will contains [User]
    error,
    // etc
    } = this.props.users;

    if (loading) {
    return <Loading />
    }

    return users.map(user => <DisplayUser key={user.id} user={user} />);
    }
    }