Access __remixContext within entry.client.tsx when Single Fetch is turned on

[tschmidt01]

We are currently in the process of enabling unstable_singleFetch in our application and we have a use case where we need to access some loader data which is loaded in the root loader. Until now we could do that like described here, but when enabling unstable_singleFetch the loaderData is not present anymore.

Is there any way to still be able to access the loaderData from within entry.client.tsx while having unstable_singleFetch turned on?

[sergiodxa]

You can render an inline script with the data and then read it from the entry.client.

[tschmidt01]

this would work for the simple example provided in your blog, but the value I need is the response of a fetch

[sergiodxa]

If the response is serializable then you can render it in a script.

// app/root.tsx
export async function loader() {
  let response = await fetch(url)
  let data = validate(await response.json())
  return json({ data })
}

export default function Component() {
  let { data } = useLoaderData<typeof loader>();
  return (
    <>
      <Outlet />
      <script id="entry-data" type="application/json" dangerouslySetInnerHtml={{ __html: data }} />
    </>
  )
}

// app/entry.client.tsx
// imports here

let data = JSON.parse(document.getDocumentById("entry-data").innerText ?? "{}")
// use data

// hydrate the app