Form

The Form component is an extension of the (React Hook Form)(https://react-hook-form.com/) package which adds new hooks.

useFormGqlMutation

Simple example:

1import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
2
3const mutation = gql`
4  mutation ApplyCouponToCart($cartId: String!, $couponCode: String!) {
5    applyCouponToCart(input: { cart_id: $cartId, coupon_code: $couponCode }) {
6      cart {
7        id
8      }
9    }
10  }
11`
12
13export default function MyComponent() {
14  const form = useFormGqlMutation(mutation, {
15    defaultValues: { cartId: cartQuery?.cart?.id },
16  })
17  const { errors, handleSubmit, register, formState, required, error } = form
18
19  // We don't need to provide an actual handler as useFormGqlMutation already adds that.
20  const submit = handleSubmit(() => {})
21
22  return (
23    <form onSubmit={submit} noValidate>
24      <input
25        type='text'
26        {...register('couponCode', { required: required.couponCode })}
27        disabled={formState.isSubmitting}
28      />
29      {errors.couponCode?.message || error?.message}
30      <button type='submit'>submit</button>
31    </form>
32  )
33}

useFormGqlQuery

1import { useFormGqlQuery } from '@graphcommerce/react-hook-form'
2
3const query = gql`
4  query IsEmailAvailable($email: String!) {
5    isEmailAvailable(email: $email) {
6      is_email_available
7    }
8  }
9`
10
11export default function MyComponent() {
12  const form = useFormGqlQuery(query, {})
13  const { errors, handleSubmit, register, formState, required, error } = form
14
15  // We don't need to provide an actual handler as useFormGqlQuery already adds that.
16  const submit = handleSubmit(() => {})
17
18  return (
19    <form onSubmit={submit} noValidate>
20      <input
21        type='text'
22        {...register('couponCode', { required: required.couponCode })}
23        disabled={formState.isSubmitting}
24      />
25      {errors.couponCode?.message || error?.message}
26      <button type='submit'>submit</button>
27    </form>
28  )
29}

FormAutoSubmit

1import { FormAutoSubmit } from '@graphcommerce/react-hook-form'
2
3export default function MyAutoSubmitForm() {
4  // Regular useForm hook, but you can also use useFormGqlMutation
5  const form = useForm()
6  const { errors, handleSubmit, register, formState, required } = form
7
8  const submit = handleSubmit(() => {
9    console.log('submitted')
10  })
11
12  return (
13    <form onSubmit={submit} noValidate>
14      <FormAutoSubmit control={control} submit={submit} name={['couponCode']} wait={1200}>
15      <input
16        type='text'
17        {...register('couponCode', { required: required.couponCode })}
18      />
19      {errors.couponCode?.message}
20    </form>
21  )
22}

FormPersist

1import { FormPersist } from '@graphcommerce/react-hook-form'
2
3export default function MyAutoSubmitForm() {
4  // Regular useForm hook, but you can also use useFormGqlMutation
5  const form = useForm()
6  const { errors, handleSubmit, register, formState, required } = form
7
8  const submit = handleSubmit(() => {
9    console.log('submitted')
10  })
11
12  return (
13    <form onSubmit={submit} noValidate>
14      <FormPersist form={form} name='MyForm'>
15      <input
16        type='text'
17        {...register('couponCode', { required: required.couponCode })}
18        disabled={disableFields}
19      />
20      {errors.couponCode?.message}
21    </form>
22  )
23}

FAQ

Why is my useForm hook not submitting anything?

1const form = useForm() // INCORRECT
2
3const form useForm({ // CORRECT
4  mode: 'onSubmit',
5  defaultValues: {
6   yourFieldName: 'default value',
7  },
8})
9