Very confused with single fetch api (json, data, response, redirect)

[AndreiBadescu]

I want to do something like this:

export async function action({ request }: ActionFunctionArgs) {
return new Response(null, {
status: 400
});
}

Saw that json() is deprecated now.

What about Response object? Should I use this or data()? And is redirect affected by this migration to single fetch api?

[akomm]

Single fetch is used for the loader data.

To understand the methods like data, you need to understand the following:

Before single fetch, remix would send separate request for all the active routes up to the root and then provide the results via useLoaderData to all the individual active routes.

Single fetch instead sends one request with the list of the routes it wants to have the data for. And it gets a single response with the returned data for each of the routes listed in the request.

You can not simply return new Response() from each route, because there can only be one response. What is supposed to happen with all the responses returned? This is why you would only return data, the Response is created automatically for you to wrap all the data from each route's loader. On the client the useLoaderData hook then unpacks the data for its route from the single response.

So when you just want to return data, you just return the data like:

return {foo: "bar"}

But what if you want to set status or a header? This is where you use the data utility function. It gives you the ability to return data and define headers or the status. The status of the last route will be used and the headers get merged from all routes into one request.

You only use the data function for this purpose, otherwise don't use it.

What about json and defer? Before single fetch, json was basically data. But because previously you could not return promises from your loader, you also had the defer utility.

Single fetch also introduces the use of a transformer that simply allows you to return promises without any helper like defer. So defer is not used anymore.

When to use new Response: for example in resource routes. When you return an image, pdf or other data directly. Its obvious that for a single URL, no matter how many parent routes are above the resource route, you only return one response and its the resource you want to be returned in this URL ... Basically the leaf (resource) route dictates the returned response. You don't want to render you PDF in a React layout, right? :D

TLDR, above just explains why:

• redirect works as before, its just a an utility so you don't have to construct the new Response(...)
• Don't use json util
• Don't use defer util.
• Use data only when you need to set headers or status. Otherwise just return the data.
• Create Response only when makes sense, like in resource routes.

[akomm]

Resource routes
data util function