@graphcommerce/react-hook-form 3.2.2 → 3.3.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 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
+
+- [#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

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.2",
+  "version": "3.3.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,7 +19,7 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@apollo/client": "^3.6.6",
+    "@apollo/client": "^3.6.9",
     "graphql": "16.5.0",
     "react-hook-form": "7.32.0"
   },

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

@@ -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)]),