How to forward defer's setCookie to the client response header in Remix #10218

19Qingfeng · 2024-11-13T07:43:39Z

19Qingfeng
Nov 13, 2024

I need to forward all response headers to the client for effectiveness after the request in defer is returned, like this:

import {
  defer,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration
} from '@remix-run/react';
import type { LinksFunction, LoaderFunction } from '@remix-run/node';

export const loader: LoaderFunction = () => {
  async function messagePromise() {
    // How to use https://api.example.com/messages Forward the returned responsiveHeader to the client
    return fetch('https://api.example.com/messages');
  }

  return defer({
    messagePromise
  });
};

export function Layout({ children }: { children: React.ReactNode }) {
  const { messagePromise } = useLoaderData();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

How to use https://api.example.com/messages Forward the returned responsiveHeader to the client?

Is there any mechanism or API in Remix that can be implemented

akomm · 2024-11-18T15:35:20Z

akomm
Nov 18, 2024

Doesn't seem to make any sense to me, but:

You do know, that fetch returns a Promise<Response> and you can directly return it from the loader? No defer needed. It will also properly stream / pass-through the data as a stream without blocking. And obviously contain all the headers from the fetch Response.

Fetch returns a Response promise:

Which provides you the headers...

There is potentially also a way to do it with defer, if you need to make multiple fetch and return multiple results. But at this point what do you do with the multiple headers?

it seems weird to me on many levels.

2 replies

akomm Nov 18, 2024

If you need defer and headers, you need to do something like that:

But it might be not very efficient.

akomm Nov 18, 2024

when fetch resolves only when body is fully streamed, you won't gain anything. If fetch resolves when headers are received and body starts stream, you save the time waiting for the body to arrive fully.

sergiodxa · 2024-11-18T15:52:14Z

sergiodxa
Nov 18, 2024
Maintainer

The headers are sent on the response before the body

Defer allows you to send a response and stream the body later

If you need some data to set the headers then you need the data before you send the response

This means you need to await that data and can't defer it anymore

If the data is not required to set a header or status code you can defer it

1 reply

akomm Nov 19, 2024

From post it appears they need the headers from fetch response to pass down the loader. So if fetch resolves response before body is streamed, the headers are available directly and can be forwarded like in my example to defer. Response.json() will collect the body stream data and when "end" parse it as json. So returning the promise to defer would not block.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to forward defer's setCookie to the client response header in Remix #10218

{{title}}

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to forward defer's setCookie to the client response header in Remix #10218

19Qingfeng Nov 13, 2024

Replies: 2 comments · 3 replies

akomm Nov 18, 2024

akomm Nov 18, 2024

akomm Nov 18, 2024

sergiodxa Nov 18, 2024 Maintainer

akomm Nov 19, 2024

19Qingfeng
Nov 13, 2024

Replies: 2 comments 3 replies

akomm
Nov 18, 2024

sergiodxa
Nov 18, 2024
Maintainer