How do I use Apollo Client for mutations in React?

How do I use Apollo Client for mutations in React?

To use Apollo Client for mutations in React, you can use the useMutation hook. This allows you to define a mutation and execute it.

Can you show me a code example?

Sure! Here's a simple example:

import { useMutation } from '@apollo/client';
import gql from 'graphql-tag';

const ADD_TODO = gql`
  mutation AddTodo($text: String!) {
    addTodo(text: $text) {
      id
      text
    }
  }
`;

function AddTodo() {
  let input;
  const [addTodo, { data }] = useMutation(ADD_TODO);

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault();
        addTodo({ variables: { text: input.value } });
        input.value = '';
      }}>
        <input ref={node => { input = node; }} />
        <button type="submit">Add Todo</button>
      </form>
      {data && <p>Added Todo: {data.addTodo.text}</p>}
    </div>
  );
}

This code defines a mutation to add a todo item.

What do I need to set up Apollo Client in my React app?

You'll need to install the Apollo Client and GraphQL packages. You can do this with:

npm install @apollo/client graphql

Then, set up the ApolloProvider at the root of your app to provide the client to your components.