A Practical Guide to GraphQL: From the Client Perspective/

...

/

GraphQL Mutation with Apollo Client in React

GraphQL Mutation with Apollo Client in React

We will cover GraphQL Mutations regarding some repository operations using Apollo Client in React in this lesson.

We'll cover the following...

The previous lessons have taught you how to query data with React Apollo and the Apollo Client. In this lesson, you will learn about mutations. As in other applications before, we have implemented starring a repository with GitHub’s exposed addStar mutation.

The mutation starts out with a variable to identify the repository to be starred. We haven’t used a variable in Query component yet, but the following mutation works the same way, which can be defined in the src/Repository/RepositoryItem/index.js file.

Press + to interact
import React from 'react';
import gql from 'graphql-tag';
...
const STAR_REPOSITORY = gql`
  mutation($id: ID!) {
    addStar(input: { starrableId: $id }) {
      starrable {
        id
        viewerHasStarred
      }
    }
  }
`;
...

The mutation definition takes the id variable as input for the addStar mutation. As before, we can decide what should be returned in case of a successful mutation and incorporate that into our query. Next, we will use a Mutation component that represents the previously used ...