A Practical Guide to GraphQL: From the Client Perspective/

...

/

React GraphQL Mutation

React GraphQL Mutation

In this lesson, you will learn how to implement GraphQL Mutations in React.

We'll cover the following...

The major use of GraphQL is to fetch data. However, there are always two sides to such an interface: read and write. That’s where GraphQL mutations complement the interface. Previously, you learned about GraphQL mutations using GraphQL without React. In this section, you will implement such a mutation in your React GraphQL application.

addStar Mutation

We have executed GitHub’s addStar mutation before in GraphQL. Now, let’s implement this mutation in React. Before implementing the mutation, you should query additional information about the repository, which is partially required to star the repository in a mutation.

Press + to interact
const GET_ISSUES_OF_REPOSITORY = `
  query (
    $organization: String!,
    $repository: String!,
    $cursor: String
  ) {
    organization(login: $organization) {
      name
      url
      repository(name: $repository) {
        id
        name
        url
        viewerHasStarred
        issues(first: 5, after: $cursor, states: [OPEN]) {
          ...
        }
      }
    }
  }
`;

The viewerHasStarred field returns a boolean that tells whether the viewer has starred the repository or not. This boolean helps determine whether to execute a addStar or removeStar mutation in the next steps. For now, you will only implement the addStar mutation. The removeStar mutation will be left off as part of the exercise. Also, the id field in the query returns the identifier for the repository, which you will need to clarify the target repository of your mutation.

The best place to trigger the mutation is a button that stars or ...