Use shared per-request value in all load() functions concurrently

[rcabralc]

Hi,

I'm migrating an app from a Sapper codebase that uses Apollo, a GraphQL client.

Most of my GraphQL queries were being fetched in preload() using credentialed fetch(), for nice SSR. Apollo has some nice features like caching and batching requests, but these features could only be used if a client was shared between all preload() functions of a route that needed to do some GraphQL¹.

In order to keep track of per-request Apollo client instances and be able to share them across preload() functions, I was relying on the session parameter, through a unique id string assigned to it in a middleware².

The problem is that this parameter doesn't exist anymore.

Instantiating an Apollo client in each load() function will prevent using the batching requests feature entirely. I don't mind the caching feature in the server-side since there's too little to gain from it there, but I still want these features to be available in the client-side.

I tried to generate an id for each request in src/hooks.server.js and root +layout.server.js and forward it to the +layout.js's load() through the data parameter, but this parameter is not passed down to further load() functions in the route.

+layout.js's load() function could return the Apollo instance id, or even an Apollo instance directly³, but then the other load() functions would need to await parent() first in order to get the id or the instance, which would prevent them from running concurrently and using the batching requests feature.

Is there a way to share data created on the server between load() functions without using await parent()?

Footnotes

1. A single global client could never be used because its cache would be shared between requests. And it seems it's not possible to use a client without a cache, so a client pretty much needs to be scoped per-request. ↩

2. An id was used because the session data needed to be serializable. Apollo client instances were then assigned to a module-scoped object using this id. In the end of each request, the client corresponding to the id in the session was deleted to avoid memory leaks. ↩

3. The returned value doesn't need to be serializable anymore. ↩

[denovodavid]

I'm working with Svelte Query trying to do a similar thing. PageLoad prefetches data through a QueryClient, but to avoid caching issues with multiple concurrent requests during SSR, QueryClient should be unique per-request. It's easy to generate a request ID in hooks.server.ts and put it into App.Locals, but that's not accessible in universal +page.ts load function.

To avoid having to await parent(), I have created a +page.server.ts next to each +page.ts which just returns locals.requestId which is accessible in data on +page.ts.

While this does appear to "work", it's awful DX, with lots of boilerplate ...server.ts files forwarding a single value. It would be very convenient to have App.Locals available in PageLoad, obviously it can just be undefined during client load (I know this reduces the universality of PageLoad but I simply need to tweak some values on the server). Or, have a built-in requestId that's only defined during PageLoad on the server, so we can manage per-request objects easier.