Errored POST request, doesn't prevent parent GET requests from executing

[ivosabev]

What version of Remix are you using?

1.4.3

Steps to Reproduce

I have the following setup: /products - that has a list of products and a create product button /products/create - dialog form that overlays the products list

I am submitting the create form with a submit button, not programatically.

The form returns 400 error with validation errors inside the response body.

Expected Behavior

A single POST request and response

Actual Behavior

I get the following requests:

POST /products/create GET create?_data=routes%2Fproducts%2F%24create GET create?_data=routes%2Fproducts

I believe that since the POST request threw a 400 the other GET requests should not be executed as it is a waste of bandwidth. If that should not be the general case I would like to see a mechanism maybe inside unstable_shouldReload that should be aware of HTTP errors and prevent any further GET requests.

[kiliman]

I believe the reason is that Remix is trying to emulate what the browser would do normally. Without Remix, when you POST to a route, the server would have to re-render the page with the validation errors. It would have also rendered all the parent route data as well, since it needs to render the full page.

Granted, this may not be what you want when using Remix CSR, so probably should have a way to opt-out of revalidation for action errors (400 and above).

[ivosabev]

Validation errors are coming from the POST response, so the other two GET requests seem unnecessary and I agree there should be an opt-out of them.

[brophdawg11]

I think this makes sense as well - we're likely going to include this ability in the new react-router work and then remix will inherit from there. At the moment I think the plan is to include an actionResult in the arguments to shouldRevalidate (the planned new name of unstable_shouldReload)

[lsdebianchi]

+1 I encountered the exact same problem, where the re-triggering of the loaders after a bad form submission (actions) is refetching the data and (in my code) resetting all the input fields to the initial data (this result in the user losing its edits).

[brophdawg11]

This should be possible now that Remix is on top of the React Router 6.4+. The new shouldRevalidate function has an actionResult param which will be the data/error from the action that caused the revalidation