@graphcommerce/react-hook-form 10.0.0-canary.68 → 10.0.0-canary.72

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
+### Patch Changes
+
+- [#2567](https://github.com/graphcommerce-org/graphcommerce/pull/2567) [`41f9619`](https://github.com/graphcommerce-org/graphcommerce/commit/41f96194a5740465663d8f8e5ee1c10af0365748) - Fix issue where FormAutoSubmit would not listen for changes when no field names were provided (meaning it should watch changes on all fields) ([@paales](https://github.com/paales))
+
 ## 10.0.0-canary.68
 
 ## 10.0.0-canary.67

package/index.ts

@@ -5,9 +5,7 @@ export * from './src/useFormAutoSubmit'
 export * from './src/useFormGql'
 export * from './src/useFormGqlMutation'
 export * from './src/useFormGqlQuery'
-export * from './src/useFormMuiRegister'
 export * from './src/useFormPersist'
-export * from './src/useFormValidFields'
 export * from './src/utils/tryTuple'
 export * from './src/utils/useDebounce'
 export * from './src/validationPatterns'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.68",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -13,9 +13,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "*",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
     "@mui/utils": "^7.0.0",
     "graphql": "^16.6.0",
     "react": "^19.2.0",

package/src/ComposedForm/ComposedSubmit.tsx

@@ -1,5 +1,7 @@
-import { ApolloError } from '@apollo/client'
-import React, { useContext, useEffect, useRef } from 'react'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
+import type React from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { isFormGqlOperation } from '../useFormGqlMutation'
 import { composedFormContext } from './context'
 import type { ComposedSubmitRenderComponentProps } from './types'
@@ -9,13 +11,29 @@ export type ComposedSubmitProps = {
   render: React.FC<ComposedSubmitRenderComponentProps>
 }
 
-export function mergeErrors(errors: ApolloError[]): ApolloError | undefined {
+export function mergeErrors(errors: ErrorLike[]): ErrorLike | undefined {
   if (!errors.length) return undefined
-  return new ApolloError({
-    errorMessage: 'Composed submit error',
-    networkError: errors.find((error) => error.networkError)?.networkError,
-    graphQLErrors: errors.map((error) => error.graphQLErrors ?? []).flat(1),
-  })
+
+  // Collect all GraphQL errors from CombinedGraphQLErrors instances
+  const graphQLErrors = errors.flatMap((error) =>
+    CombinedGraphQLErrors.is(error) ? error.errors : [],
+  )
+
+  // Collect non-GraphQL errors (network errors, etc.)
+  const nonGraphQLErrors = errors.filter((error) => !CombinedGraphQLErrors.is(error))
+
+  // If we have GraphQL errors, return a CombinedGraphQLErrors
+  // Include non-GraphQL error messages as additional GraphQL errors to avoid losing them
+  if (graphQLErrors.length > 0) {
+    const allErrors = [
+      ...graphQLErrors,
+      ...nonGraphQLErrors.map((error) => ({ message: error.message })),
+    ]
+    return new CombinedGraphQLErrors({ errors: allErrors })
+  }
+
+  // If we only have non-GraphQL errors, return the first one
+  return nonGraphQLErrors[0]
 }
 
 export function ComposedSubmit(props: ComposedSubmitProps) {
@@ -118,7 +136,7 @@ export function ComposedSubmit(props: ComposedSubmitProps) {
     }
   }
 
-  const errors: ApolloError[] = []
+  const errors: ErrorLike[] = []
 
   formEntries.forEach(([, { form }]) => {
     if (form && isFormGqlOperation(form) && form.error) errors.push(form.error)

package/src/ComposedForm/types.ts

@@ -1,4 +1,4 @@
-import type { ApolloError } from '@apollo/client'
+import type { ErrorLike } from '@apollo/client'
 import type { FieldValues, FormState, UseFormHandleSubmit, UseFormTrigger } from 'react-hook-form'
 import type { SetOptional } from 'type-fest'
 
@@ -40,7 +40,7 @@ export type ButtonState = {
 export type ComposedSubmitRenderComponentProps = {
   submit: () => Promise<void>
   buttonState: ButtonState
-  error?: ApolloError
+  error?: ErrorLike
 }
 
 export type ComposedFormState = {
@@ -51,7 +51,7 @@ export type ComposedFormState = {
   buttonState: ButtonState
   formState: FormStateAll
   submitted: boolean
-  error?: ApolloError
+  error?: ErrorLike
 }
 
 /** Register a new form with the useFormCompose hook */

package/src/useFormAutoSubmit.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useMemoObject } from '@graphcommerce/next-ui/hooks/useMemoObject'
-import { cloneDeep } from '@apollo/client/utilities'
+import { cloneDeep } from '@apollo/client/utilities/internal'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { debounce } from '@mui/material'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
@@ -143,12 +143,19 @@ function useAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
     submit,
     parallel,
     noValidate,
-    name = [],
+    name,
     ...watchOptions
   } = props
 
   // We create a stable object from the values, so that we can compare them later
-  const values = useMemoObject(cloneDeep(useWatch({ ...watchOptions, name })))
+  const values = useMemoObject(
+    cloneDeep(
+      useWatch({
+        ...watchOptions,
+        name: name as Path<TFieldValues>[],
+      }),
+    ),
+  )
   const oldValues = useRef<PathValue<TFieldValues, Path<TFieldValues>>[]>(values)
   const { isValidating, isSubmitting, isValid } = useFormState(watchOptions)
 

package/src/useFormGql.tsx

@@ -1,14 +1,7 @@
-import type {
-  FetchResult,
-  LazyQueryHookOptions,
-  LazyQueryResultTuple,
-  MaybeMasked,
-  MutationHookOptions,
-  MutationTuple,
-  TypedDocumentNode,
-} from '@apollo/client'
-import { ApolloError, isApolloError } from '@apollo/client'
-import { getOperationName } from '@apollo/client/utilities'
+import { getOperationName } from '@graphcommerce/graphql/apollo'
+import type { ApolloLink, ErrorLike, MaybeMasked, TypedDocumentNode } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
+import type { useLazyQuery, useMutation } from '@apollo/client/react'
 import useEventCallback from '@mui/utils/useEventCallback'
 import { useEffect, useRef } from 'react'
 import type { DefaultValues, FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form'
@@ -23,16 +16,16 @@ type UseFormGraphQLCallbacks<Q, V extends FieldValues> = {
    * Mutation.
    *
    * When returning false, it will SKIP the submission. When an Error is thrown, it will be set as
-   * an ApolloError.
+   * an error.
    */
   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
+   * When an error is thrown, it will be set as an error
    */
   onComplete?: (
-    result: FetchResult<MaybeMasked<Q>>,
+    result: ApolloLink.Result<MaybeMasked<Q>>,
     variables: V,
     form?: UseFormReturn<V>,
   ) => void | Promise<void>
@@ -60,7 +53,7 @@ type UseFormGraphQLCallbacks<Q, V extends FieldValues> = {
    *     const result = mutate() // executes the mutation and automatically sets generic errors with setError('root')
    *     // onComplete: now simply use the result after the form, to for example reset the form, or do other things.
    *   })
-   *   ```
+   * ```
    */
   experimental_useV2?: boolean
   /**
@@ -82,14 +75,17 @@ type UseFormGraphQLCallbacks<Q, V extends FieldValues> = {
 export type UseFormGraphQlOptions<Q, V extends FieldValues> = UseFormProps<V> &
   UseFormGraphQLCallbacks<Q, V>
 
+export const UseFormGqlSymbol = Symbol('UseFormGql')
+
 export type UseFormGqlMethods<Q, V extends FieldValues> = Omit<
   UseGqlDocumentHandler<V>,
   'encode' | 'type'
 > &
   Pick<UseFormReturn<V>, 'handleSubmit'> & {
     data?: MaybeMasked<Q> | null
-    error?: ApolloError | null
+    error?: ErrorLike | null
     submittedVariables?: V | null
+    [UseFormGqlSymbol]: true
   }
 
 /**
@@ -104,10 +100,12 @@ export function useFormGql<Q, V extends FieldValues>(
   options: {
     document: TypedDocumentNode<Q, V>
     form: UseFormReturn<V>
-    tuple: MutationTuple<Q, V> | LazyQueryResultTuple<Q, V>
+    tuple:
+      | useMutation.ResultTuple<Q, V>
+      | useLazyQuery.ResultTuple<Q, V, 'streaming' | 'complete' | 'empty'>
     operationOptions?:
-      | Omit<MutationHookOptions<Q, V>, 'fetchPolicy' | 'variables'>
-      | Omit<LazyQueryHookOptions<Q, V>, 'fetchPolicy' | 'variables'>
+      | Omit<useMutation.Options<Q, V>, 'fetchPolicy' | 'variables'>
+      | Omit<useLazyQuery.Options<Q, V>, 'fetchPolicy' | 'variables'>
     defaultValues?: UseFormProps<V>['defaultValues']
     skipUnchanged?: boolean
   } & UseFormGraphQLCallbacks<Q, V>,
@@ -127,7 +125,7 @@ export function useFormGql<Q, V extends FieldValues>(
   const [execute, { data, error, loading }] = tuple
 
   const submittedVariables = useRef<V | null>(null)
-  const returnedError = useRef<ApolloError | null>(null)
+  const returnedError = useRef<ErrorLike | null>(null)
 
   // automatically updates the default values
   const initital = useRef(true)
@@ -175,16 +173,17 @@ export function useFormGql<Q, V extends FieldValues>(
       // Wait for the onBeforeSubmit to complete
       const [onBeforeSubmitResult, onBeforeSubmitError] = await beforeSubmit(variables, form)
       if (onBeforeSubmitError) {
-        if (isApolloError(onBeforeSubmitError)) {
+        // Check if it's a GraphQL error or a regular error
+        if (CombinedGraphQLErrors.is(onBeforeSubmitError)) {
           returnedError.current = onBeforeSubmitError
           form.setError('root', { message: onBeforeSubmitError.message })
         } else {
           const message =
             process.env.NODE_ENV === 'development'
-              ? `A non ApolloError was thrown during the onBeforeSubmit handler: ${onBeforeSubmitError.message}`
+              ? `An error was thrown during the onBeforeSubmit handler: ${onBeforeSubmitError.message}`
               : 'An unexpected error occurred, please contact the store owner'
           form.setError('root', { message })
-          returnedError.current = new ApolloError({ graphQLErrors: [{ message }] })
+          returnedError.current = new CombinedGraphQLErrors({ errors: [{ message }] })
         }
         return
       }
@@ -201,32 +200,39 @@ export function useFormGql<Q, V extends FieldValues>(
         ...operationOptions,
         variables,
         context: {
-          ...operationOptions?.context,
+          ...(operationOptions as { context?: Record<string, unknown> } | undefined)?.context,
           fetchOptions: {
-            ...operationOptions?.context?.fetchOptions,
+            ...(
+              operationOptions as
+                | { context?: { fetchOptions?: Record<string, unknown> } }
+                | undefined
+            )?.context?.fetchOptions,
             signal: controllerRef.current.signal,
           },
         },
       })
 
       // If there are submission errors, set the error and return
-      if (result.errors && result.errors.length > 0) {
-        form.setError('root', { message: result.errors.map((e) => e.message).join(', ') })
+      if (result.error) {
+        const errorMessage = CombinedGraphQLErrors.is(result.error)
+          ? result.error.errors.map((e) => e.message).join(', ')
+          : result.error.message
+        form.setError('root', { message: errorMessage })
         return
       }
 
       const [, onCompleteError] = await complete(result, variables, form)
       if (onCompleteError) {
-        if (isApolloError(onCompleteError)) {
+        if (CombinedGraphQLErrors.is(onCompleteError)) {
           returnedError.current = onCompleteError
           form.setError('root', { message: onCompleteError.message })
         } else {
           const message =
             process.env.NODE_ENV === 'development'
-              ? `A non ApolloError was thrown during the onComplete handler: ${onCompleteError.message}`
+              ? `An error was thrown during the onComplete handler: ${onCompleteError.message}`
               : 'An unexpected error occurred, please contact the store owner'
           form.setError('root', { message })
-          returnedError.current = new ApolloError({ graphQLErrors: [{ message }] })
+          returnedError.current = new CombinedGraphQLErrors({ errors: [{ message }] })
         }
         return
       }
@@ -244,5 +250,6 @@ export function useFormGql<Q, V extends FieldValues>(
     data,
     error: returnedError.current ?? error,
     submittedVariables: submittedVariables.current,
+    [UseFormGqlSymbol]: true,
   }
 }

package/src/useFormGqlMutation.tsx

@@ -1,52 +1,42 @@
-import type { MutationHookOptions, TypedDocumentNode } from '@apollo/client'
-import { useMutation } from '@apollo/client'
+import type { TypedDocumentNode } from '@apollo/client'
+import type { useMutation } from '@apollo/client/react'
+import { useMutation as useMutationHook } from '@apollo/client/react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import type { UseFormGqlMethods, UseFormGraphQlOptions } from './useFormGql'
-import { useFormGql } from './useFormGql'
-import type { UseMuiFormRegister } from './useFormMuiRegister'
-import { useFormMuiRegister } from './useFormMuiRegister'
-import type { UseFormValidReturn } from './useFormValidFields'
+import { useFormGql, UseFormGqlSymbol } from './useFormGql'
 
 export type UseFormGqlMutationReturn<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Q extends Record<string, any> = Record<string, any>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   V extends FieldValues = FieldValues,
-> = UseFormGqlMethods<Q, V> &
-  UseFormReturn<V> & {
-    /** @deprecated Please use TextFieldElement */
-    muiRegister: UseMuiFormRegister<V>
-    /** @deprecated Please use TextFieldElement showValid */
-    valid: UseFormValidReturn<V>
-  }
+> = Omit<UseFormReturn<V>, 'handleSubmit'> & UseFormGqlMethods<Q, V>
 
 export function isFormGqlOperation<
   V extends FieldValues,
   Q extends Record<string, unknown> = Record<string, unknown>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-redundant-type-constituents
 >(form: any): form is UseFormGqlMutationReturn<Q, V> {
-  return typeof (form as UseFormGqlMutationReturn<Q, V>).submittedVariables !== 'undefined'
+  return (form as UseFormGqlMutationReturn<Q, V>)[UseFormGqlSymbol] === true
 }
 
 export function assertFormGqlOperation<
   V extends FieldValues,
   Q extends Record<string, unknown> = Record<string, unknown>,
 >(form: UseFormReturn<V>): asserts form is UseFormGqlMutationReturn<Q, V> {
-  if (typeof (form as UseFormGqlMutationReturn<Q, V>).muiRegister !== 'function') {
+  if (!isFormGqlOperation(form))
     throw Error("form must be one of 'useFromGqlMutation' or 'useFormGqlQuery'")
-  }
 }
 
 /** Bindings between react-hook-form's useForm and Apollo Client's useMutation hook. */
 export function useFormGqlMutation<Q extends Record<string, unknown>, V extends FieldValues>(
   document: TypedDocumentNode<Q, V>,
   options: NoInfer<UseFormGraphQlOptions<Q, V>> = {},
-  operationOptions?: MutationHookOptions<Q, V>,
+  operationOptions?: useMutation.Options<NoInfer<Q>, NoInfer<V>>,
 ): UseFormGqlMutationReturn<Q, V> {
   const form = useForm<V>(options)
-  const tuple = useMutation(document, operationOptions)
+  const tuple = useMutationHook<Q, V>(document, operationOptions as useMutation.Options<Q, V>)
   const operation = useFormGql({ document, form, tuple, operationOptions, ...options })
-  const muiRegister = useFormMuiRegister(form)
-  return { ...form, ...operation, muiRegister, valid: {} }
+  // operation.handleSubmit overrides form.handleSubmit
+  return { ...form, ...operation } as unknown as UseFormGqlMutationReturn<Q, V>
 }

package/src/useFormGqlQuery.tsx

@@ -1,11 +1,11 @@
-import type { LazyQueryHookOptions, TypedDocumentNode } from '@apollo/client'
-import { useLazyQuery } from '@apollo/client'
+import type { TypedDocumentNode } from '@apollo/client'
+import type { useLazyQuery } from '@apollo/client/react'
+import { useLazyQuery as useLazyQueryHook } from '@apollo/client/react'
 import type { FieldValues } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import type { UseFormGraphQlOptions } from './useFormGql'
 import { useFormGql } from './useFormGql'
-import type { UseFormGqlMutationReturn } from './useFormGqlMutation'
-import { useFormMuiRegister } from './useFormMuiRegister'
+import { type UseFormGqlMutationReturn } from './useFormGqlMutation'
 
 export type UseFormGqlQueryReturn<
   Q extends Record<string, unknown>,
@@ -15,12 +15,10 @@ export type UseFormGqlQueryReturn<
 export function useFormGqlQuery<Q extends Record<string, unknown>, V extends FieldValues>(
   document: TypedDocumentNode<Q, V>,
   options: UseFormGraphQlOptions<Q, V> = {},
-  operationOptions?: LazyQueryHookOptions<Q, V>,
+  operationOptions?: useLazyQuery.Options<Q, V>,
 ): UseFormGqlQueryReturn<Q, V> {
   const form = useForm<V>(options)
-  const tuple = useLazyQuery(document, operationOptions)
+  const tuple = useLazyQueryHook(document, { ...operationOptions })
   const operation = useFormGql({ document, form, tuple, operationOptions, ...options })
-  const muiRegister = useFormMuiRegister(form)
-
-  return { ...form, ...operation, valid: {}, muiRegister }
+  return { ...form, ...operation }
 }

package/src/useFormMuiRegister.tsx

@@ -1,25 +0,0 @@
-import type {
-  FieldPath,
-  FieldValues,
-  RegisterOptions,
-  UseFormRegisterReturn,
-  UseFormReturn,
-} from 'react-hook-form'
-
-export type UseMuiFormRegister<TFieldValues extends FieldValues> = <
-  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(
-  name: TFieldName,
-  options?: RegisterOptions<TFieldValues, TFieldName>,
-) => Omit<UseFormRegisterReturn, 'ref'> & { inputRef: UseFormRegisterReturn['ref'] }
-
-/** @deprecated Please use use TextFieldElement, etc. */
-export function useFormMuiRegister<V extends FieldValues>({
-  register,
-}: Pick<UseFormReturn<V>, 'register'>) {
-  const muiRegister: UseMuiFormRegister<V> = (name, opts) => {
-    const { ref: inputRef, ...fields } = register(name, opts)
-    return { ...fields, inputRef }
-  }
-  return muiRegister
-}

package/src/useFormValidFields.tsx

@@ -1,28 +0,0 @@
-import type { FieldPath, FieldValues, UseFormReturn } from 'react-hook-form'
-import type { IsRequired } from './useGqlDocumentHandler'
-
-export type UseFormValidReturn<TFieldValues extends FieldValues> = Partial<
-  Record<FieldPath<TFieldValues>, boolean>
->
-
-/**
- * ### useFormValidFields
- *
- * Record field names as key and boolean as value indicating whether the field is valid
- *
- * @deprecated Please use TextInputElement, SelectElement, etc. with the showValid prop
- * @public
- */
-export function useFormValidFields<TFieldValues extends FieldValues>(
-  form: Pick<UseFormReturn<TFieldValues>, 'watch' | 'formState'>,
-  required: IsRequired<TFieldValues>,
-): UseFormValidReturn<TFieldValues> {
-  const { watch, formState } = form
-  const fields: Partial<Record<FieldPath<TFieldValues>, boolean>> = {}
-
-  Object.keys(required).forEach((key) => {
-    fields[key] = !formState.errors[key] && watch(key as FieldPath<TFieldValues>)
-  })
-
-  return fields
-}