Best practice for using svetch within load functions

[jessecoleman]

First off, thanks for the lib and your previous technical support. I am looking at how to more smoothly integrate the svetch singleton into kit load functions. The docs have this example:

import { Svetch } from "src/lib/api/client"; // or wherever you chose to generate the client

const svetch = new Svetch({
  baseUrl: "/api", // default is '/api'
  fetch, // pass the load function's fetch to it
});

export async function load({ fetch, session }) {
  const user = await svetch.get("user").then((response) => {
    if (response.error) throw new Error(response.error);
    return response.data;
  });
  return {
    props: {
      user,
    },
  };
}

But in this example, the fetch passed into load is different from the one passed to new Svetch(). Not sure if that's a typo or what. Anyway, I was wondering if the new Svetch object could be constructed inside the root layout.ts load and then reused across all API routes, or if there's a better pattern? Maybe it could go inside the handleFetch similarly to this issue?

[Bewinxed]

I'm happy that you're using it! Thank you :)

The one where you put a load function into it is for server-side, because if you fetch without passing it on backend, then relative urls + sveltekit optimizations won't apply.

The pattern I use is this (you can externalize this in a separate file for verbosity:

//+layout.svelte
import { Svetch } from 'svetch.ts'
const svetch = new Svetch(...)
setContext("svetch", svetch)

Then in child routes

import type { Svetch } from 'svetch.ts'
const svetch = getContext<Svetch>("svetch")

you can make this faster, in a separate file

import { hasContext, getContext, setContext } from "svelte";
import { Svetch } from "svetch.ts";

export function setSvetchContext(instance: Svetch, key: string = "svetch") {
	setContext(key, instance);
}

export function useSvetch(key: string = "svetch") {
	if (!hasContext(key)) {
		throw new Error("You have not used setSvetchContext in the parent context");
	}
	return getContext<Svetch>(key);
}

Note that when you make a response, there is the res.isOk() type guard which helps you get the data if the response is ok, and res.okOrThrow() which will directly return the typed data or throw.