@graphcommerce/react-hook-form 9.0.4-canary.9 → 9.1.0-canary.16

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 9.1.0-canary.16
+
+## 9.1.0-canary.15
+
+## 9.0.4-canary.14
+
+## 9.0.4-canary.13
+
+### Patch Changes
+
+- [`9aa9a3c`](https://github.com/graphcommerce-org/graphcommerce/commit/9aa9a3cc25c121e217f64efc0cfd19e3b90d15aa) - useFormGql and all derivivatives now get the form as an argument in onComplete for easier form resets. ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.12
+
+## 9.0.4-canary.11
+
+## 9.0.4-canary.10
+
+### Patch Changes
+
+- [#2487](https://github.com/graphcommerce-org/graphcommerce/pull/2487) [`935f8f9`](https://github.com/graphcommerce-org/graphcommerce/commit/935f8f9ebe5e79b336e56d40cb1ec96ce17b84d7) - Remove dependency on Magento for @graphcommerec/react-hook-form ([@paales](https://github.com/paales))
+
 ## 9.0.4-canary.9
 
 ## 9.0.4-canary.8

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

package/src/useFormGql.tsx

@@ -17,12 +17,7 @@ import type { UseGqlDocumentHandler } from './useGqlDocumentHandler'
 import { useGqlDocumentHandler } from './useGqlDocumentHandler'
 import { tryAsync } from './utils/tryTuple'
 
-export type OnCompleteFn<Q, V> = (
-  data: FetchResult<MaybeMasked<Q>>,
-  variables: V,
-) => void | Promise<void>
-
-type UseFormGraphQLCallbacks<Q, V> = {
+type UseFormGraphQLCallbacks<Q, V extends FieldValues> = {
   /**
    * Allows you to modify the variablels computed by the form to make it compatible with the GraphQL
    * Mutation.
@@ -30,13 +25,17 @@ type UseFormGraphQLCallbacks<Q, V> = {
    * When returning false, it will silently stop the submission. When an error is thrown, it will be
    * set as an ApolloError
    */
-  onBeforeSubmit?: (variables: V) => V | false | Promise<V | false>
+  onBeforeSubmit?: (variables: V, form?: UseFormReturn<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 an ApolloError
    */
-  onComplete?: OnCompleteFn<Q, V>
+  onComplete?: (
+    data: FetchResult<MaybeMasked<Q>>,
+    variables: V,
+    form?: UseFormReturn<V>,
+  ) => void | Promise<void>
 
   /**
    * @deprecated Not used anymore, is now the default
@@ -174,7 +173,7 @@ export function useFormGql<Q, V extends FieldValues>(
       let variables = !deprecated_useV1 ? formValues : encode({ ...defaultValues, ...formValues })
 
       // Wait for the onBeforeSubmit to complete
-      const [onBeforeSubmitResult, onBeforeSubmitError] = await beforeSubmit(variables)
+      const [onBeforeSubmitResult, onBeforeSubmitError] = await beforeSubmit(variables, form)
       if (onBeforeSubmitError) {
         if (isApolloError(onBeforeSubmitError)) {
           returnedError.current = onBeforeSubmitError
@@ -219,7 +218,7 @@ export function useFormGql<Q, V extends FieldValues>(
         return
       }
 
-      const [, onCompleteError] = await complete(result, variables)
+      const [, onCompleteError] = await complete(result, variables, form)
       if (onCompleteError) {
         if (isApolloError(onCompleteError)) {
           returnedError.current = onCompleteError

package/__mocks__/TestShippingAddressForm.graphql

@@ -1,16 +0,0 @@
-mutation TestShippingAddressForm(
-  $cartId: String!
-  $address: CartAddressInput!
-  $customerNote: String = "joi"
-) {
-  setShippingAddressesOnCart(
-    input: {
-      cart_id: $cartId
-      shipping_addresses: [{ address: $address, customer_notes: $customerNote }]
-    }
-  ) {
-    cart {
-      id
-    }
-  }
-}

package/__tests__/useFormGqlMutation.tsx

@@ -1,35 +0,0 @@
-/* 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 { result } = renderHook(() =>
-    useFormGqlMutation(
-      TestShippingAddressFormDocument,
-      {},
-      {
-        client: new ApolloClient({
-          cache: new InMemoryCache(),
-        }),
-      },
-    ),
-  )
-
-  it('can register stuff', () => {
-    result.current.register('address.telephone')
-    result.current.register('customerNote')
-    result.current.register('address.street.0')
-
-    // @ts-expect-error should not be posssible
-    result.current.register('address.street.hoi')
-  })
-
-  it('extracts required fields correctly', () => {
-    expect(result.current.required).toEqual({ address: true, cartId: true, customerNote: false })
-  })
-  it('extracts defaults correctly', () => {
-    expect(result.current.defaultVariables).toEqual({ customerNote: 'joi' })
-  })
-})

package/__tests__/useGqlDocumentHandler.tsx

@@ -1,52 +0,0 @@
-import { TestShippingAddressFormDocument } from '../__mocks__/TestShippingAddressForm.gql'
-import { handlerFactory } from '../src/useGqlDocumentHandler'
-
-describe('useGqlDocumentHandler', () => {
-  const {
-    required,
-    defaultVariables: defaults,
-    encode,
-  } = handlerFactory(TestShippingAddressFormDocument)
-
-  const address = {
-    cartId: '12',
-    customerNote: 'hoi',
-    address: {
-      firstname: 'Firstname',
-      lastname: 'Lastname',
-      company: 'GraphComemrce',
-      country_code: 'NL',
-      street: ['Streetline 1', 'Streetline 2'],
-      city: 'City',
-      telephone: '0987654321',
-      postcode: '1234AB',
-      save_in_address_book: true,
-    },
-  }
-
-  it('extracts required fields correctly', () => {
-    expect(required).toEqual({ address: true, cartId: true, customerNote: false })
-  })
-  it('extracts defaults correctly', () => {
-    expect(defaults).toEqual({ customerNote: 'joi' })
-  })
-
-  it('encodes objects correctly', () => {
-    const result = encode(address)
-    expect(result).toEqual({
-      cartId: '12',
-      customerNote: 'hoi',
-      address: {
-        firstname: 'Firstname',
-        lastname: 'Lastname',
-        company: 'GraphComemrce',
-        country_code: 'NL',
-        street: ['Streetline 1', 'Streetline 2'],
-        city: 'City',
-        telephone: '0987654321',
-        postcode: '1234AB',
-        save_in_address_book: true,
-      },
-    })
-  })
-})