[Docs]: Returning json from loader

[guisehn]

Describe what's incorrect/missing in the documentation

Not sure if this should be a docs, bug, or another type of issue. It is about an error message that seems to be misleading.

I started using React Router (as a framework) for a personal project and one of my routes is an API endpoint that returns JSON, intended for other developers to consume.

My first instinct was to return data({ ... }) from my loader (based on my usage of data with actions), so I tried:

import type { Route } from "./+types/api.v1.$foo";
import { data } from "react-router";

export async function loader(_: Route.LoaderArgs) {
  return data({ foo: "bar" });
}

When doing that, I got the following error in my terminal:

The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose

Error: Expected a Response to be returned from resource route handler
    at invariant3 (file:///path/to/app/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:8539:11)
    at handleResourceRequest (file:///path/to/app/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:9275:5)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at requestHandler (file:///path/to/app/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:9061:18)
    at file:///path/to/app/node_modules/@react-router/express/dist/index.mjs:28:22

Special highlight about the log "The following error is a bug in React Router", while this doesn't seem to actually be a bug.

I eventually discovered that unlike action that can return data, on the loader I needed to return an instance of Response and manually apply the content-type header to application/json.

1. Should loader accept returning data?
2. In case not, maybe the error message could show the mistake and refer that user should actually return a Response

[jezikk]

For RestAPI JSON response you could use Response.json({ foo:'bar' }). Use data helper function only in case you need to return http header.

https://reactrouter.com/how-to/headers#1-wrap-your-return-value-in-data

For Rest API:

export function loader() {
  return Response.json({ foo: "bar" });
}

For page rendering:

export function loader() {
  return { foo: "bar" };
}

[yoni-noma]

For RestAPI JSON response you could use Response.json({ foo:'bar' }). Use data helper function only in case you need to return http header.

https://reactrouter.com/how-to/headers#1-wrap-your-return-value-in-data

For Rest API:

export function loader() {
return Response.json({ foo: "bar" });
}
For page rendering:

export function loader() {
return { foo: "bar" };
}

But isnt it also possible to return Response.json with headers?
return Response.json({ data: { foo: 'baz' } }, { headers });

[guisehn]

Hi guys,

Thanks for pointing to the documentation. I changed my code from return new Response(...) to return Response.json(...) as recommended, I like that it's more succint. :)

Still the error message from the framework is misleading when using the data function incorrectly:

The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose

Error: Expected a Response to be returned from resource route handler
    at invariant3 (file:///path/to/app/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:8539:11)

Message says that it's a bug in React Router, but it was actually me using it incorrectly.

Should we change the error message in that case and link to a guide on how to use it? Something like:

You're using `data` but not returning a component from your route.

If you'd like to return a JSON response, return `Response.json(...)` instead.

[jacargentina]

I 've found this pain points:

• Reusing loader for API / "page rendering" not possible: should forcibly wrap in Response.json to API use case
• When using Response.json, the react-router typegen gives loaderData: never: no TS types!