tRPC-SvelteKit v3.6.2

End-to-end typesafe APIs for your SvelteKit applications

Page server data

If you want to call tRPC procedures in your SvelteKit page server load functions, you should bypass HTTP and invoke the methods directly on the tRPC caller:

routes/page-server-data/+page.server.ts
import { createContext } from '$lib/trpc/context';
import { createCaller } from '$lib/trpc/router';
import type { PageServerLoad } from './$types';

// 👇 since this is only called on the server, we can bypass HTTP 💡
export const load: PageServerLoad = async (event) => ({
  greeting: await createCaller(await createContext(event)).greeting()
});

You can then use the loaded data in your pages like so:

routes/page-server-data/+page.svelte
<script lang="ts">
  import type { PageServerData } from './$types';

  export let data: PageServerData;
</script>

<h6>Data loaded in<br /><code>+page.ts</code></h6>
<p>{data.greeting}</p>

Have a look at this SvelteKit documentation section to learn the difference between shared vs. server data loading.