Set value of a state using context api in hooks.client.ts

[IslamZaoui]

Hello, I want to set a global instance of pocketbase for user in hooks.client.ts

import type { PBInstance } from '@/pocketbase'
import { getContext, setContext } from 'svelte'

const key = Symbol('pocketbase')

export const setPocketbase = (pb: PBInstance) => setContext(key, pb)
export const getPocketbase = () => getContext<PBInstance>(key)

import { setPocketbase } from '@/context/pocketbase'
import { createInstance } from '@/pocketbase'

const pb = createInstance()

pb.authStore.loadFromCookie(document.cookie)
pb.authStore.onChange(() => {
	document.cookie = pb.authStore.exportToCookie({ httpOnly: false })
}, true)

setPocketbase(pb)

this way the instance will always be up-to-date for the user across the app but I got this error

Uncaught (in promise) Svelte error: lifecycle_outside_component
`setContext(...)` can only be used during component initialisation
https://svelte.dev/e/lifecycle_outside_component

is there any work around or alternative way to do this?

[IslamZaoui]

I think making a component is the best way for it

<script lang="ts">
	import { setPocketbase } from '@/context/pocketbase'
	import { createInstance } from '@/pocketbase'

	let { children } = $props()

	$effect.pre(() => {
		const pb = createInstance()

		pb.authStore.loadFromCookie(document.cookie)
		pb.authStore.onChange(() => {
			document.cookie = pb.authStore.exportToCookie({ httpOnly: false })
		}, true)

		setPocketbase(pb)
	})
</script>

{@render children()}

[brunnerh]

Code like this belongs in the root layout (or in a file called from said layout).