[Feature]: Make Loader Data Global Data

What is the new or updated feature that you are suggesting?

Though I have not used much of Remix, from the documentation, I didn’t see a way to access router loader data globally, I don’t mean with the use of useFetcher

In react-query, every data is automatically global which you can access using the queryKey if this concept can be adopted in remix it will also be good, since most developers use react-query it will be a comfortable development context for the developers using react-query.

Considering the case: In my route I have 3 components that use different data for each, so there is a need to make the request in each of the component not only in the main route, if I update data in One Component I want another component in the same route refetch it’s data, use the returned response the update request or refetch its contents based on some conditions, I don’t want any other component to refetch it’s data.

Features I think that can be implemented to help with global server data are:

1. Each Loader can have an optional unique key(this can be the route since every route is unique and also the api route) that identifies the loader: export const loader = withKey('route-link', async (): LoaderFunction => {})
2. useFetcher can use this key to know which API route to fetch and return cache data if already fetch: useFetcher('route-link')
3. Cache Response can be configure when to cache and when on a global level or per route
4. useCacheData can be used to access cached data only: useCacheData(‘route-link’)
5. I don’t know if useFetcher can be used programmatically no only through d Form Component that it returns

Main Points:

1. Make Loader Global
2. And Also Maker useFetcher programmable

Why should this feature be included?

giving the developer ability to control the global data from one base point

[kiliman]

@divmgl I used to think the same as you. I even added a patch to Remix to include a X-Remix-Navigation-Id header to track the same logical request even if they are multiple parallel requests. But it really only works if you have a single server that is guaranteed to process all the requests. So at that point, it’s simpler to use a server-side cache that you manage.

Anyway, the initial request can still benefit from a shared context cache. My example adds a cache object to the getLoadContext context. Then in my loaders, I call a helper to get a value from cache (and pass a Promise). The first caller will initialize the promise, and subsequent callers (in the same request) will await on that promise.

export function getFromCache(
  cache: any,
  key: string,
  getter: () => Promise<any>,
) {
  let promise = cache[key]
  if (!promise) {
    promise = getter()
    cache[key] = promise
  }
  return promise
}

// from your loader
// since cache is the same on document request, only one call to getUser will be
// made. The other loaders will await the same promise
const user = await getFromCache(context.cache, 'user', () => getUser(123))

https://github.com/kiliman/remix-playground

[sergiodxa]

Passing a list of promises from other loaders wouldn’t be reliable.

The only time all the loaders are guaranteed to run all in the same server is on the initial document request, after that child loaders may be called without the parent loaders, or if they ask run together they could even will have different requests, in some platforms they may even have different physical hardware.

If your code expects other loaders to run to get data from there then in those cases it will break.

What you want is to batch your requests/queries, there’s an example showing how to do it using the dataloader package and the express adapter, this way on the initial document request to only query the same endpoint once and the rest keep working.

Also, I think the reason you want this is because you are thinking of loaders are RQ calls you do client side, when you should think of them as an API endpoint server side, if you had to build an API for your app using let’s say plain Express, and two or more endpoint needed to fetch or query the same data you would have to do it on each endpoint, there works be no way to share the request between endpoints without caching them somewhere.

Remix loaders and actions are the same, they are automatically generated API endpoints for your routes.