Add server side validation support #7938

djhi · 2022-07-07T08:59:34Z

Problem

Server side validation is cumbersome to set up
When using middlewares and as the SaveButton relied on the SaveContext.saving prop, the SaveButton was only disabled for while the main mutation was loading. However, additional work may still be running.

Solution

For pessismistic mode only, we now transparently support server side validation. When a server validation occurs, the DataProvider should throw an error that contains an errors object matching the form shape.

Besides, we now await the mutation in useCreateController and useEditController. In pessimistic mode, that means the SaveButton will stay disabled until the mutation is resolved including its middlewares if any.

That does not change anything for the other mutation modes.

## Problem - Server side validation is cumbersome to set up - When using middlewares and as the SaveButton relied on the SaveContext.saving prop, the SaveButton was only disabled for while the main mutation was loading. However, additional work may still be running. ## Solution For `pessismistic` mode only, we now transparently support server side validation. When a server validation occurs, the DataProvider should throw a ServerValidationError that contains an `errors` object matching the form shape. Besides, we now await the mutation in `useCreateController` and `useEditController`. In `pessimistic` mode, that means the `SaveButton` will stay disabled until the mutation is resolved including its middlewares if any. That does not change anything for the other mutation modes.

docs/Validation.md

examples/simple/src/dataProvider.tsx

fzaninotto · 2022-07-28T08:01:09Z

