Using mutations on the frontend

As we learned in the previous chapter, mutations in GraphQL are used to change the state of the backend (similar to POST requests in REST). We are now going to implement mutations for signing up and logging in to our app.

Follow these steps:

1. Create a new src/api/graphql/users.js file and import gql:

   import { gql } from '@apollo/client/core/index.js'

2. Then, define a new SIGNUP_USER mutation, which takes a username and a password and calls the signupUser mutation field:

   export const SIGNUP_USER = gql`
     mutation signupUser($username: String!, $password: String!) {
       signupUser(username: $username, password: $password) {
         username
       }
     }
   `

3. Edit src/pages/Signup.jsx and replace the current useMutation hook from TanStack React Query with the one from Apollo Client. As we did before for useQuery, we are also going to rename this hook...