Idiomatic way to use context API

[smblee]

I am having some trouble working with the Svelte's context store with sveltekit as I am constantly running into context API not being instantiated in SSR context and getting an error. I want to be able to consume my context with a simple syntax like

Datalist.svelte

	if (browser) {
		setDatalistContext();
	}

	let { items, focusedItem, setFocusedItem, itemClicking } = getDatalistContext();

where getDatalistContext would be an encapsulation of getContext

context.ts

export const getDatalistContext = () => {
	const context = getContext<DatalistContext>(DATALIST_CONTEXT_KEY);
	if (context !== undefined) return context;

	throw new Error('Forgot to set the Datalist context before accessing it');
};

But this of course doesn't work and will throw since getDatalistContext() will be called before setDatalistContext is called.

In order to get around this, we can instantiate context variable within the same browser block but then its not as ergonomic to do add context?. in front of all accessors.

(And this becomes even more difficult to manage if this context is used across related child components, which is what i do).

Would love to see what other folks have done to elegantly use the context API within Sveltekit!

[david-plugge]

But this of course doesn't work and will throw since getDatalistContext() will be called before setDatalistContext is called.

This should work on the client side.
Why do you wan´t to set the context only on the client and not during ssr?

[aakash14goplani]

@smblee - did you find solution for this?