@graphcommerce/react-hook-form 3.1.3 → 3.2.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 3.2.2
+
+### Patch Changes
+
+- [#1490](https://github.com/graphcommerce-org/graphcommerce/pull/1490) [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb) Thanks [@paales](https://github.com/paales)! - upgraded packages
+
+## 3.2.1
+
+### Patch Changes
+
+- [#1495](https://github.com/graphcommerce-org/graphcommerce/pull/1495) [`ffec8800a`](https://github.com/graphcommerce-org/graphcommerce/commit/ffec8800a50ff2fe9b9fc5feeb5a0a878b573f0e) Thanks [@paales](https://github.com/paales)! - solve issue where useLazyQueryPromise didn’t always resolve
+
+## 3.2.0
+
+### Minor Changes
+
+- [#1496](https://github.com/graphcommerce-org/graphcommerce/pull/1496) [`858a3b3a3`](https://github.com/graphcommerce-org/graphcommerce/commit/858a3b3a3601cd00491219daf45557c2f1cc804b) Thanks [@FrankHarland](https://github.com/FrankHarland)! - Only submit dirty forms, allow passing false to onSubmit
+
 ## 3.1.3
 
 ### Patch Changes

package/index.ts

@@ -5,7 +5,6 @@ export * from './src/useFormAutoSubmit'
 export * from './src/useFormPersist'
 export * from './src/useFormMuiRegister'
 export * from './src/useFormValidFields'
-export * from './src/useLazyQueryPromise'
 export * from './src/useFormGql'
 export * from './src/validationPatterns'
 export * from './src/ComposedForm'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.3",
+  "version": "3.2.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.7",
+    "@graphcommerce/eslint-config-pwa": "^4.1.8",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.3",
     "@playwright/test": "^1.21.1",
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@apollo/client": "^3.6.0",
-    "graphql": "16.4.0",
-    "react-hook-form": "7.30.0"
+    "@apollo/client": "^3.6.6",
+    "graphql": "16.5.0",
+    "react-hook-form": "7.32.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

package/src/useFormGql.tsx

@@ -5,11 +5,11 @@ import {
   useApolloClient,
   MutationTuple,
   ApolloError,
+  LazyQueryResultTuple,
 } from '@apollo/client'
 import { UseFormProps, UseFormReturn, UnpackNestedValue, DeepPartial } from 'react-hook-form'
 import diff from './diff'
 import { useGqlDocumentHandler, UseGqlDocumentHandler } from './useGqlDocumentHandler'
-import { LazyQueryTuple } from './useLazyQueryPromise'
 
 export type OnCompleteFn<Q> = (
   data: FetchResult<Q>,
@@ -17,7 +17,11 @@ export type OnCompleteFn<Q> = (
 ) => void | Promise<void>
 
 type UseFormGraphQLCallbacks<Q, V> = {
-  onBeforeSubmit?: (variables: V) => V | Promise<V>
+  /**
+   * Allows you to modify the variablels computed by the form to make it compatible with the GraphQL
+   * Mutation. Also allows you to send false to skip submission.
+   */
+  onBeforeSubmit?: (variables: V) => V | false | Promise<V | false>
   onComplete?: OnCompleteFn<Q>
 }
 
@@ -27,7 +31,7 @@ export type UseFormGqlMethods<Q, V> = Omit<UseGqlDocumentHandler<V>, 'encode' |
   Pick<UseFormReturn<V>, 'handleSubmit'> & { data?: Q | null; error?: ApolloError }
 
 /**
- * Combines useMutation/useLazyQueryPromise with react-hook-form's useForm:
+ * Combines useMutation/useLazyQuery with react-hook-form's useForm:
  *
  * - Automatically extracts all required arguments for a query
  * - Casts Float/Int mutation input variables to a Number
@@ -38,7 +42,7 @@ export function useFormGql<Q, V>(
   options: {
     document: TypedDocumentNode<Q, V>
     form: UseFormReturn<V>
-    tuple: MutationTuple<Q, V> | LazyQueryTuple<Q, V>
+    tuple: MutationTuple<Q, V> | LazyQueryResultTuple<Q, V>
     defaultValues?: UseFormProps<V>['defaultValues']
   } & UseFormGraphQLCallbacks<Q, V>,
 ): UseFormGqlMethods<Q, V> {
@@ -56,7 +60,12 @@ export function useFormGql<Q, V>(
       })
 
       // Wait for the onBeforeSubmit to complete
-      if (onBeforeSubmit) variables = await onBeforeSubmit(variables)
+      if (onBeforeSubmit) {
+        const res = await onBeforeSubmit(variables)
+        if (res === false) return
+        variables = res
+      }
+      // if (variables === false) onInvalid?.(formValues, event)
 
       const result = await execute({ variables })
       if (onComplete && result.data) await onComplete(result, client)

package/src/useFormGqlQuery.tsx

@@ -1,10 +1,9 @@
-import { LazyQueryHookOptions, TypedDocumentNode } from '@apollo/client'
+import { LazyQueryHookOptions, TypedDocumentNode, useLazyQuery } from '@apollo/client'
 import { useForm } from 'react-hook-form'
 import { useFormGql, UseFormGraphQlOptions } from './useFormGql'
 import { UseFormGqlMutationReturn } from './useFormGqlMutation'
 import { useFormMuiRegister } from './useFormMuiRegister'
 import { useFormValidFields } from './useFormValidFields'
-import { useLazyQueryPromise } from './useLazyQueryPromise'
 
 export type UseFormGqlQueryReturn<Q, V> = UseFormGqlMutationReturn<Q, V>
 
@@ -14,7 +13,7 @@ export function useFormGqlQuery<Q, V>(
   operationOptions?: LazyQueryHookOptions<Q, V>,
 ): UseFormGqlQueryReturn<Q, V> {
   const form = useForm<V>(options)
-  const tuple = useLazyQueryPromise(document, operationOptions)
+  const tuple = useLazyQuery(document, operationOptions)
   const operation = useFormGql({ document, form, tuple, ...options })
   const muiRegister = useFormMuiRegister(form)
   const valid = useFormValidFields(form, operation.required)

package/src/useFormPersist.tsx

@@ -34,6 +34,8 @@ export type UseFormPersistOptions<
 /**
  * Will persist any dirty fields and store it in the sessionStorage/localStorage Will restory any
  * dirty fields when the form is initialized
+ *
+ * Todo: Use wath callback so it won't trigger a rerender
  */
 export function useFormPersist<V>(options: UseFormPersistOptions<V>) {
   const { form, name, storage = 'sessionStorage', exclude = [], persist = [] } = options

package/src/useLazyQueryPromise.tsx

@@ -1,43 +0,0 @@
-import {
-  DocumentNode,
-  LazyQueryHookOptions,
-  LazyQueryResult,
-  QueryLazyOptions,
-  TypedDocumentNode,
-  useLazyQuery,
-} from '@apollo/client'
-import { useEffect, useRef } from 'react'
-import type { Promisable } from 'type-fest'
-
-export type LazyQueryTuple<Q, V> = [
-  (options?: QueryLazyOptions<V>) => Promisable<LazyQueryResult<Q, V>>,
-  LazyQueryResult<Q, V>,
-]
-
-/**
- * Same API as useLazyQuery, except:
- *
- * - The execute method is a promise that will return the eventual result
- */
-export function useLazyQueryPromise<Q, V>(
-  query: DocumentNode | TypedDocumentNode<Q, V>,
-  options?: LazyQueryHookOptions<Q, V>,
-): LazyQueryTuple<Q, V> {
-  const [execute, result] = useLazyQuery<Q, V>(query, options)
-  const ref = useRef<(value: Promisable<LazyQueryResult<Q, V>>) => void>()
-
-  useEffect(() => {
-    if (!result.called || result.loading || !ref.current) return
-    ref.current(result)
-    ref.current = undefined
-  }, [result])
-
-  const queryLazily = (executeOptions?: QueryLazyOptions<V>) => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    execute(executeOptions)
-    return new Promise<LazyQueryResult<Q, V>>((resolve) => {
-      ref.current = resolve
-    })
-  }
-  return [queryLazily, result]
-}