@graphcommerce/react-hook-form 3.3.0 → 3.3.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 3.3.3
+
+### Patch Changes
+
+- [#1629](https://github.com/graphcommerce-org/graphcommerce/pull/1629) [`662f510c2`](https://github.com/graphcommerce-org/graphcommerce/commit/662f510c21fc44a63036e5c7a0726ccb33c31600) Thanks [@paales](https://github.com/paales)! - The submit button would remain in a loading state when all composed forms were invalid
+
+## 3.3.2
+
+### Patch Changes
+
+- [#1573](https://github.com/graphcommerce-org/graphcommerce/pull/1573) [`02023d8d8`](https://github.com/graphcommerce-org/graphcommerce/commit/02023d8d89c8138144243edce67290bd79ff49a7) Thanks [@paales](https://github.com/paales)! - useGqlDocumentHandler would not encode array items correctly
+
+## 3.3.1
+
+### Patch Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`4a4579bb2`](https://github.com/graphcommerce-org/graphcommerce/commit/4a4579bb2f7da378f3fcc504405caf2560dc10f6) Thanks [@NickdeK](https://github.com/NickdeK)! - When using a useFormGqlMutation or useFormGqlQuery and defaultValues change, the form values will update for fields that aren't dirty.
+
 ## 3.3.0
 
 ### Minor Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.3.0",
+  "version": "3.3.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {

package/src/ComposedForm/ComposedSubmit.tsx

@@ -104,7 +104,12 @@ export function ComposedSubmit(props: ComposedSubmitProps) {
           throw e
         }
       }
-      dispatch({ type: 'SUBMITTING' })
+
+      dispatch(
+        invalidKeys.length === 0
+          ? { type: 'SUBMITTING' }
+          : { type: 'SUBMITTED', isSubmitSuccessful: false },
+      )
     } catch (error) {
       dispatch({ type: 'SUBMITTED', isSubmitSuccessful: false })
     }

package/src/useFormGql.tsx

@@ -7,6 +7,7 @@ import {
   ApolloError,
   LazyQueryResultTuple,
 } from '@apollo/client'
+import { useEffect, useRef } from 'react'
 import { UseFormProps, UseFormReturn, UnpackNestedValue, DeepPartial } from 'react-hook-form'
 import diff from './diff'
 import { useGqlDocumentHandler, UseGqlDocumentHandler } from './useGqlDocumentHandler'
@@ -51,6 +52,18 @@ export function useFormGql<Q, V>(
   const [execute, { data, error }] = tuple
   const client = useApolloClient()
 
+  // automatically updates the default values
+  const initital = useRef(true)
+  const valuesString = JSON.stringify(defaultValues)
+  useEffect(() => {
+    if (initital.current) {
+      initital.current = false
+      return
+    }
+    form.reset(defaultValues, { keepDirtyValues: true })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valuesString, form])
+
   const handleSubmit: UseFormReturn<V>['handleSubmit'] = (onValid, onInvalid) =>
     form.handleSubmit(async (formValues, event) => {
       // Combine defaults with the formValues and encode

package/src/useGqlDocumentHandler.tsx

@@ -1,5 +1,5 @@
 import type { TypedDocumentNode } from '@apollo/client'
-import {
+import type {
   DefinitionNode,
   OperationDefinitionNode,
   ValueNode,
@@ -124,7 +124,7 @@ export function handlerFactory<Q, V>(document: TypedDocumentNode<Q, V>): UseGqlD
   }
 
   function encodeItem(enc: FieldTypes, val: unknown) {
-    if (Array.isArray(enc)) return [encodeItem(enc[0], val)]
+    if (Array.isArray(val)) return val.map((v, i) => encodeItem(enc[i], v))
     if (val && typeof val === 'object') {
       return Object.fromEntries(
         Object.entries(val).map(([key, v]) => [key, heuristicEncode(v as string)]),