Tanstack Query Integration For Svelte

This guide shows how to integrate oRPC with Tanstack Query for Svelte. For an introduction, please review the Basic Guide first.

Installation

npm

npm install @orpc/svelte-query@latest @tanstack/svelte-query@latest

yarn

yarn add @orpc/svelte-query@latest @tanstack/svelte-query@latest

pnpm

pnpm add @orpc/svelte-query@latest @tanstack/svelte-query@latest

bun

bun add @orpc/svelte-query@latest @tanstack/svelte-query@latest

deno

deno install npm:@orpc/svelte-query@latest npm:@tanstack/svelte-query@latest

Setup

Before you begin, ensure you have already configured a server-side client or a client-side client.

import { createORPCSvelteQueryUtils } from '@orpc/svelte-query'

export const orpc = createORPCSvelteQueryUtils(client)

orpc.planet.find.
queryOptions({ input: { id: 123 } })

//

Avoiding Query/Mutation Key Conflicts

Prevent key conflicts by passing a unique base key when creating your utils:

const userORPC = createORPCSvelteQueryUtils(userClient, {
  path: ['user']
})
const postORPC = createORPCSvelteQueryUtils(postClient, {
  path: ['post']
})

Reactivity

To create reactive queries, use Svelte's legacy derived API from svelte/store. With the Tanstack Svelte v5 branch, oRPC should work out of the box.

import { createQuery } from '@tanstack/svelte-query'
import { derived, writable } from 'svelte/store'

const id = writable(123)

const query = createQuery(
  derived(id, $id => orpc.planet.find.queryOptions({ input: { id: $id } })),
)