How to access root loader data from page clientLoader?

[davidbielik]

// root.tsx
export function loader(){
   const settings = await getSettingsApi();
   return { settings };
}



// Profile.tsx
export function clientLoader({}: Route.ClientLoaderArgs){
   // can't access `useRouteLoaderData<typeof loader>('root')` since can't use a hook?
}

I've been trying workarounds to save root loader data in the window variable, but running into race conditions.

What's the recommended strategy here?

[sergiodxa]

A clientLoader can only access the server loader data from the same route, there's no way a loader get other loaders data, regardless if they are client or server loaders.

[davidbielik]

Thanks @sergiodxa - this is my current workaround. Is this the only/best approach?

// root.tsx

export const loader = async ({
  request,
  context,
}: LoaderFunctionArgs): Promise<InitialData> => {
  return await getAsyncData(request, context);
};

export const clientLoader: ClientLoaderFunction = async ({ serverLoader }) => {
  if (!window.rootData) {
    window.rootData = await serverLoader();
  }
  return window.rootData;
};
clientLoader.hydrate = true as const;

Then, I have a hook to get rootData from another page's clientLoader since useRouteLoaderData<typeof loader>('root') can't be used in a loader:

// Page.tsx

export const clientLoader = async ({}: Route.ClientLoaderArgs) => {
  if (window.rootData?.user?.isGuest) {
    return redirect('/login');
  }
  return null;
};

[sergiodxa]

That's not safe, the first time the user access your app both loaders will run at the same time, but your second loader depends on the root loader to run first, which may not be the case as they run in parallel

The best and safest way is to get the same in both route client/server loaders, then use a separate thing to cache/dedupe them

I built edgefirst-dev/batcher to solve this, it let you run the same function in multiple places but share the resulting promise

The code doesn't depend on any server specific thing so you could use it client-side too, using unstable_middleware feature you could use this client-side too and ensure there's only one copy per request (otherwise you will have to invalidate the data)

In Remix Utils there's a middleware to use that batcher, the package is called Remix Utils but it works with React Router v7

[davidbielik]

Thanks! is that still the case though, since I await serverLoader()?

I assumed this means it waits for server loader's data to run if it hasn't already.

[sergiodxa]

The problem is here

export const clientLoader = async ({}: Route.ClientLoaderArgs) => {
  if (window.rootData?.user?.isGuest) {
    return redirect('/login');
  }
  return null;
};

there's no guarantee that window.rootData will already be there by the time this clientLoader run if the user access this route directly, because at the same time this clientLoader is running, the root client loader is also running and awaiting for the server data.