POST Request to action returns page HTML instead of the response returned by the action

[HadiMalikDev]

I'm using the Fetch API to make a request to my page's action function. The function is supposed to return a JSON response. The logs show that the action component gets called and does not log any errors. However, the response received by the Fetch function is the HTML page of the route I sent the request from.

Here's the relevant code if that helps:
Form submission on frontend(/auth/login):

const formData = new FormData(form)
const endpoint = form.getAttribute('action') ?? window.location.pathname
const method = form.getAttribute('method') ?? 'GET'

const response = await fetch(endpoint, {
  method: method,
  body: formData,
  headers: {
    Accept: 'application/json',
  },
})

console.log(await response.text())

console.log(await response.json())
return await response.json()

Action Component(/auth/login)

export const action: ActionFunction = async ({ request }) => {
  if (request.method != 'POST')
    return json(
      {},{ status: 405},)

  const form = await request.formData()
  const email = String(form.get('email'))
  const password = String(form.get('password'))
  if (!email || !password) {
    return json(
      {
        error: 'One or more required fields are missing',
      },
      400,
    )
  }

  try {
    const user = await User.verifyCredentials(email, password)
    const token = createToken(user.id)

    console.log('WORKED')
    return json(
      {
        token,
        message: `Welcome back ${user.username}`,
      },
      200,
    )
  } catch (error) {
    console.log(error)
    switch (error?.constructor) {
      case StringValidationError:
        return json(
          {
            error: `Invalid value: ${(error as StringValidationError).fieldName}`,
          },
          {
            status: 400,
          },
        )
      case InvalidCredentialsError:
        return json(
          {
            error: `Invalid credentials`,
          },
          400,
        )
      default:
        break
    }

    // console.log(error)
    return json(
      {
        error: 'Unknown Error',
      },
      500,
    )
  }
}

Fetch Request Response:

[kiliman]

Calling fetch on a route will always return the HTML for that route. Remix doesn't know if it's a regular browser request or coming from fetch (it doesn't look at the accept header).

Based on your example, it doesn't appear you're using Remix as intended. For your login form, you could let the <Form> submit to your action directly and use useActionData to access the result.

If you must do an imperative fetch, then I suggest you use fetchers: https://remix.run/docs/en/main/hooks/use-fetcher

And finally, you can use fetch directly (that's what Remix does internally). You can call your route loader, but you need to specify the route id as a special _data search param (that's what Remix uses for client-side requests to loaders/actions). _data is the route id (basically the file path without the extension).

NOTE: This is an implementation detail and is subject to change.

If you open any Remix app and open the Network tab in DevTools, you'll see these data requests.

fetch('/auth/login?_data=routes/auth.login', { method: 'POST', ... })

[HadiMalikDev]

Furthermore, is there a resource that you can point me to, where I can read more about the "it doesn't look at the accept header" thing you mentioned in your answer? I'd love to read more about that and the logic behind that

[jwayne]

@HadiMalikDev To my understanding, Remix's useActionData/useFetcher don't offer handling for network errors outside of bubbling up to an ErrorBoundary. (I'd love to be shown otherwise - this is a blocker I'm having in using Remix)

Here's a few related discussions: #4645 #4242

[wave-light]

A way to work around this, if you want to use the Fetch API and catch errors, is to create a dedicated route for your action function.

[spacepolice10]

@HadiMalikDev To my understanding, Remix's useActionData/useFetcher don't offer handling for network errors outside of bubbling up to an ErrorBoundary. (I'd love to be shown otherwise - this is a blocker I'm having in using Remix)

Here's a few related discussions: #4645 #4242

Can't you catch error inside action/loader and return it as an Error object or json, so you can handle it in any client tool you use to make requests?

Some ideas of it could be found here https://remix.run/docs/en/main/guides/form-validation

[HadiMalikDev]

Hey @spacepolice10 I'm talking about a usecase where the action/loader never gets called from the client side due to a network connectivity issue. I'd prefer a way to handle that without having it bubble it to the ErrorBoundary, but based on the responses I've received, I'm not really sure that's possible.

[moonstar-x]

If it helps, and adding onto @kiliman 's answer, what I ended up doing to actually receive the JSON response from where I make a request to the action handler I did the following:

Let's say I have a route named _main.level1.level2._index which would basically render at the path /level1/level2. In this route I have the following action:

export const action = async ({ request, params }: ActionFunctionArgs) => {
  const data = { value: 'result from API call from server' };
  return json(data, { status: 201 });
});

Now, I'll be using this custom hook to send the form data to the handler:

export const useImperativeSubmit = () => {
  const action = useFormAction();
  const matches = useMatches();

  const actionNoQuery = action.substring(0, action.indexOf("?"));
  const match = matches.find((m) => m.pathname === actionNoQuery);
  const url = `${action}&_data=${match?.id}`;

  return useCallback(
    async (data: object) => {
      const response = await fetch(url, {
        method: "POST",
        body: JSON.stringify(data),
        headers: { Accept: "application/json", "Content-Type": "application/json" },
      });
      const responseData = await response.json();

      if (!response.ok) {
        throw responseData;
      }

      return responseData;
    },
    [url],
  );
};

Now, inside my route, I have a form somewhere with the following definition:

const MyForm = () => {
  const submit = useImperativeSubmit()

  const handleSubmit = async () => {
    const result = await submit({ data: 'my form data' })
    // result will be { value: 'result from API call from server' }
  } 

  return (
    <form onSubmit={handleSubmit}></form>
  )
}

This submits the form at the first action handler found, you could probably edit the hook to choose what handler to use based on the route ID.

Doing this in my project and I'm able to consume my action handler as if it was a simple endpoint that responds with JSON.

[doaortu]

This is sweet. but I have to modify it a bit to work on my remix version (2.6.0):

export const useImperativeSubmit = () => {
  const action = useFormAction();
  const matches = useMatches();

  const actionNoQuery = action.substring(0, action.indexOf("?"));
  const url = `${actionNoQuery}?_data=${encodeURIComponent(matches.at(-1)?.id!)}`;

  return useCallback(
    async (data: object) => {
      const response = await fetch(url, {
        method: "POST",
        body: JSON.stringify(data),
        headers: { Accept: "application/json", "Content-Type": "application/json" },
      });
      const responseData = await response.json();

      if (!response.ok) {
        throw responseData;
      }

      return responseData;
    },
    [url],
  );
};

[nickretallack]

What the heck? This seems overly complicated. Is it not possible to make a regular JSON API endpoint in Remix?

[moonstar-x]

To be fair, one thing you could actually do is;

1. Create a separate route (i.e api.endpoint.tsx) with the following content:

export const action = () => {
  return { data: "123" };
};

2. Make your POST request to domain/api/test and it should respond with your JSON.

The other suggestion was mostly useful for people who for some reason have an action handler in a route that does render HTML (whether it's from said route or parents in the hierarchy through an Outlet).

[ZalgirisKaunas]

this is insane level of poor design spent 30hrs searching for this