Skip to main content

Svelte Query Integration

tRPC + svelte-query is a wrapper around @tanstack/svelte-query, so we recommend that you familiarize yourself with Svelte Query, as their docs go in much greater depth on its usage.

tip

If you are using SvelteKit, try using the custom integration.

The tRPC Svelte Query Integration​

This library enables usage directly within Svelte components

src/routes/+page.svelte
<script lang="ts">
  import { trpc } from '$lib/trpc';

  const helloQuery = trpc.hello.createQuery({ name: 'Bob' })
  const goodbyeMutation = trpc.goodbye.createMutation();

  function handleClick() {
    $goodbyteMutation.mutate()
  }
</script>

<div>
  <p>{$helloQuery.data?.greeting}</p>
  <button on:click={handleClick}>Say Goodbye</button>
</div>

Differences to vanilla Svelte Query​

The wrapper abstracts some aspects of Svelte Query for you:

  • Query Keys - these are generated and managed by tRPC on your behalf, based on the procedure inputs you provide
    • If you need the query key which tRPC calculates, you can use getQueryKey
  • Type safe by default - the types you provide in your tRPC Backend also drive the types of your Svelte Query client, providing safety throughout your Svelte app