How do I prevent a GET request after a resource route throws an error? Is this a bug?

[DKeen0123]

Hi there,

I have a resource route routes/api/login.ts that receives login form data (email and password).

The reason I have this is because we are exposing our authentication service as an API for our other services to use, but we also use it in our Remix app.

When I submit a form to this route from our login modal which is in the nav bar, rendered in the root.tsx all works well, unless their is an error (such as no user being found).

When there is an error, for some reason, Remix makes a GET request to the resource route. This happens even when catching the error and trying to return a different response.

An example to reproduce this can be found here. Simply clone and run the repo, and submit the form on the home page. It will throw an error, and even though the error is being caught and json returned, instead the browser will redirect to /api/login and you will see an error that there is no loader/component for that route.

Is this a bug? Is there a better way to handle this?

[kiliman]

You're using a regular Form to post to an API route. Form will "navigate" to the action route. After a POST, Remix will then revalidate your routes by calling your loaders. That's why you are seeing a GET request to your API route.

You should either create a UI route for login (i.e., export a default component), or use a fetcher.Form. useFetcher() does NOT do navigation, so it'll do the POST and return the data while staying on the current route.

const fetcher = useFetcher()
// access fetcher.data

return (
  <fetcher.Form method="post" action="/api/login">
    ...
)

https://remix.run/docs/en/v1/api/remix#fetcherform

[DKeen0123]

Ah perfect, fetcher.Form looks like what I need, thankyou.