# @graphcommerce/react-hook-form

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

Latest version **10.0.3** (published 2026-01-07) · 0 weekly downloads

## Install

```sh
npm install @graphcommerce/react-hook-form
pnpm add @graphcommerce/react-hook-form
yarn add @graphcommerce/react-hook-form
bun add @graphcommerce/react-hook-form
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 10.0.3 |
| Published | 2026-01-07 |
| First published | 2021-09-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 81.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 361 |
| Maintainers | paales, bramvanderholst |

## Links

- npm: https://www.npmjs.com/package/@graphcommerce/react-hook-form
- Repository: https://github.com/graphcommerce-org/graphcommerce
- Homepage: https://www.graphcommerce.org/
- Issues: https://github.com/graphcommerce-org/graphcommerce/issues
- npm.io page: https://npm.io/package/@graphcommerce/react-hook-form

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.17.21

## Recent versions

- 10.0.3 (latest) — 2026-01-07
- 11.0.0-canary.47 (canary) — 2026-08-11
- 11.0.0-canary.46 — 2026-08-11
- 11.0.0-canary.45 — 2026-08-07
- 10.1.0-canary.44 — 2026-08-07
- 10.1.0-canary.43 — 2026-08-07
- 10.1.0-canary.42 — 2026-08-06
- 10.1.0-canary.41 — 2026-08-06
- 10.1.0-canary.40 — 2026-08-06
- 10.1.0-canary.39 — 2026-07-20
- 10.1.0-canary.38 — 2026-07-17
- 10.1.0-canary.36 — 2026-07-13
- 10.1.0-canary.34 — 2026-07-13
- 10.1.0-canary.32 — 2026-07-09
- 10.1.0-canary.31 — 2026-07-02
- … 651 more at https://npm.io/package/@graphcommerce/react-hook-form/versions

## README

# 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:

```tsx
import { useFormGqlMutation } from '@graphcommerce/react-hook-form'

const mutation = gql`
  mutation ApplyCouponToCart($cartId: String!, $couponCode: String!) {
    applyCouponToCart(input: { cart_id: $cartId, coupon_code: $couponCode }) {
      cart {
        id
      }
    }
  }
`

export default function MyComponent() {
  const form = useFormGqlMutation(mutation, {
    defaultValues: { cartId: cartQuery?.cart?.id },
  })
  const { errors, handleSubmit, register, formState, required, error } = form

  // We don't need to provide an actual handler as useFormGqlMutation already adds that.
  const submit = handleSubmit(() => {})

  return (
    <form onSubmit={submit} noValidate>
      <input
        type='text'
        {...register('couponCode', { required: required.couponCode })}
        disabled={formState.isSubmitting}
      />
      {errors.couponCode?.message || error?.message}
      <button type='submit'>submit</button>
    </form>
  )
}
```

## `useFormGqlQuery`

```tsx
import { useFormGqlQuery } from '@graphcommerce/react-hook-form'

const query = gql`
  query IsEmailAvailable($email: String!) {
    isEmailAvailable(email: $email) {
      is_email_available
    }
  }
`

export default function MyComponent() {
  const form = useFormGqlQuery(query, {})
  const { errors, handleSubmit, register, formState, required, error } = form

  // We don't need to provide an actual handler as useFormGqlQuery already adds that.
  const submit = handleSubmit(() => {})

  return (
    <form onSubmit={submit} noValidate>
      <input
        type='text'
        {...register('couponCode', { required: required.couponCode })}
        disabled={formState.isSubmitting}
      />
      {errors.couponCode?.message || error?.message}
      <button type='submit'>submit</button>
    </form>
  )
}
```

## `FormAutoSubmit`

```tsx
import { FormAutoSubmit } from '@graphcommerce/react-hook-form'

export default function MyAutoSubmitForm() {
  // Regular useForm hook, but you can also use useFormGqlMutation
  const form = useForm()
  const { errors, handleSubmit, register, formState, required } = form

  const submit = handleSubmit(() => {
    console.log('submitted')
  })

  return (
    <form onSubmit={submit} noValidate>
      <FormAutoSubmit control={control} submit={submit} name={['couponCode']} wait={1200}>
      <input
        type='text'
        {...register('couponCode', { required: required.couponCode })}
      />
      {errors.couponCode?.message}
    </form>
  )
}
```

### `FormPersist`

```tsx
import { FormPersist } from '@graphcommerce/react-hook-form'

export default function MyAutoSubmitForm() {
  // Regular useForm hook, but you can also use useFormGqlMutation
  const form = useForm()
  const { errors, handleSubmit, register, formState, required } = form

  const submit = handleSubmit(() => {
    console.log('submitted')
  })

  return (
    <form onSubmit={submit} noValidate>
      <FormPersist form={form} name='MyForm'>
      <input
        type='text'
        {...register('couponCode', { required: required.couponCode })}
        disabled={disableFields}
      />
      {errors.couponCode?.message}
    </form>
  )
}
```

## FAQ

### `Why is my useForm hook not submitting anything?`

```tsx
const form = useForm() // INCORRECT

const form useForm({ // CORRECT
  mode: 'onSubmit',
  defaultValues: {
   yourFieldName: 'default value',
  },
})

```

---
_Source: https://npm.io/package/@graphcommerce/react-hook-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._