Single Fetch and redirect utility deprecation

[caprica]

I am in the process of migrating my project to use Single Fetch, I am mostly done apart from redirects.

I'd just like some clarification on the documentation at https://remix.run/docs/en/main/guides/single-fetch where it states:

Because single fetch supports naked object returns, and you no longer need to return a Response instance to set status/headers, the json/redirect/redirectDocument/defer utilities are considered deprecated when using Single Fetch

So I take this to read that I should move away from using redirect() in loaders/actions when using single fetch.

I currently use throw redirect('go-here') in a lot of places, so idiomatically am I supposed to replace all of these by specifically setting a response status and Location header instead?

[kiliman]

throw redirect or throwing any Response is still an acceptable pattern. You just don't want to return responses directly because Single Fetch doesn't know how to interpret the response body.

Don't worry about setting the response stub status and headers for these as you can add those directly. The only time you need to use the response stub is if you're returning a naked object.

throw redirect('/', { status: 301, headers: { ... } })

You still need to return a Response directly in Resource Routes since Remix doesn't process the response. It simply sends it as-is to the client.

[brophdawg11]

FWIW, returning/throwing Response's is still valid today in v2 but I wouldn't assume that will be valid in v7. The entire point of the response stub is because we no longer merge response headers via headers(), it allows us to re-play set/append/delete operations on a fresh Headers for the final response in the exact same order - which we cannot do from a Response instance.

Middleware is also a large reason for the response stub so I expect when that lands we'll have a clearer view of the eventual v7 functionality.

In single fetch you can do it manually:

export function loader({ response }) {
  response.status = 301;
  response.headers.set('Location', '/whatever');
  throw response
}

Or you could wrap it up in your own utility (I expect if we do drop redirect in v7 then a response stub compatible version will be made available in remix-utils):

// app/utils.js
function redirect(response: ResponseStub, location: string, status: number) {
  response.status = status;
  response.headers.set('Location', location);
  return response
}

// app/routes/some-route.tsx
export function loader({ response }) {
  throw redirect(response, "/whatever", 301);
}

[janhesters]

It seems like the pattern with a response in the loader was never adopted - even when turning on the single fetch feature flag.

How are you supposed to redirect now?

[Synvox]

@janhesters Looks like there are two redirect functions:

1. redirect - This does "single fetch" redirect and uses turbo-stream to send that information to the client.
2. redirectDocument - This does a real 302 redirect and uses the Location header.

For me, I have some paths that are the same origin but not handled by remix that I want to be able to redirect to. Switching redirect for redirectDocument did the trick.

https://remix.run/docs/en/main/utils/redirectDocument