@graphcommerce/react-hook-form 9.0.0-canary.81 → 9.0.0-canary.83

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 9.0.0-canary.83
+
+## 9.0.0-canary.82
+
 ## 9.0.0-canary.81
 
 ## 9.0.0-canary.80

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.81",
+  "version": "9.0.0-canary.83",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -16,9 +16,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.81",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.81",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.81",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.83",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.83",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.83",
     "@mui/utils": "^5",
     "graphql": "^16.6.0",
     "react": "^18.2.0",

package/src/ComposedForm/ComposedSubmit.tsx

@@ -120,19 +120,10 @@ 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)}
-      rootThrown={rootThrown}
-    />
-  )
+  return <Render buttonState={buttonState} submit={submitAll} error={mergeErrors(errors)} />
 }

package/src/ComposedForm/types.ts

@@ -36,7 +36,6 @@ export type ComposedSubmitRenderComponentProps = {
   submit: () => Promise<void>
   buttonState: ButtonState
   error?: ApolloError
-  rootThrown?: GlobalError
 }
 
 export type ComposedFormState = {

package/src/useFormGql.tsx

@@ -4,6 +4,7 @@ import {
   LazyQueryResultTuple,
   MutationTuple,
   TypedDocumentNode,
+  isApolloError,
 } from '@apollo/client'
 import { getOperationName } from '@apollo/client/utilities'
 import useEventCallback from '@mui/utils/useEventCallback'
@@ -21,13 +22,13 @@ type UseFormGraphQLCallbacks<Q, V> = {
    * 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 })`
+   * When an error is thrown, it will be set as an ApolloError
    */
   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 })`
+   * When an error is thrown, it will be set as an ApolloError
    */
   onComplete?: OnCompleteFn<Q, V>
 
@@ -115,6 +116,7 @@ export function useFormGql<Q, V extends FieldValues>(
   const [execute, { data, error, loading }] = tuple
 
   const submittedVariables = useRef<V>()
+  const returnedError = useRef<ApolloError>()
 
   // automatically updates the default values
   const initital = useRef(true)
@@ -153,14 +155,24 @@ export function useFormGql<Q, V extends FieldValues>(
         return
       }
 
-      // Combine defaults with the formValues and encode
+      returnedError.current = undefined
       submittedVariables.current = undefined
+
+      // Combine defaults with the formValues and encode
       let variables = !deprecated_useV1 ? formValues : encode({ ...defaultValues, ...formValues })
 
       // Wait for the onBeforeSubmit to complete
       const [onBeforeSubmitResult, onBeforeSubmitError] = await beforeSubmit(variables)
       if (onBeforeSubmitError) {
-        form.setError('root', { message: onBeforeSubmitError.message })
+        if (isApolloError(onBeforeSubmitError)) {
+          returnedError.current = onBeforeSubmitError
+        } else {
+          console.log(
+            'A non ApolloError was thrown during the onBeforeSubmit handler.',
+            onBeforeSubmitError,
+          )
+        }
+
         return
       }
       if (onBeforeSubmitResult === false) return
@@ -176,7 +188,19 @@ export function useFormGql<Q, V extends FieldValues>(
 
       const [, onCompleteError] = await complete(result, variables)
       if (onCompleteError) {
-        form.setError('root', { message: onCompleteError.message })
+        returnedError.current = onCompleteError as ApolloError
+        return
+      }
+      if (onCompleteError) {
+        if (isApolloError(onCompleteError)) {
+          returnedError.current = onCompleteError
+        } else {
+          console.log(
+            'A non ApolloError was thrown during the onComplete handler.',
+            onCompleteError,
+          )
+        }
+
         return
       }
 
@@ -191,7 +215,7 @@ export function useFormGql<Q, V extends FieldValues>(
     ...gqlDocumentHandler,
     handleSubmit,
     data,
-    error,
+    error: error ?? returnedError.current,
     submittedVariables: submittedVariables.current,
   }
 }