@graphcommerce/react-hook-form 3.3.4 → 4.30.0-canary.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 4.30.0-canary.0
+
+## 3.3.5
+
+### Patch Changes
+
+- [#1665](https://github.com/graphcommerce-org/graphcommerce/pull/1665) [`1f2e14ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/1f2e14ba8b674b87257a123e8cb215157890eb22) Thanks [@paales](https://github.com/paales)! - Make sure the onComplete callback also sends the variables
+
 ## 3.3.4
 
 ### Patch Changes

package/__tests__/useFormGqlMutation.tsx

@@ -1,25 +1,35 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import { ApolloClient, InMemoryCache } from '@apollo/client'
+import { renderHook } from '@testing-library/react'
 import { TestShippingAddressFormDocument } from '../__mocks__/TestShippingAddressForm.gql'
 import { useFormGqlMutation } from '../src/useFormGqlMutation'
 
 describe('useFormGqlMutation', () => {
-  const { register, required, defaultVariables } = useFormGqlMutation(
-    TestShippingAddressFormDocument,
+  const { result } = renderHook(() =>
+    useFormGqlMutation(
+      TestShippingAddressFormDocument,
+      {},
+      {
+        client: new ApolloClient({
+          cache: new InMemoryCache(),
+        }),
+      },
+    ),
   )
 
   it('can register stuff', () => {
-    register('address.telephone')
-    register('customerNote')
-    register('address.street.0')
+    result.current.register('address.telephone')
+    result.current.register('customerNote')
+    result.current.register('address.street.0')
 
     // @ts-expect-error should not be posssible
-    register('address.street.hoi')
+    result.current.register('address.street.hoi')
   })
 
   it('extracts required fields correctly', () => {
-    expect(required).toEqual({ address: true, cartId: true, customerNote: false })
+    expect(result.current.required).toEqual({ address: true, cartId: true, customerNote: false })
   })
   it('extracts defaults correctly', () => {
-    expect(defaultVariables).toEqual({ customerNote: 'joi' })
+    expect(result.current.defaultVariables).toEqual({ customerNote: 'joi' })
   })
 })

package/__tests__/useGqlDocumentHandler.tsx

@@ -20,7 +20,7 @@ describe('useGqlDocumentHandler', () => {
       city: 'City',
       telephone: '0987654321',
       postcode: '1234AB',
-      save_in_address_book: 'true',
+      save_in_address_book: true,
     },
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.3.4",
+  "version": "4.30.0-canary.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {

package/src/useFormGql.tsx

@@ -1,8 +1,6 @@
 import {
   FetchResult,
-  ApolloClient,
   TypedDocumentNode,
-  useApolloClient,
   MutationTuple,
   ApolloError,
   LazyQueryResultTuple,
@@ -12,10 +10,7 @@ import { UseFormProps, UseFormReturn, UnpackNestedValue, DeepPartial } from 'rea
 import diff from './diff'
 import { useGqlDocumentHandler, UseGqlDocumentHandler } from './useGqlDocumentHandler'
 
-export type OnCompleteFn<Q> = (
-  data: FetchResult<Q>,
-  client: ApolloClient<unknown>,
-) => void | Promise<void>
+export type OnCompleteFn<Q, V> = (data: FetchResult<Q>, variables: V) => void | Promise<void>
 
 type UseFormGraphQLCallbacks<Q, V> = {
   /**
@@ -23,7 +18,7 @@ type UseFormGraphQLCallbacks<Q, V> = {
    * Mutation. Also allows you to send false to skip submission.
    */
   onBeforeSubmit?: (variables: V) => V | false | Promise<V | false>
-  onComplete?: OnCompleteFn<Q>
+  onComplete?: OnCompleteFn<Q, V>
 }
 
 export type UseFormGraphQlOptions<Q, V> = UseFormProps<V> & UseFormGraphQLCallbacks<Q, V>
@@ -50,7 +45,6 @@ export function useFormGql<Q, V>(
   const { onComplete, onBeforeSubmit, document, form, tuple, defaultValues } = options
   const { encode, type, ...gqlDocumentHandler } = useGqlDocumentHandler<Q, V>(document)
   const [execute, { data, error }] = tuple
-  const client = useApolloClient()
 
   // automatically updates the default values
   const initital = useRef(true)
@@ -81,7 +75,7 @@ export function useFormGql<Q, V>(
       // if (variables === false) onInvalid?.(formValues, event)
 
       const result = await execute({ variables })
-      if (onComplete && result.data) await onComplete(result, client)
+      if (onComplete && result.data) await onComplete(result, variables)
 
       // Reset the state of the form if it is unmodified afterwards
       if (typeof diff(form.getValues(), formValues) === 'undefined')