@graphcommerce/react-hook-form 9.0.1-canary.0 → 9.0.1-canary.2
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 +15 -97
- package/package.json +4 -4
- package/src/useFormGql.tsx +26 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,30 +1,34 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
## 9.0.1-canary.
|
|
3
|
+
## 9.0.1-canary.2
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
### Patch Changes
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- [#2465](https://github.com/graphcommerce-org/graphcommerce/pull/2465) [`881e146`](https://github.com/graphcommerce-org/graphcommerce/commit/881e146acf0d129d6d44ec207619a45ad04d673b) - Solve an issue where the payment submission would remain in a spinning state when placing an order failed: `useFormGql` will now set `root` error on the form when there is an error response on the GraphQL operation, an error is thrown in onBeforeSubmit and in onSuccess. ([@paales](https://github.com/paales))
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## 9.0.1-canary.1
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
## 9.0.0
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
### Major Changes
|
|
14
14
|
|
|
15
|
-
- [#
|
|
15
|
+
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Big INP improvments: Moved all usages of `useFormPersist` to the `<FormPersist/>` component to prevent rerenders. ([@FrankHarland](https://github.com/FrankHarland))
|
|
16
16
|
|
|
17
17
|
### Patch Changes
|
|
18
18
|
|
|
19
|
+
- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`16e2980`](https://github.com/graphcommerce-org/graphcommerce/commit/16e2980da4b72330642e59e8c82d1acde387e4fc) - `useFormGql` and it's derived hooks now have a new `skipUnchanged` prop. The form will only be submitted when there are fields dirty in a form. This reduces the amount of queries ran in the checkout greatly. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
20
|
+
|
|
19
21
|
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Added deprecation warnings for `useFormMuiRegister`. Refactored `useFormPersist` to use `useWatch` and added a separate `<FormPersist />` component to prevent rerenders. ([@FrankHarland](https://github.com/FrankHarland))
|
|
20
22
|
|
|
21
|
-
- [#
|
|
23
|
+
- [#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. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
22
24
|
|
|
23
|
-
- [#
|
|
25
|
+
- [#2391](https://github.com/graphcommerce-org/graphcommerce/pull/2391) [`c1fa10f`](https://github.com/graphcommerce-org/graphcommerce/commit/c1fa10f995f562741b7574d465580e5405982a70) - Prevent overwriting custom context in useFormGqlMutation by merging operationOptions before execution. ([@wimvdputten](https://github.com/wimvdputten))
|
|
26
|
+
|
|
27
|
+
- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`1d6512d`](https://github.com/graphcommerce-org/graphcommerce/commit/1d6512d4118cfb46602aa1f2432c3566fdb3261d) - Rename `experimental_useV2` prop to `deprecated_useV1` in `useFromGql` and enable it by default. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
24
28
|
|
|
25
|
-
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`
|
|
29
|
+
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use `muiRegister`, which improves INP scores. ([@FrankHarland](https://github.com/FrankHarland))
|
|
26
30
|
|
|
27
|
-
- [#
|
|
31
|
+
- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`af45239`](https://github.com/graphcommerce-org/graphcommerce/commit/af452399eaab59ee4e13484fdc9cb0a7660da531) - When a `useFormGql` throws an error in the `onBeforeSubmit` method or `onComplete` method it will be set as an ApolloError with the message, allowing it to be displayed somewhere. The `<PaymentMethodButton />` will now render this as an `<ErrorSnackbar />`. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
28
32
|
|
|
29
33
|
- [#2421](https://github.com/graphcommerce-org/graphcommerce/pull/2421) [`d500643`](https://github.com/graphcommerce-org/graphcommerce/commit/d500643138799b6db1610cb10a1d065d6219d8ea) - Resolve peer dependency issues so we get a clean install ([@paales](https://github.com/paales))
|
|
30
34
|
|
|
@@ -34,92 +38,6 @@
|
|
|
34
38
|
|
|
35
39
|
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`1a6d0c4`](https://github.com/graphcommerce-org/graphcommerce/commit/1a6d0c4a3584b1e404b444f1ca44c68eaad56cb7) - Mark `useFormValidFields` as deprecated: Please use `<TextInputElement />`, `<SelectElement />`, etc. with the `showValid` prop. ([@FrankHarland](https://github.com/FrankHarland))
|
|
36
40
|
|
|
37
|
-
## 9.0.0-canary.118
|
|
38
|
-
|
|
39
|
-
## 9.0.0-canary.117
|
|
40
|
-
|
|
41
|
-
## 9.0.0-canary.116
|
|
42
|
-
|
|
43
|
-
## 9.0.0-canary.115
|
|
44
|
-
|
|
45
|
-
## 9.0.0-canary.114
|
|
46
|
-
|
|
47
|
-
## 9.0.0-canary.113
|
|
48
|
-
|
|
49
|
-
## 9.0.0-canary.112
|
|
50
|
-
|
|
51
|
-
## 9.0.0-canary.111
|
|
52
|
-
|
|
53
|
-
## 9.0.0-canary.110
|
|
54
|
-
|
|
55
|
-
## 9.0.0-canary.109
|
|
56
|
-
|
|
57
|
-
## 9.0.0-canary.108
|
|
58
|
-
|
|
59
|
-
## 9.0.0-canary.107
|
|
60
|
-
|
|
61
|
-
## 9.0.0-canary.106
|
|
62
|
-
|
|
63
|
-
## 9.0.0-canary.105
|
|
64
|
-
|
|
65
|
-
## 9.0.0-canary.104
|
|
66
|
-
|
|
67
|
-
## 9.0.0-canary.103
|
|
68
|
-
|
|
69
|
-
### Patch Changes
|
|
70
|
-
|
|
71
|
-
- [#2421](https://github.com/graphcommerce-org/graphcommerce/pull/2421) [`d500643`](https://github.com/graphcommerce-org/graphcommerce/commit/d500643138799b6db1610cb10a1d065d6219d8ea) - Resolve peer dependency issues so we get a clean install ([@paales](https://github.com/paales))
|
|
72
|
-
|
|
73
|
-
## 9.0.0-canary.90
|
|
74
|
-
|
|
75
|
-
### Minor Changes
|
|
76
|
-
|
|
77
|
-
- [#2391](https://github.com/graphcommerce-org/graphcommerce/pull/2391) [`c1fa10f`](https://github.com/graphcommerce-org/graphcommerce/commit/c1fa10f995f562741b7574d465580e5405982a70) - Prevent overwriting custom context in useFormGqlMutation by merging operationOptions before execution. ([@wimvdputten](https://github.com/wimvdputten))
|
|
78
|
-
|
|
79
|
-
## 9.0.0-canary.80
|
|
80
|
-
|
|
81
|
-
### Minor Changes
|
|
82
|
-
|
|
83
|
-
- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`16e2980`](https://github.com/graphcommerce-org/graphcommerce/commit/16e2980da4b72330642e59e8c82d1acde387e4fc) - useFormGql and it's derived hooks now have a new `skipUnchanged` prop. The form will only be submitted when there are fields dirty in a form. This reduces the amount of queries ran in the checkout greatly. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
84
|
-
|
|
85
|
-
- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`1d6512d`](https://github.com/graphcommerce-org/graphcommerce/commit/1d6512d4118cfb46602aa1f2432c3566fdb3261d) - Rename experimental_useV2 prop to deprecated_useV1 in useFromGql and enable it by default ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
86
|
-
|
|
87
|
-
### Patch Changes
|
|
88
|
-
|
|
89
|
-
- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`af45239`](https://github.com/graphcommerce-org/graphcommerce/commit/af452399eaab59ee4e13484fdc9cb0a7660da531) - When a useFormGql throws an error in the onBeforeSubmit method or onComplete method it will setError('root.thrown') with the message, allowing it to be displayed somewhere. PaymentMethodButton will now render this as an ErrorSnackbar. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
90
|
-
|
|
91
|
-
## 8.1.0-canary.53
|
|
92
|
-
|
|
93
|
-
### Minor Changes
|
|
94
|
-
|
|
95
|
-
- [#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. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
96
|
-
|
|
97
|
-
## 8.1.0-canary.46
|
|
98
|
-
|
|
99
|
-
### Patch Changes
|
|
100
|
-
|
|
101
|
-
- [#2314](https://github.com/graphcommerce-org/graphcommerce/pull/2314) [`490bbfb`](https://github.com/graphcommerce-org/graphcommerce/commit/490bbfb5d88a7f58e83fa9c8b7f475c277a0eda3) - Added missing dependencies of lodash and @types/lodash ([@paales](https://github.com/paales))
|
|
102
|
-
|
|
103
|
-
## 8.1.0-canary.38
|
|
104
|
-
|
|
105
|
-
### Patch Changes
|
|
106
|
-
|
|
107
|
-
- [#2305](https://github.com/graphcommerce-org/graphcommerce/pull/2305) [`77e8297`](https://github.com/graphcommerce-org/graphcommerce/commit/77e82976816994336c616208a651cb18ce9ea270) - Fix bug with persist not applying saved changes by moving <FromPersist/> below the form components ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
108
|
-
|
|
109
|
-
## 8.0.6-canary.2
|
|
110
|
-
|
|
111
|
-
### Patch Changes
|
|
112
|
-
|
|
113
|
-
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Add deprecation warnings for useFormMuiRegister. Refactor useFormPersist to useWatch and add a separate `<FormPersist/>` component to prevent rerenders. ([@FrankHarland](https://github.com/FrankHarland))
|
|
114
|
-
|
|
115
|
-
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores ([@FrankHarland](https://github.com/FrankHarland))
|
|
116
|
-
|
|
117
|
-
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`02da217`](https://github.com/graphcommerce-org/graphcommerce/commit/02da2172ef702133510f6923190efae2801032c5) - Migrate most usages of useFormAutoSubmit to <FormAutoSubmit/> and deprecated useFormAutoSubmit ([@FrankHarland](https://github.com/FrankHarland))
|
|
118
|
-
|
|
119
|
-
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders. ([@FrankHarland](https://github.com/FrankHarland))
|
|
120
|
-
|
|
121
|
-
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`1a6d0c4`](https://github.com/graphcommerce-org/graphcommerce/commit/1a6d0c4a3584b1e404b444f1ca44c68eaad56cb7) - Mark useFormValidFields as deprecated: Please use TextInputElement, SelectElement, etc. with the showValid prop ([@FrankHarland](https://github.com/FrankHarland))
|
|
122
|
-
|
|
123
41
|
## 8.0.5
|
|
124
42
|
|
|
125
43
|
### Patch Changes
|
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": "9.0.1-canary.
|
|
5
|
+
"version": "9.0.1-canary.2",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
},
|
|
14
14
|
"peerDependencies": {
|
|
15
15
|
"@apollo/client": "*",
|
|
16
|
-
"@graphcommerce/eslint-config-pwa": "^9.0.1-canary.
|
|
17
|
-
"@graphcommerce/prettier-config-pwa": "^9.0.1-canary.
|
|
18
|
-
"@graphcommerce/typescript-config-pwa": "^9.0.1-canary.
|
|
16
|
+
"@graphcommerce/eslint-config-pwa": "^9.0.1-canary.2",
|
|
17
|
+
"@graphcommerce/prettier-config-pwa": "^9.0.1-canary.2",
|
|
18
|
+
"@graphcommerce/typescript-config-pwa": "^9.0.1-canary.2",
|
|
19
19
|
"@mui/utils": "^5",
|
|
20
20
|
"graphql": "^16.6.0",
|
|
21
21
|
"react": "^18.2.0",
|
package/src/useFormGql.tsx
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type {
|
|
2
|
-
ApolloError,
|
|
3
2
|
FetchResult,
|
|
4
3
|
LazyQueryHookOptions,
|
|
5
4
|
LazyQueryResultTuple,
|
|
@@ -8,7 +7,7 @@ import type {
|
|
|
8
7
|
MutationTuple,
|
|
9
8
|
TypedDocumentNode,
|
|
10
9
|
} from '@apollo/client'
|
|
11
|
-
import { isApolloError } from '@apollo/client'
|
|
10
|
+
import { ApolloError, isApolloError } from '@apollo/client'
|
|
12
11
|
import { getOperationName } from '@apollo/client/utilities'
|
|
13
12
|
import useEventCallback from '@mui/utils/useEventCallback'
|
|
14
13
|
import { useEffect, useRef } from 'react'
|
|
@@ -179,16 +178,23 @@ export function useFormGql<Q, V extends FieldValues>(
|
|
|
179
178
|
if (onBeforeSubmitError) {
|
|
180
179
|
if (isApolloError(onBeforeSubmitError)) {
|
|
181
180
|
returnedError.current = onBeforeSubmitError
|
|
181
|
+
form.setError('root', { message: onBeforeSubmitError.message })
|
|
182
182
|
} else {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
183
|
+
const message =
|
|
184
|
+
process.env.NODE_ENV === 'development'
|
|
185
|
+
? `A non ApolloError was thrown during the onBeforeSubmit handler: ${onBeforeSubmitError.message}`
|
|
186
|
+
: 'An unexpected error occurred, please contact the store owner'
|
|
187
|
+
form.setError('root', { message })
|
|
188
|
+
returnedError.current = new ApolloError({ graphQLErrors: [{ message }] })
|
|
187
189
|
}
|
|
190
|
+
return
|
|
191
|
+
}
|
|
188
192
|
|
|
193
|
+
if (onBeforeSubmitResult === false) {
|
|
194
|
+
form.setError('root', { message: 'Form submission cancelled' })
|
|
189
195
|
return
|
|
190
196
|
}
|
|
191
|
-
|
|
197
|
+
|
|
192
198
|
variables = onBeforeSubmitResult
|
|
193
199
|
|
|
194
200
|
submittedVariables.current = variables
|
|
@@ -207,21 +213,25 @@ export function useFormGql<Q, V extends FieldValues>(
|
|
|
207
213
|
},
|
|
208
214
|
})
|
|
209
215
|
|
|
210
|
-
|
|
211
|
-
if (
|
|
212
|
-
|
|
216
|
+
// If there are submission errors, set the error and return
|
|
217
|
+
if (result.errors && result.errors.length > 0) {
|
|
218
|
+
form.setError('root', { message: result.errors.map((e) => e.message).join(', ') })
|
|
213
219
|
return
|
|
214
220
|
}
|
|
221
|
+
|
|
222
|
+
const [, onCompleteError] = await complete(result, variables)
|
|
215
223
|
if (onCompleteError) {
|
|
216
224
|
if (isApolloError(onCompleteError)) {
|
|
217
225
|
returnedError.current = onCompleteError
|
|
226
|
+
form.setError('root', { message: onCompleteError.message })
|
|
218
227
|
} else {
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
228
|
+
const message =
|
|
229
|
+
process.env.NODE_ENV === 'development'
|
|
230
|
+
? `A non ApolloError was thrown during the onComplete handler: ${onCompleteError.message}`
|
|
231
|
+
: 'An unexpected error occurred, please contact the store owner'
|
|
232
|
+
form.setError('root', { message })
|
|
233
|
+
returnedError.current = new ApolloError({ graphQLErrors: [{ message }] })
|
|
223
234
|
}
|
|
224
|
-
|
|
225
235
|
return
|
|
226
236
|
}
|
|
227
237
|
|
|
@@ -236,7 +246,7 @@ export function useFormGql<Q, V extends FieldValues>(
|
|
|
236
246
|
...gqlDocumentHandler,
|
|
237
247
|
handleSubmit,
|
|
238
248
|
data,
|
|
239
|
-
error:
|
|
249
|
+
error: returnedError.current ?? error,
|
|
240
250
|
submittedVariables: submittedVariables.current,
|
|
241
251
|
}
|
|
242
252
|
}
|