@graphcommerce/react-hook-form 8.1.0-canary.50 → 8.1.0-canary.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/package.json +5 -4
- package/src/useFormGql.tsx +11 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 8.1.0-canary.53
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#2325](https://github.com/graphcommerce-org/graphcommerce/pull/2325) [`058fb17`](https://github.com/graphcommerce-org/graphcommerce/commit/058fb1777bdaa51ded6d37529e59a3cc5f0eac06) - Solve an issue where onBeforeSubmit and onComplete would become an 'stale closure' where variables inside wouldn't be updated. By wrapping onBeforeSubmit and onComplete in useEventCallback these functions are updated when outside values get changed.
|
|
8
|
+
([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
9
|
+
|
|
10
|
+
## 8.1.0-canary.52
|
|
11
|
+
|
|
12
|
+
## 8.1.0-canary.51
|
|
13
|
+
|
|
3
14
|
## 8.1.0-canary.50
|
|
4
15
|
|
|
5
16
|
## 8.1.0-canary.49
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/react-hook-form",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "8.1.0-canary.
|
|
5
|
+
"version": "8.1.0-canary.53",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -16,9 +16,10 @@
|
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"@apollo/client": "^3",
|
|
19
|
-
"@graphcommerce/eslint-config-pwa": "^8.1.0-canary.
|
|
20
|
-
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.
|
|
21
|
-
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.
|
|
19
|
+
"@graphcommerce/eslint-config-pwa": "^8.1.0-canary.53",
|
|
20
|
+
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.53",
|
|
21
|
+
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.53",
|
|
22
|
+
"@mui/utils": "^5",
|
|
22
23
|
"graphql": "^16.6.0",
|
|
23
24
|
"react": "^18.2.0",
|
|
24
25
|
"react-dom": "^18.2.0",
|
package/src/useFormGql.tsx
CHANGED
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
ApolloError,
|
|
6
6
|
LazyQueryResultTuple,
|
|
7
7
|
} from '@apollo/client'
|
|
8
|
+
import useEventCallback from '@mui/utils/useEventCallback'
|
|
8
9
|
import { useEffect, useRef } from 'react'
|
|
9
10
|
import { DefaultValues, FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form'
|
|
10
11
|
import diff from './diff'
|
|
@@ -104,6 +105,11 @@ export function useFormGql<Q, V extends FieldValues>(
|
|
|
104
105
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
105
106
|
}, [valuesString, form])
|
|
106
107
|
|
|
108
|
+
const beforeSubmit: NonNullable<typeof onBeforeSubmit> = useEventCallback(
|
|
109
|
+
onBeforeSubmit ?? ((v) => v),
|
|
110
|
+
)
|
|
111
|
+
const complete: NonNullable<typeof onComplete> = useEventCallback(onComplete ?? (() => undefined))
|
|
112
|
+
|
|
107
113
|
const handleSubmit: UseFormReturn<V>['handleSubmit'] = (onValid, onInvalid) =>
|
|
108
114
|
form.handleSubmit(async (formValues, event) => {
|
|
109
115
|
// Combine defaults with the formValues and encode
|
|
@@ -111,11 +117,10 @@ export function useFormGql<Q, V extends FieldValues>(
|
|
|
111
117
|
let variables = experimental_useV2 ? formValues : encode({ ...defaultValues, ...formValues })
|
|
112
118
|
|
|
113
119
|
// Wait for the onBeforeSubmit to complete
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
120
|
+
const res = await beforeSubmit(variables)
|
|
121
|
+
if (res === false) return
|
|
122
|
+
variables = res
|
|
123
|
+
|
|
119
124
|
// if (variables === false) onInvalid?.(formValues, event)
|
|
120
125
|
|
|
121
126
|
submittedVariables.current = variables
|
|
@@ -126,7 +131,7 @@ export function useFormGql<Q, V extends FieldValues>(
|
|
|
126
131
|
context: { fetchOptions: { signal: controllerRef.current.signal } },
|
|
127
132
|
})
|
|
128
133
|
|
|
129
|
-
if (
|
|
134
|
+
if (result.data) await complete(result, variables)
|
|
130
135
|
|
|
131
136
|
// Reset the state of the form if it is unmodified afterwards
|
|
132
137
|
if (typeof diff(form.getValues(), formValues) === 'undefined' && !experimental_useV2)
|