React with Apollo and GraphQL

December 10, 2016 0 Comments graphQL, react, apollo, by

So you're using Apollo with GraphQL in your project, and some things aren't working right. The documentation is pretty clear, but not a lot of examples in the wild. Here's an overview of how to make sense of these constructs.

Queries

Using Apollo as our graphql client, we can use a component wrapper, a higher order component, to return the data from our service. The higher order component is like a higher order function, and returns a function to be executed. The results from the query will be passed back into our component as props.

/* pass props as an argument to our constructor and in super to access data */
class Post extends Component {  
  constructor(props) {

    super(props)
    this.state = {
      name: props.name
    }
  }
}

// our query can be shared between server and client
const GetPosts = gql`query GetPosts { posts {text} }`

// pass results of query to class as props
const PostComponent = graphql(GetPosts)(Post)  

Full example below from GitHunt repo:


Mutations

Mutations are used for modifying data. Two things represented in one query:

  • The mutation field name with arguments
  • The fields you want back from the result of the mutation to update the client

The UI will be updated automatically, if in the client we select the necessary fields in the result. Ask for all fields that have been mutated. Use OptimisticResponse to implement an Optimistic UI. Use the name option in the graphql() invocation, to have that in the prop, or use the default name, mutate.

const NewEntryWithData =  graphql(submitNewUser, {name : 'newUserMutation'})(  
  graphql(submitRepository, {name: 'newRepositoryMutation'})(Component)
)

rely on Apollo’s id-based cache updating, no need to use the results from the mutation callback — or use the updateQueries callback with the mutation results

Sync Client Cache with Server

Strategies to ensure our client is eventually consistent with our server:

  • refetch this.props.data.refetch, refetchQueries, updateQueries
  • polling - short polling intervals (<10s) not recommended
  • subscriptions - near-realtime updates in UI

mutation, updateQueries, and subscriptions from GitHunt repo:

http://brianyang.com/graphql-subscriptions-in-apollo-client/


Updating your Data Store

Results of a query or mutation can update UI accordingly.
` http://brianyang.com/graphql-concepts-visualized/

if you specify a function to generate IDs from each object, and supply it as the dataIdFromObject in the ApolloClient constructor, you can decide how Apollo will identify and de-duplicate the objects returned from the server.

Times where this won't work, like adding to a list without refetching the whole list or if some objects can't be assigned an object identifier. In these cases consider fetchMore

Putting the Pieces Together

Let's say we have a page that's a simple form. Or simple form will have autocomplete, so we need to make queries. We need to submit the form so we will have a mutation. This same form will be used to allow users to edit the record, so we need multiple mutation queries in one componentX. One way to accomplish this is with compose, which takes multiple mutation queries and runs them simultaneously. You will need to name your queries.

const NewEntryWithData =  graphql(submitNewUser, {name : 'newUserMutation'})(  
  graphql(submitRepository, {name: 'newRepositoryMutation'})(Component)
)

Note the use of the name option on the graphql() call to name the prop that will receive the mutation function for each mutation (by default that name is ‘mutate’).


Tag cloud