Using Mutations with React#

useMutation#

Hook designed to be used for GraphQL Mutations.

Features#

Lifecycle functions onCompleted & onError
Optional Refetch queries after mutation call (with 'awaitRefetchQueries' option, to wait until they are complete before calling the mutation complete)
Suspense support

Example#

import { useState } from 'react';
import { useMutation, query } from '../gqty';

export function LoginComponent() {
  const [login, { isLoading, data, error }] = useMutation(
    (mutation, args: { email: string; password: string }) => {
      const { user, error } = mutation.login({ args });

      if (user) {
        return {
          name: user.name,
        };
      }

      return {
        error,
      };
    },
    {
      onCompleted(data) {},
      onError(error) {},
      refetchQueries: [query.user],
      awaitRefetchQueries: true,
      suspense: false,
    }
  );

  const [formData, setFormData] = useState(() => ({ email: '', password: '' }));

  const errorMessage = data?.error || error?.message;

  return (
    <form>
      <label>Email</label>
      <input
        value={formData.email}
        onChange={(ev) => {
          setFormData({
            ...formData,
            email: ev.target.value,
          });
        }}
      />

      <label>Password</label>
      <input
        value={formData.password}
        onChange={(ev) => {
          setFormData({
            ...formData,
            password: ev.target.value,
          });
        }}
      />

      <button
        type="submit"
        disabled={isLoading}
        onClick={(ev) => {
          ev.preventDefault();
          login({ args: formData }).catch(console.error);
        }}
      >
        Login
      </button>

      {errorMessage ? <p>Error: {errorMessage}</p> : null}
    </form>
  );
}