@graphcommerce/react-hook-form 7.1.0-canary.8 → 8.0.0-canary.40

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # Change Log
 
+## 8.0.0-canary.40
+
+## 7.1.0-canary.39
+
+## 7.1.0-canary.38
+
+## 7.1.0-canary.37
+
+## 7.1.0-canary.36
+
+## 7.1.0-canary.35
+
+## 7.1.0-canary.34
+
+## 7.1.0-canary.33
+
+## 7.1.0-canary.32
+
+## 7.1.0-canary.31
+
+## 7.1.0-canary.30
+
+## 7.1.0-canary.29
+
+## 7.1.0-canary.28
+
+## 7.1.0-canary.27
+
+## 7.1.0-canary.26
+
+## 7.1.0-canary.25
+
+## 7.1.0-canary.24
+
+## 7.1.0-canary.23
+
+## 7.1.0-canary.22
+
+### Patch Changes
+
+- [#2097](https://github.com/graphcommerce-org/graphcommerce/pull/2097) [`cdc89cedb`](https://github.com/graphcommerce-org/graphcommerce/commit/cdc89cedb9eb4d37a2c37497689e74ff6df21bf6) - Set default value of `experimental_v2` to false in `useFormGql`, since we don't want an experimental feature as default ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 7.1.0-canary.21
+
+### Patch Changes
+
+- [#2093](https://github.com/graphcommerce-org/graphcommerce/pull/2093) [`112b041f0`](https://github.com/graphcommerce-org/graphcommerce/commit/112b041f01a33fbd521ce3eb3955844f96b29917) - Created a new experimental mutation abort feature inside `useFormGql`. This will allow redundant mutations to be canceled. This feature can be enabled via the `experimental_useV2` prop on the `useFormGql` component ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 7.1.0-canary.20
+
+## 7.1.0-canary.19
+
+## 7.1.0-canary.18
+
+## 7.1.0-canary.17
+
+## 7.1.0-canary.16
+
+## 7.1.0-canary.15
+
+## 7.1.0-canary.14
+
+## 7.1.0-canary.13
+
+## 7.1.0-canary.12
+
+## 7.1.0-canary.11
+
+## 7.1.0-canary.10
+
+## 7.1.0-canary.9
+
+### Patch Changes
+
+- [#2007](https://github.com/graphcommerce-org/graphcommerce/pull/2007) [`f59c27660`](https://github.com/graphcommerce-org/graphcommerce/commit/f59c276605f9ed649d1197a9ba0e3f12d7c6d026) - Reconstruct crosssells behaviour. Add submitted variables & showSuccess to RHF ([@JoshuaS98](https://github.com/JoshuaS98))
+
 ## 7.1.0-canary.8
 
 ## 7.0.2-canary.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.1.0-canary.8",
+  "version": "8.0.0-canary.40",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,19 +11,17 @@
       "project": "./tsconfig.json"
     }
   },
-  "dependencies": {
-    "@apollo/client": "~3.8.2",
-    "react-hook-form": "7.46.1"
-  },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "7.1.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "7.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "7.1.0-canary.8",
-    "@testing-library/react": "^14.0.0"
+    "@testing-library/react": "^14.1.0"
   },
   "peerDependencies": {
+    "@apollo/client": "^3",
+    "@graphcommerce/eslint-config-pwa": "8.0.0-canary.40",
+    "@graphcommerce/prettier-config-pwa": "8.0.0-canary.40",
+    "@graphcommerce/typescript-config-pwa": "8.0.0-canary.40",
     "graphql": "^16.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7"
   }
 }

package/src/useFormGql.tsx

