@graphcommerce/react-hook-form 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 3.3.0
+
+### Minor Changes
+
+- [#1544](https://github.com/graphcommerce-org/graphcommerce/pull/1544) [`5f927ebdc`](https://github.com/graphcommerce-org/graphcommerce/commit/5f927ebdc6f0331833e02b96e4f169bfe475ac6b) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Fixed hydration errors on account, cart and wishlist
+
+## 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

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.2.0",
+  "version": "3.3.0",
   "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.9",
+    "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/ComposedForm/ComposedSubmit.tsx

@@ -57,26 +57,13 @@ export function ComposedSubmit(props: ComposedSubmitProps) {
 
     let formsToProcess = formEntries
     if (invalidKeys.length === 0) {
-      const onlyDirty = formEntries.filter(([, { form }]) => Boolean(form?.formState.isDirty))
-
       if (process.env.NODE_ENV !== 'production') {
-        const all = formsToProcess.map(([, { key }]) => key).join(',')
-        const dirtyForms = onlyDirty.map(([, { key }]) => key).join(',')
-
-        if (dirtyForms.length > 0) {
-          // eslint-disable-next-line no-console
-          console.log(
-            `[ComposedForm] All forms are valid (${all}), following forms are dirty (${dirtyForms}), submitting...`,
-          )
-        } else {
-          // eslint-disable-next-line no-console
-          console.log(
-            `[ComposedForm] All forms are valid (${all}), no forms to submit, continuing...`,
-          )
-        }
+        // eslint-disable-next-line no-console
+        console.log(
+          '[ComposedForm] All forms are valid, submitting...',
+          formsToProcess.map(([, { key }]) => key),
+        )
       }
-
-      formsToProcess = onlyDirty
     } else {
       formsToProcess = formEntries.filter(([, { key }]) => invalidKeys.includes(key))
       if (process.env.NODE_ENV !== 'production') {

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>,
@@ -31,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
@@ -42,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> {

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/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]
-}