@graphcommerce/react-hook-form 9.0.0-canary.79 → 9.0.0-canary.80

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 9.0.0-canary.80
+
+### Minor Changes
+
+- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`16e2980`](https://github.com/graphcommerce-org/graphcommerce/commit/16e2980da4b72330642e59e8c82d1acde387e4fc) - useFormGql and it's derived hooks now have a new `skipUnchanged` prop. The form will only be submitted when there are fields dirty in a form. This reduces the amount of queries ran in the checkout greatly. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`1d6512d`](https://github.com/graphcommerce-org/graphcommerce/commit/1d6512d4118cfb46602aa1f2432c3566fdb3261d) - Rename experimental_useV2 prop to deprecated_useV1 in useFromGql and enable it by default ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+### Patch Changes
+
+- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`af45239`](https://github.com/graphcommerce-org/graphcommerce/commit/af452399eaab59ee4e13484fdc9cb0a7660da531) - When a useFormGql throws an error in the onBeforeSubmit method or onComplete method it will setError('root.thrown') with the message, allowing it to be displayed somewhere. PaymentMethodButton will now render this as an ErrorSnackbar. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
 ## 9.0.0-canary.79
 
 ## 9.0.0-canary.78

package/index.ts

@@ -1,11 +1,12 @@
 export * from 'react-hook-form'
+export * from './src/ComposedForm'
+export * from './src/useFormAutoSubmit'
+export * from './src/useFormGql'
 export * from './src/useFormGqlMutation'
 export * from './src/useFormGqlQuery'
-export * from './src/useFormAutoSubmit'
-export * from './src/useFormPersist'
 export * from './src/useFormMuiRegister'
+export * from './src/useFormPersist'
 export * from './src/useFormValidFields'
-export * from './src/useFormGql'
-export * from './src/validationPatterns'
-export * from './src/ComposedForm'
+export * from './src/utils/tryTuple'
 export * from './src/utils/useDebounce'
+export * from './src/validationPatterns'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.79",
+  "version": "9.0.0-canary.80",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -16,9 +16,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.79",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.79",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.79",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.80",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.80",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.80",
     "@mui/utils": "^5",
     "graphql": "^16.6.0",
     "react": "^18.2.0",

package/src/ComposedForm/ComposedSubmit.tsx

@@ -1,5 +1,6 @@
 import { ApolloError } from '@apollo/client'
 import React, { useContext, useEffect, useRef } from 'react'
+import { GlobalError } from 'react-hook-form'
 import { isFormGqlOperation } from '../useFormGqlMutation'
 import { composedFormContext } from './context'
 import { ComposedSubmitRenderComponentProps } from './types'
@@ -119,9 +120,19 @@ export function ComposedSubmit(props: ComposedSubmitProps) {
   }
 
   const errors: ApolloError[] = []
+  let rootThrown: GlobalError | undefined
+
   formEntries.forEach(([, { form }]) => {
     if (form && isFormGqlOperation(form) && form.error) errors.push(form.error)
+    if (form && form.formState.errors.root?.thrown) rootThrown = form.formState.errors.root.thrown
   })
 
-  return <Render buttonState={buttonState} submit={submitAll} error={mergeErrors(errors)} />
+  return (
+    <Render
+      buttonState={buttonState}
+      submit={submitAll}
+      error={mergeErrors(errors)}
+      rootThrown={rootThrown}
+    />
+  )
 }

package/src/ComposedForm/types.ts

@@ -1,5 +1,5 @@
 import { ApolloError } from '@apollo/client'
