Passing Server-Side Values to Loader

[GWjun]

I am working with React and Fastify, and I need to know if there is a way to pass server-side values to the loader function.

Currently, in my setup, I am attempting to modify the context in the entry file, but when I log the loader parameters, the context object is empty. I suspect there might be another way to achieve this.

Here’s the relevant part of my code:

path: PATH.PROFILE,
element: <Profile />,
loader: async ({ request, params, context }) => {
  console.log(context) // {}
},

And here’s the code related to my rendering setup:

const { query, dataRoutes } = createStaticHandler(routes);

export const render = async (
  req: Request,
  options: RenderToPipeableStreamOptions & { i18n: i18n },
) => {
  const context = await query(req);

  if (context instanceof Response) {
    return context;
  }

  const router = createStaticRouter(dataRoutes, context);

  const stream = renderToPipeableStream(
    <I18nextProvider i18n={options.i18n}>
      <StaticRouterProvider router={router} context={context} />
    </I18nextProvider>,
    options,
  );

  return { stream };
}

Can anyone suggest an alternative method to pass the server-side context or values (such as the accessToken) to the loader function in this setup?

[sergiodxa]

The context received by loaders and actions is passed from the HTTP server (e.g. Express) to React Router using getLoadContext in the server adapter.

The entry.server is not the place to change it as the code there runs after loaders, not before.

That said, if you enable (unstable) middleware you can use middleware functions in routes to inject things into context.