@graphcommerce/react-hook-form 9.0.1-canary.1 → 9.0.1-canary.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.1-canary.3
+
+## 9.0.1-canary.2
+
+### Patch Changes
+
+- [#2465](https://github.com/graphcommerce-org/graphcommerce/pull/2465) [`881e146`](https://github.com/graphcommerce-org/graphcommerce/commit/881e146acf0d129d6d44ec207619a45ad04d673b) - Solve an issue where the payment submission would remain in a spinning state when placing an order failed: `useFormGql` will now set `root` error on the form when there is an error response on the GraphQL operation, an error is thrown in onBeforeSubmit and in onSuccess. ([@paales](https://github.com/paales))
+
 ## 9.0.1-canary.1
 
 ## 9.0.0

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

package/src/useFormGql.tsx

@@ -1,5 +1,4 @@
 import type {
-  ApolloError,
   FetchResult,
   LazyQueryHookOptions,
   LazyQueryResultTuple,
@@ -8,7 +7,7 @@ import type {
   MutationTuple,
   TypedDocumentNode,
 } from '@apollo/client'
-import { isApolloError } from '@apollo/client'
+import { ApolloError, isApolloError } from '@apollo/client'
 import { getOperationName } from '@apollo/client/utilities'
 import useEventCallback from '@mui/utils/useEventCallback'
 import { useEffect, useRef } from 'react'
@@ -179,16 +178,23 @@ export function useFormGql<Q, V extends FieldValues>(
       if (onBeforeSubmitError) {
         if (isApolloError(onBeforeSubmitError)) {
           returnedError.current = onBeforeSubmitError
+          form.setError('root', { message: onBeforeSubmitError.message })
         } else {
-          console.info(
-            'A non ApolloError was thrown during the onBeforeSubmit handler.',
-            onBeforeSubmitError,
-          )
+          const message =
+            process.env.NODE_ENV === 'development'
+              ? `A non ApolloError was thrown during the onBeforeSubmit handler: ${onBeforeSubmitError.message}`
+              : 'An unexpected error occurred, please contact the store owner'
+          form.setError('root', { message })
+          returnedError.current = new ApolloError({ graphQLErrors: [{ message }] })
         }
+        return
+      }
 
+      if (onBeforeSubmitResult === false) {
+        form.setError('root', { message: 'Form submission cancelled' })
         return
       }
-      if (onBeforeSubmitResult === false) return
+
       variables = onBeforeSubmitResult
 
       submittedVariables.current = variables
@@ -207,21 +213,25 @@ export function useFormGql<Q, V extends FieldValues>(
         },
       })
 
-      const [, onCompleteError] = await complete(result, variables)
-      if (onCompleteError) {
-        returnedError.current = onCompleteError as ApolloError
+      // If there are submission errors, set the error and return
+      if (result.errors && result.errors.length > 0) {
+        form.setError('root', { message: result.errors.map((e) => e.message).join(', ') })
         return
       }
+
+      const [, onCompleteError] = await complete(result, variables)
       if (onCompleteError) {
         if (isApolloError(onCompleteError)) {
           returnedError.current = onCompleteError
+          form.setError('root', { message: onCompleteError.message })
         } else {
-          console.info(
-            'A non ApolloError was thrown during the onComplete handler.',
-            onCompleteError,
-          )
+          const message =
+            process.env.NODE_ENV === 'development'
+              ? `A non ApolloError was thrown during the onComplete handler: ${onCompleteError.message}`
+              : 'An unexpected error occurred, please contact the store owner'
+          form.setError('root', { message })
+          returnedError.current = new ApolloError({ graphQLErrors: [{ message }] })
         }
-
         return
       }
 
@@ -236,7 +246,7 @@ export function useFormGql<Q, V extends FieldValues>(
     ...gqlDocumentHandler,
     handleSubmit,
     data,
-    error: error ?? returnedError.current,
+    error: returnedError.current ?? error,
     submittedVariables: submittedVariables.current,
   }
 }