-import type { FieldValues, FormState, UseFormReturn } from 'react-hook-form'
+import type { FieldValues, FormState, GlobalError, UseFormReturn } from 'react-hook-form'
 import type { SetOptional } from 'type-fest'
 
 export type UseFormComposeOptions<V extends FieldValues = FieldValues> = {
@@ -36,6 +36,7 @@ export type ComposedSubmitRenderComponentProps = {
   submit: () => Promise<void>
   buttonState: ButtonState
   error?: ApolloError
+  rootThrown?: GlobalError
 }
 
 export type ComposedFormState = {

package/src/useFormGql.tsx

@@ -1,27 +1,39 @@
 import {
-  FetchResult,
-  TypedDocumentNode,
-  MutationTuple,
   ApolloError,
+  FetchResult,
   LazyQueryResultTuple,
+  MutationTuple,
+  TypedDocumentNode,
 } from '@apollo/client'
+import { getOperationName } from '@apollo/client/utilities'
 import useEventCallback from '@mui/utils/useEventCallback'
 import { useEffect, useRef } from 'react'
 import { DefaultValues, FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form'
 import diff from './diff'
 import { useGqlDocumentHandler, UseGqlDocumentHandler } from './useGqlDocumentHandler'
+import { tryAsync } from './utils/tryTuple'
 
 export type OnCompleteFn<Q, V> = (data: FetchResult<Q>, variables: V) => void | Promise<void>
 
 type UseFormGraphQLCallbacks<Q, V> = {
   /**
    * Allows you to modify the variablels computed by the form to make it compatible with the GraphQL
-   * Mutation. Also allows you to send false to skip submission.
+   * Mutation.
+   *
+   * When returning false, it will silently stop the submission.
+   * When an error is thrown, it will be set as a generic error with `setError('root.thrown', { message: error.message })`
    */
   onBeforeSubmit?: (variables: V) => V | false | Promise<V | false>
+  /**
+   * Called after the mutation has been executed. Allows you to handle the result of the mutation.
+   *
+   * When an error is thrown, it will be set as a generic error with `setError('root.thrown', { message: error.message })`
+   */
   onComplete?: OnCompleteFn<Q, V>
 
   /**
+   * @deprecated Not used anymore, is now the default
+   *
    * Changes:
    * - Restores `defaultValues` functionality to original functionality, use `values` instead.
    * - Does not reset the form after submission, use `values` instead.
@@ -44,6 +56,19 @@ type UseFormGraphQLCallbacks<Q, V> = {
    * ```
    */
   experimental_useV2?: boolean
+  /**
+   * To restore the previous functionality of the useFormGqlMutation, set this to true.
+   *
+   * @deprecated Will be removed in the next version.
+   */
+  deprecated_useV1?: boolean
+
+  /**
+   * Only submit the form when there are dirty fields. If all fields are clean, we skip the submission.
+   *
+   * Form is still set to isSubmitted and isSubmitSuccessful.
+   */
+  skipUnchanged?: boolean
 }
 
 export type UseFormGraphQlOptions<Q, V extends FieldValues> = UseFormProps<V> &
@@ -73,6 +98,7 @@ export function useFormGql<Q, V extends FieldValues>(
     form: UseFormReturn<V>
     tuple: MutationTuple<Q, V> | LazyQueryResultTuple<Q, V>
     defaultValues?: UseFormProps<V>['defaultValues']
+    skipUnchanged?: boolean
   } & UseFormGraphQLCallbacks<Q, V>,
 ): UseFormGqlMethods<Q, V> {
   const {
@@ -81,8 +107,9 @@ export function useFormGql<Q, V extends FieldValues>(
     document,
     form,
     tuple,
+    skipUnchanged,
     defaultValues,
-    experimental_useV2 = false,
+    deprecated_useV1 = false,
   } = options
   const { encode, type, ...gqlDocumentHandler } = useGqlDocumentHandler<Q, V>(document)
   const [execute, { data, error, loading }] = tuple
@@ -94,7 +121,7 @@ export function useFormGql<Q, V extends FieldValues>(
   const controllerRef = useRef<AbortController | undefined>()
   const valuesString = JSON.stringify(defaultValues)
   useEffect(() => {
-    if (experimental_useV2) return
+    if (!deprecated_useV1) return
 
     if (initital.current) {
       initital.current = false
@@ -105,36 +132,56 @@ export function useFormGql<Q, V extends FieldValues>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [valuesString, form])
 
-  const beforeSubmit: NonNullable<typeof onBeforeSubmit> = useEventCallback(
-    onBeforeSubmit ?? ((v) => v),
+  const beforeSubmit = useEventCallback(
+    tryAsync((onBeforeSubmit ?? ((v) => v)) satisfies NonNullable<typeof onBeforeSubmit>),
+  )
+  const complete = useEventCallback(
+    tryAsync((onComplete ?? (() => undefined)) satisfies NonNullable<typeof onComplete>),
   )
-  const complete: NonNullable<typeof onComplete> = useEventCallback(onComplete ?? (() => undefined))
 
   const handleSubmit: UseFormReturn<V>['handleSubmit'] = (onValid, onInvalid) =>
     form.handleSubmit(async (formValues, event) => {
+      const hasDirtyFields = skipUnchanged
+        ? Object.values(form?.formState.dirtyFields ?? []).filter(Boolean).length > 0
+        : true
+
+      if (skipUnchanged && !hasDirtyFields) {
+        console.log(
+          `[useFormGql ${getOperationName(document)}] skipped submission, no dirty fields`,
+        )
+        await onValid(formValues, event)
+        return
+      }
+
       // Combine defaults with the formValues and encode
       submittedVariables.current = undefined
-      let variables = experimental_useV2 ? formValues : encode({ ...defaultValues, ...formValues })
+      let variables = !deprecated_useV1 ? formValues : encode({ ...defaultValues, ...formValues })
 
       // Wait for the onBeforeSubmit to complete
-      const res = await beforeSubmit(variables)
-      if (res === false) return
-      variables = res
-
-      // if (variables === false) onInvalid?.(formValues, event)
+      const [onBeforeSubmitResult, onBeforeSubmitError] = await beforeSubmit(variables)
+      if (onBeforeSubmitError) {
+        form.setError('root', { message: onBeforeSubmitError.message })
+        return
+      }
+      if (onBeforeSubmitResult === false) return
+      variables = onBeforeSubmitResult
 
       submittedVariables.current = variables
-      if (loading && experimental_useV2) controllerRef.current?.abort()
+      if (!deprecated_useV1 && loading) controllerRef.current?.abort()
       controllerRef.current = new window.AbortController()
       const result = await execute({
         variables,
         context: { fetchOptions: { signal: controllerRef.current.signal } },
       })
 
-      if (result.data) await complete(result, variables)
+      const [, onCompleteError] = await complete(result, variables)
+      if (onCompleteError) {
+        form.setError('root', { message: onCompleteError.message })
+        return
+      }
 
-      // Reset the state of the form if it is unmodified afterwards
-      if (typeof diff(form.getValues(), formValues) === 'undefined' && !experimental_useV2)
+      if (deprecated_useV1 && typeof diff(form.getValues(), formValues) === 'undefined')
+        // Reset the state of the form if it is unmodified afterwards
         form.reset(formValues)
 
       await onValid(formValues, event)

package/src/utils/tryTuple.ts

@@ -0,0 +1,25 @@
+export const tryAsync =
+  <R, Args extends unknown[]>(
+    fn: (...args: Args) => Promise<R> | R,
+  ): ((...args: Args) => Promise<[R, undefined] | [undefined, Error]>) =>
+  async (...args: Args) => {
+    try {
+      return [await fn(...args), undefined]
+    } catch (e) {
+      console.error(e)
+      return [undefined, e as Error]
+    }
+  }
+
+export const trySync =
+  <R, Args extends unknown[]>(
+    fn: (...args: Args) => R,
+  ): ((...args: Args) => [R, undefined] | [undefined, Error]) =>
+  (...args: Args) => {
+    try {
+      return [fn(...args), undefined]
+    } catch (e) {
+      console.error(e)
+      return [undefined, e as Error]
+    }
+  }