@graphcommerce/react-hook-form 9.0.0-canary.88 → 9.0.0-canary.92

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 9.0.0-canary.92
+
+## 9.0.0-canary.91
+
+## 9.0.0-canary.90
+
+### Minor Changes
+
+- [#2391](https://github.com/graphcommerce-org/graphcommerce/pull/2391) [`c1fa10f`](https://github.com/graphcommerce-org/graphcommerce/commit/c1fa10f995f562741b7574d465580e5405982a70) - Prevent overwriting custom context in useFormGqlMutation by merging operationOptions before execution. ([@wimvdputten](https://github.com/wimvdputten))
+
+## 9.0.0-canary.89
+
 ## 9.0.0-canary.88
 
 ## 9.0.0-canary.87

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

package/src/useFormGql.tsx

@@ -5,6 +5,8 @@ import {
   MutationTuple,
   TypedDocumentNode,
   isApolloError,
+  MutationHookOptions,
+  LazyQueryHookOptions,
 } from '@apollo/client'
 import { getOperationName } from '@apollo/client/utilities'
 import useEventCallback from '@mui/utils/useEventCallback'
@@ -98,6 +100,9 @@ export function useFormGql<Q, V extends FieldValues>(
     document: TypedDocumentNode<Q, V>
     form: UseFormReturn<V>
     tuple: MutationTuple<Q, V> | LazyQueryResultTuple<Q, V>
+    operationOptions?:
+      | Omit<MutationHookOptions<Q, V>, 'fetchPolicy' | 'variables'>
+      | Omit<LazyQueryHookOptions<Q, V>, 'fetchPolicy' | 'variables'>
     defaultValues?: UseFormProps<V>['defaultValues']
     skipUnchanged?: boolean
   } & UseFormGraphQLCallbacks<Q, V>,
@@ -108,6 +113,7 @@ export function useFormGql<Q, V extends FieldValues>(
     document,
     form,
     tuple,
+    operationOptions,
     skipUnchanged,
     defaultValues,
     deprecated_useV1 = false,
@@ -181,9 +187,17 @@ export function useFormGql<Q, V extends FieldValues>(
       submittedVariables.current = variables
       if (!deprecated_useV1 && loading) controllerRef.current?.abort()
       controllerRef.current = new window.AbortController()
+
       const result = await execute({
+        ...operationOptions,
         variables,
-        context: { fetchOptions: { signal: controllerRef.current.signal } },
+        context: {
+          ...operationOptions?.context,
+          fetchOptions: {
+            ...operationOptions?.context?.fetchOptions,
+            signal: controllerRef.current.signal,
+          },
+        },
       })
 
       const [, onCompleteError] = await complete(result, variables)

package/src/useFormGqlMutation.tsx

@@ -45,7 +45,7 @@ export function useFormGqlMutation<Q extends Record<string, unknown>, V extends
 ): UseFormGqlMutationReturn<Q, V> {
   const form = useForm<V>(options)
   const tuple = useMutation(document, operationOptions)
-  const operation = useFormGql({ document, form, tuple, ...options })
+  const operation = useFormGql({ document, form, tuple, operationOptions, ...options })
   const muiRegister = useFormMuiRegister(form)
   return { ...form, ...operation, muiRegister, valid: {} }
 }

package/src/useFormGqlQuery.tsx

@@ -16,7 +16,7 @@ export function useFormGqlQuery<Q extends Record<string, unknown>, V extends Fie
 ): UseFormGqlQueryReturn<Q, V> {
   const form = useForm<V>(options)
   const tuple = useLazyQuery(document, operationOptions)
-  const operation = useFormGql({ document, form, tuple, ...options })
+  const operation = useFormGql({ document, form, tuple, operationOptions, ...options })
   const muiRegister = useFormMuiRegister(form)
 
   return { ...form, ...operation, valid: {}, muiRegister }