tRPC-SvelteKit v4.0.2

Page data

Assuming you created a trpc() helper function as described in the getting started section, you can call tRPC procedures in your SvelteKit page load functions:

import { trpc } from '#lib/trpc/client.ts';
import type { PageLoad } from './$types';

// 👇 this method will be invoked on BOTH the server and the client, as needed ⚠️
export const load: PageLoad = async (event) => ({
  greeting: await trpc(event).greeting.query()
});

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

<script lang="ts">
  let { data } = $props();
</script>

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

A load function defined in a +page.ts file will run both on the server and in the browser. You should therefore consider using a +page.server.ts instead.

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