GraphQL Mutations and Caching using Apollo Client
--
Initial Reading
In the previous post, we learned about configuring the Apollo Client, within our React application. We learned about how to execute queries to retrieve data from the GraphQL server. This blog post, is a continuation of the previous article. In this post, we will learn how to execute mutations using the Apollo Client to update data in the GraphQL server. Next, we will also learn about caching techniques within the Apollo Client.
What are GraphQL Mutations?
- Mutations can create, update and delete data.
- Mutation fields run in series one after the other.
- Once a mutation is complete, the Apollo cache needs to be updated.
To read more about GraphQL Mutations: What are GraphQL Mutations?
useMutation Hook
The useMutation is a React hook, which is the API for executing GraphQL mutations in an Apollo application.
First we write the GraphQL mutation that we want to execute, using the gql symbol. Let’s take a look at an example mutation snippet below.
import { gql, useMutation } from '@apollo/client';
const ADD_TODO = gql`
mutation AddTodo($type: String!) {
addTodo(type: $type) {
id
type
}
}
`;The mutation is defined using the keyword mutation. Notice, this is similar to how we defined queries in the previous blog post. Once the mutation is defined, the useMutation hook is used to execute the mutation as follows, within a component.
const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);The useMutation hook defined above returns two items:
- A mutate function that you can call at any time to execute the mutation.
- An object with fields that represent the current status of the mutation’s execution.
The useMutation hook is similar to the useQuery hook. It returns the loading and error states that are tracked by the Apollo Client. This helps the frontend component display loading or error states to the user. Finally, the data property is populated when the result of the mutation comes…
