Learn React with TypeScript 3

Implementing a mutation with Apollo

Let's allow users to star a GitHub repository in our app. This will involve sending a mutation via Apollo:

1. First, let's import the Mutation component from react-apollo:

import { Mutation } from "react-apollo";

2. Now let's create the mutation. The is the same query we executed in the GitHub GraphQL Explorer earlier:

const STAR_REPO = gql`  mutation($repoId: ID!) {    addStar(input: { starrableId: $repoId }) {      starrable {        stargazers {          totalCount        }      }    }  }`;

3. In the JSX, under where we render the description, let's place the Mutation component:

<p>{repo.description}</p><div>  {!repo.viewerHasStarred && (    <Mutation      mutation={STAR_REPO}      variables={{ repoId: repo.id }}    >      {() => ( // render Star button that invokes ...