@@ -19,6 +19,30 @@ type UseFormGraphQLCallbacks<Q, V> = {
    */
   onBeforeSubmit?: (variables: V) => V | false | Promise<V | false>
   onComplete?: OnCompleteFn<Q, V>
+
+  /**
+   * Changes:
+   * - Restores `defaultValues` functionality to original functionality, use `values` instead.
+   * - Does not reset the form after submission, use `values` instead.
+   * - Does not 'encode' the variables, use onBeforeSubmit instead.
+   *
+   * Future plans:
+   * - Remove the useMutation/useLazyQuery tuple and use a reguler client.mutation() call.
+   * - Write graphql errors to setError('root')
+   * - Remove onBeforeSubmit, onComplete and the handleSubmit rewrite with a single mutate() callback.
+   *
+   *
+   * ```ts
+   * const { handleSubmit } = useFormGqlMutation();
+   *
+   * const submit = handleSubmit((formValues, mutate) => {
+   *    // onBeforeSubmit now simply is code before mutate() where you can return early for example or set errors.
+   *    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
 }
 
 export type UseFormGraphQlOptions<Q, V extends FieldValues> = UseFormProps<V> &
@@ -28,7 +52,11 @@ export type UseFormGqlMethods<Q, V extends FieldValues> = Omit<
   UseGqlDocumentHandler<V>,
   'encode' | 'type'
 > &
-  Pick<UseFormReturn<V>, 'handleSubmit'> & { data?: Q | null; error?: ApolloError }
+  Pick<UseFormReturn<V>, 'handleSubmit'> & {
+    data?: Q | null
+    error?: ApolloError
+    submittedVariables?: V
+  }
 
 /**
  * Combines useMutation/useLazyQuery with react-hook-form's useForm:
@@ -46,14 +74,27 @@ export function useFormGql<Q, V extends FieldValues>(
     defaultValues?: UseFormProps<V>['defaultValues']
   } & UseFormGraphQLCallbacks<Q, V>,
 ): UseFormGqlMethods<Q, V> {
-  const { onComplete, onBeforeSubmit, document, form, tuple, defaultValues } = options
+  const {
+    onComplete,
+    onBeforeSubmit,
+    document,
+    form,
+    tuple,
+    defaultValues,
+    experimental_useV2 = false,
+  } = options
   const { encode, type, ...gqlDocumentHandler } = useGqlDocumentHandler<Q, V>(document)
-  const [execute, { data, error }] = tuple
+  const [execute, { data, error, loading }] = tuple
+
+  const submittedVariables = useRef<V>()
 
   // automatically updates the default values
   const initital = useRef(true)
+  const controllerRef = useRef<AbortController | undefined>()
   const valuesString = JSON.stringify(defaultValues)
   useEffect(() => {
+    if (experimental_useV2) return
+
     if (initital.current) {
       initital.current = false
       return
@@ -66,7 +107,8 @@ export function useFormGql<Q, V extends FieldValues>(
   const handleSubmit: UseFormReturn<V>['handleSubmit'] = (onValid, onInvalid) =>
     form.handleSubmit(async (formValues, event) => {
       // Combine defaults with the formValues and encode
-      let variables = encode({ ...defaultValues, ...formValues })
+      submittedVariables.current = undefined
+      let variables = experimental_useV2 ? formValues : encode({ ...defaultValues, ...formValues })
 
       // Wait for the onBeforeSubmit to complete
       if (onBeforeSubmit) {
@@ -76,14 +118,28 @@ export function useFormGql<Q, V extends FieldValues>(
       }
       // if (variables === false) onInvalid?.(formValues, event)
 
-      const result = await execute({ variables })
+      submittedVariables.current = variables
+      if (loading && experimental_useV2) controllerRef.current?.abort()
+      controllerRef.current = new window.AbortController()
+      const result = await execute({
+        variables,
+        context: { fetchOptions: { signal: controllerRef.current.signal } },
+      })
+
       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') form.reset(formValues)
+      if (typeof diff(form.getValues(), formValues) === 'undefined' && !experimental_useV2)
+        form.reset(formValues)
 
       await onValid(formValues, event)
     }, onInvalid)
 
-  return { ...gqlDocumentHandler, handleSubmit, data, error }
+  return {
+    ...gqlDocumentHandler,
+    handleSubmit,
+    data,
+    error,
+    submittedVariables: submittedVariables.current,
+  }
 }