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:
routes/page-data/+page.ts
import { trpc } from '$lib/trpc/client';
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:
routes/page-data/+page.svelte
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
</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.js instead.
Have a look at this SvelteKit documentation section to learn the difference between shared vs. server data loading.