How do I use mutations in Apollo Client?

How do I use mutations in Apollo Client?

To use mutations in Apollo Client, 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
    }
  }
`;

const 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>Todo added: {data.addTodo.text}</p>}
    </div>
  );
};

What if I want to handle errors?

You can handle errors by using the onError option in the useMutation hook. Here's how:

const [addTodo, { error }] = useMutation(ADD_TODO, {
  onError: (error) => {
    console.error('Error adding todo:', error);
  },
});