How do you share state between load functions

[AndreasHald]

Hi, I'm using a graphql client in svelte kit particularly I'm using Apollo-client but I believe the issue applies to all other clients swell.

The concept of the graphql-client is that all graphql requests goes through it and I can do a lot of caching and state management.

The general idea is as follows

/* routes/+layout.ts */

export const load: LayoutLoad = async (page) => {
    const graphqlClient = buildClient(page.fetch)

   return {
      graphqlClient
   }
});

<!-- routes/+layout.svelte-->

<script lang="ts">
   export let data;
   setContext('client', data.graphqlClient);
</script>

<slot />

And now all subsequent components can access the graphql client on the context and use it to query data.

The problem is that if I wish to use it in a subsequent load function I have to await parent data potentially causing waterfalls

/* routes/foo/bar/+page.ts */

export const load: LayoutLoad = async (page) => {
   const { client } = await page.parent();

   const someData = await client.query(...);
   return {
      someData
   }
});

Does anyone have a good idea on how to avoid this? while preserving the fact that I can use a single client for all graphql requests?

[david-plugge]

There isn't a clean way to achieve this at the moment. I tried to convince the team multiple times that we absolutely need this functionality.
Like a handleHook for shared load functions

[stephane-vanraes]

You can use the handle hook to put your client on locals.

// hooks.server.js
export const handle = async ({ event, resolve }) => {
  event.client = buildGraphQlClient();
  return await resolve(event);
}

// /any_other_page/+page.server.js
export const load = async ({ locals }) => {
   const data = await locals.client.get('stuff_stuff');
}

[david-plugge]

And how do you provide event.fetch initially when creating the client without doing it in every load function? That's what we are interested in.

[stephane-vanraes]

In your handle hook you pass event.fetch to the builder

// hooks.server.js
export const handle = async ({ event, resolve }) => {
  event.client = buildGraphQlClient(event.fetch);
  return await resolve(event);
}

in the browser branch of the load function (and anywhere else you are on the client) you use the client and have that one use the native fetch

import { browser } from '$app/environment';
const client = browser ? buildGraphQlClient(fetch) : () => void 0;
export default client;

since this file will only run only on the client you can simply use the global fetch here (not sure the browser check is required, but it probably doesn't harm)

[david-plugge]

I want the client to use event.fetch in shared load functions aswell. The handle hook only runs on the server. In the example you gave the graphql client inside

• handle hook and server load functions would use event.fetch
• shared load functions would always use the global fetch (no difference in not specifiying fetch and doing so, it takes the fetch from window or globalThis on both cases)

As you can see, there is just no way to do this without calling await parent() and therefore introducing a waterfall.

[david-plugge]

and setting the client to () => void 0 would just end up in an error on the server?

[AndreasHald]

Thanks for chiming in @stephane-vanraes :)

It's an interesting approach, but I don't think it could work. the goal is to be able to use the graphql client in +page.js files, and they do not have access to locals - so I would need to move all the logic into +page.server.js files, however that defeats the purpose of graphql, since I would send requests to each route specifically instead of a singular graphql endpoint.

[stephane-vanraes]

Starting a new thread because the other one went a bit astray.
So, a main issue is that you want a "shared client" that you can also pass the event.fetch too.

Let's say we make a file

// lib/graphql/client.js
let client;

export default function getClient(fetch) {
  if (client) return client;
  client = buildClient(fetch);
  return client;
}

Now using this function in a load will always return the same instance once it has been called for the first time.
In the cases where load function is executed server-side (first render) it will use the sveltekit fetch instead of the regular fetch and it will still work without any change.

Obviously there is no way to share the graphQlClient between client/server, those will be two different instances.

[AndreasHald]

@david-plugge is this solution scoped per request on the server? event.params is not shared between any separate requests?

[david-plugge]

Yes. The params object is created on every request and the exact same reference is passed to each load function.
I didn't really use it and this behavior may have changed, but it's easy to test. I can provide an example when I'm at my pc.

[david-plugge]

@AndreasHald this works pretty good

import type { LoadEvent } from '@sveltejs/kit';

// use this as a factory to create "states"
export function createSharedState<T>(factory: (event: LoadEvent) => T): (event: LoadEvent) => T {
	const symbol = Symbol();
	return (event) => ((event.params as any)[symbol] ??= factory(event));
}

// create a "state"
export const getSharedRandom = createSharedState((event) => Math.random());


// inside shared load functions:
import { getSharedRandom } from '$lib';

export const load = (event) => {
	const random = getSharedRandom(event);

	return {
		randomInLayout: random
	};
};

the downside is obviously that you always need to pass params which is very unintuitive. Therefore i´d rather go with the full event like in my example above. A downside of this is that you can´t directly use destructuring in your load functions.

[AndreasHald]

Ive seen worse hacks, im gonna try it out when i get a minute, and see if it solves all my problems.

@stephane-vanraes do you or anyone from the svelte team know if this is safe to implement?

[stephane-vanraes]

@AndreasHald it sounds a bit hacky and feels similar to your own proposal of keeping track of all request that is at risk of causing a memory leak server side, but you could run some tests to see it it works.

[david-plugge]

I worked out a solution for universal load functions: https://gist.github.com/david-plugge/33cd821a4c829059f67ce18468b8dfca.
The same would work for server load functions aswell. Its definately a hack but still better than a waterfall. This should be built into sveltekit.