The Guild LogoThe Guild Monogram

Search docs

Search icon

Products by The Guild

Products

Hive logoHive blurred logo

Hive

Schema Registry for your GraphQL Workflows

Docs

Get Started

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> ); }