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.