docs/Validation.md

 ```
-{% endraw %}
+{
+    body: {


why the "body" key? Why can't the dataProvider only reject with ({ errors: { source: 'error message' } }?

Also, your snippet is both a type description and an example, and so it's not enough informative. I'd use a more complete example:

{ errors: { title: 'An article with this title already exists. The title must be unique.', date: 'The date is required', tags: { message: "The tag 'agrriculture' doesn't exist" }, } }

Because that's the current shape of our HttpError. Our data providers put the response json inside the body property of the error they throw

fzaninotto · 2022-07-28T08:01:48Z

docs/Validation.md


 **Tip**: The returned validation errors might have any validation format we support (simple strings or object with message and args) for each key.
+
+**Tip**: If your data provider leverages our [`httpClient`](https://marmelab.com/react-admin/DataProviderWriting.html#example-rest-implementation), this will be handled automatically when your server returns an invalid response with a json body containing the `errors` key.


this isn't super clear

I tried to make this section clearer. Please let me know if that's enough.

packages/ra-core/src/controller/create/useCreateController.spec.tsx

fzaninotto · 2022-07-28T08:09:24Z

docs/Validation.md

+
+**Tip**: If your data provider leverages our [`httpClient`](https://marmelab.com/react-admin/DataProviderWriting.html#example-rest-implementation), this will be handled automatically when your server returns an invalid response with a json body containing the `errors` key.
+
+Here's an example of a dataProvider not using our `httpClient`:


again, this is confusing. You don't give an eample of the general case but you give one of a particular case.

packages/ra-core/src/controller/create/useCreateController.spec.tsx

packages/ra-core/src/controller/edit/useEditController.spec.tsx

fzaninotto · 2022-07-28T08:19:26Z

packages/ra-core/src/controller/edit/useEditController.ts

+                    );
+                } catch (error) {
+                    if ((error as HttpError).body?.errors != null) {
+                        return (error as HttpError).body.errors;
                    }


otherwise, rethrow

Nope, this is the only type of errors we want to handle here. Otherwise, errors will be handled through the onError side effect function

I agree with you @fzaninotto . This might even be the origin of the failing E2E test. I'll have a look.

Okay so after verification, @djhi is correct, both the onError block and the catch block will be executed. So we don't need to rethrow the error.

Than please add a comment explaining why we don't rethrow and that this is not a mistake

fzaninotto · 2022-07-28T08:20:43Z

packages/ra-core/src/controller/create/useCreateController.ts

+                    );
+                } catch (error) {
+                    if ((error as HttpError).body?.errors != null) {
+                        return (error as HttpError).body.errors;


This is weird: the save promise resolves when there is a validation error in the save process? I'd expect it to reject.

This is how the useAugmentedForm has been implemented. If the submit function returns something, we consider this is an error object. This was done like this probably because it worked that way in final-form.

can't we improve that in a backward compatible way?

packages/ra-core/src/dataProvider/useCreate.ts

fzaninotto · 2022-07-28T08:23:00Z

packages/ra-core/src/dataProvider/useUpdate.ts

@@ -431,7 +431,7 @@ export type UseUpdateOptions<
    RecordType,
    MutationError,
    Partial<UseUpdateMutateParams<RecordType>>
-> & { mutationMode?: MutationMode };
+> & { mutationMode?: MutationMode; returnPromise?: boolean };


please test and document that option

It is used in the useEditController in pessimistic mode, so it is tested. I'm not sure we really need to document this option as it's pretty advanced, and the option was not documented in the updateOptions type in the first place.

slax57 · 2023-02-15T14:19:47Z

packages/ra-core/src/dataProvider/useUpdate.ts

@@ -431,7 +431,7 @@ export type UseUpdateOptions<
    RecordType,
    MutationError,
    Partial<UseUpdateMutateParams<RecordType>>
-> & { mutationMode?: MutationMode };
+> & { mutationMode?: MutationMode; returnPromise?: boolean };


It is used in the useEditController in pessimistic mode, so it is tested. I'm not sure we really need to document this option as it's pretty advanced, and the option was not documented in the updateOptions type in the first place.

packages/ra-ui-materialui/src/button/SaveButton.tsx

docs/Validation.md

djhi

💯

fzaninotto · 2023-02-20T10:40:42Z

docs/Validation.md

@@ -362,52 +362,88 @@ const CustomerCreate = () => (

 ## Server-Side Validation

-You can use the errors returned by the dataProvider mutation as a source for the validation. In order to display the validation errors, a custom `save` function needs to be used:
+Server-side validation is supported out of the box. It requires that the dataProvider throws an error with the following shape:


Does that work even in optimistic mode?

djhi added the RFR Ready For Review label Jul 7, 2022

djhi added this to the 4.3 milestone Jul 7, 2022

vercel bot deployed to Preview – react-admin-storybook July 7, 2022 09:00 View deployment

Fix tests

f96df58

vercel bot deployed to Preview – react-admin-storybook July 7, 2022 09:17 View deployment

djhi requested review from fzaninotto, antoinefricker and slax57 July 7, 2022 09:31

antoinefricker approved these changes Jul 7, 2022

View reviewed changes

docs/Validation.md Outdated Show resolved Hide resolved

examples/simple/src/dataProvider.tsx Outdated Show resolved Hide resolved

Apply changes after review

fa7b88d

vercel bot deployed to Preview – react-admin-storybook July 7, 2022 09:37 View deployment

fzaninotto requested changes Jul 28, 2022

View reviewed changes

Apply review comments

0625ac2

vercel bot deployed to Preview – react-admin-storybook July 29, 2022 07:55 View deployment

fzaninotto removed this from the 4.3 milestone Aug 23, 2022

magicxor mentioned this pull request Nov 22, 2022

Unable to Show Server Side Errors in Form #7581

Closed

slax57 requested changes Feb 15, 2023

View reviewed changes

slax57 added 2 commits February 15, 2023 15:58

Merge remote-tracking branch 'origin/next' into refactor-saving-status

bb4ed6e

code review

26ba43d

vercel bot deployed to Preview – react-admin-storybook February 15, 2023 15:28 View deployment

slax57 requested changes Feb 15, 2023

View reviewed changes

docs/Validation.md Outdated Show resolved Hide resolved

fix doc about translation objects support

71fa7de

vercel bot deployed to Preview – react-admin-storybook February 15, 2023 15:56 View deployment

fix E2E test

ba28552

vercel bot deployed to Preview – react-admin-storybook February 15, 2023 16:22 View deployment

slax57 approved these changes Feb 15, 2023

View reviewed changes

djhi commented Feb 20, 2023

View reviewed changes

fzaninotto reviewed Feb 20, 2023

View reviewed changes

Mention server validation only works in pessimistic mode

03c8bac

vercel bot deployed to Preview – react-admin-storybook February 24, 2023 11:23 View deployment

slax57 approved these changes Feb 24, 2023

View reviewed changes

slax57 added this to the 4.9.0 milestone Feb 24, 2023

slax57 merged commit c49228b into next Feb 24, 2023

slax57 deleted the refactor-saving-status branch February 24, 2023 14:06

djhi mentioned this pull request Mar 10, 2023

Make server-side validation supportable in the standard save function #8722

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add server side validation support #7938

Add server side validation support #7938

djhi commented Jul 7, 2022 •

edited

Loading

fzaninotto Jul 28, 2022

djhi Jul 29, 2022

fzaninotto Jul 28, 2022

slax57 Feb 15, 2023

fzaninotto Jul 28, 2022

slax57 Feb 15, 2023

fzaninotto Jul 28, 2022

djhi Jul 29, 2022

slax57 Feb 15, 2023

slax57 Feb 15, 2023

fzaninotto Feb 20, 2023

fzaninotto Jul 28, 2022

djhi Jul 29, 2022

fzaninotto Feb 20, 2023

fzaninotto Jul 28, 2022

slax57 Feb 15, 2023

slax57 Feb 15, 2023

djhi left a comment

fzaninotto Feb 20, 2023


		Tip: The returned validation errors might have any validation format we support (simple strings or object with message and args) for each key.

		Tip: If your data provider leverages our [`httpClient`](https://marmelab.com/react-admin/DataProviderWriting.html#example-rest-implementation), this will be handled automatically when your server returns an invalid response with a json body containing the `errors` key.


		Tip: If your data provider leverages our [`httpClient`](https://marmelab.com/react-admin/DataProviderWriting.html#example-rest-implementation), this will be handled automatically when your server returns an invalid response with a json body containing the `errors` key.

		Here's an example of a dataProvider not using our `httpClient`:

Add server side validation support #7938

Add server side validation support #7938

Conversation

djhi commented Jul 7, 2022 • edited Loading

Problem

Solution

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

djhi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

djhi commented Jul 7, 2022 •

edited

Loading