|
| 1 | +--- |
| 2 | +title: Tanstack Query Integration For Svelte |
| 3 | +description: Seamlessly integrate oRPC with Tanstack Query for Svelte |
| 4 | +--- |
| 5 | + |
| 6 | +# Tanstack Query Integration For Svelte |
| 7 | + |
| 8 | +This guide shows how to integrate oRPC with Tanstack Query for Svelte. For an introduction, please review the [Basic Guide](/docs/tanstack-query/basic) first. |
| 9 | + |
| 10 | +## Installation |
| 11 | + |
| 12 | +::: code-group |
| 13 | + |
| 14 | +```sh [npm] |
| 15 | +npm install @orpc/svelte-query@latest @tanstack/svelte-query@latest |
| 16 | +``` |
| 17 | + |
| 18 | +```sh [yarn] |
| 19 | +yarn add @orpc/svelte-query@latest @tanstack/svelte-query@latest |
| 20 | +``` |
| 21 | + |
| 22 | +```sh [pnpm] |
| 23 | +pnpm add @orpc/svelte-query@latest @tanstack/svelte-query@latest |
| 24 | +``` |
| 25 | + |
| 26 | +```sh [bun] |
| 27 | +bun add @orpc/svelte-query@latest @tanstack/svelte-query@latest |
| 28 | +``` |
| 29 | + |
| 30 | +```sh [deno] |
| 31 | +deno install npm:@orpc/svelte-query@latest npm:@tanstack/svelte-query@latest |
| 32 | +``` |
| 33 | + |
| 34 | +::: |
| 35 | + |
| 36 | +## Setup |
| 37 | + |
| 38 | +Before you begin, ensure you have already configured a [server-side client](/docs/client/server-side) or a [client-side client](/docs/client/client-side). |
| 39 | + |
| 40 | +```ts twoslash |
| 41 | +import { router } from './shared/planet' |
| 42 | +import { RouterClient } from '@orpc/server' |
| 43 | +declare const client: RouterClient<typeof router> |
| 44 | +// ---cut--- |
| 45 | +import { createORPCSvelteQueryUtils } from '@orpc/svelte-query' |
| 46 | + |
| 47 | +export const orpc = createORPCSvelteQueryUtils(client) |
| 48 | + |
| 49 | +orpc.planet.find.queryOptions({ input: { id: 123 } }) |
| 50 | +// ^| |
| 51 | + |
| 52 | +// |
| 53 | +``` |
| 54 | + |
| 55 | +## Avoiding Query/Mutation Key Conflicts |
| 56 | + |
| 57 | +Prevent key conflicts by passing a unique base key when creating your utils: |
| 58 | + |
| 59 | +```ts |
| 60 | +const userORPC = createORPCSvelteQueryUtils(userClient, { |
| 61 | + path: ['user'] |
| 62 | +}) |
| 63 | +const postORPC = createORPCSvelteQueryUtils(postClient, { |
| 64 | + path: ['post'] |
| 65 | +}) |
| 66 | +``` |
| 67 | + |
| 68 | +## Reactivity |
| 69 | + |
| 70 | +To create reactive queries, use Svelte's legacy `derived` API from `svelte/store`. With the [Tanstack Svelte v5 branch](https://github.com/TanStack/query/discussions/7413), oRPC should work out of the box. |
| 71 | + |
| 72 | +```ts twoslash |
| 73 | +import type { router } from './shared/planet' |
| 74 | +import type { RouterClient } from '@orpc/server' |
| 75 | +import type { RouterUtils } from '@orpc/svelte-query' |
| 76 | +declare const orpc: RouterUtils<RouterClient<typeof router>> |
| 77 | +declare const condition: boolean |
| 78 | +// ---cut--- |
| 79 | +import { createQuery } from '@tanstack/svelte-query' |
| 80 | +import { derived, writable } from 'svelte/store' |
| 81 | + |
| 82 | +const id = writable(123) |
| 83 | + |
| 84 | +const query = createQuery( |
| 85 | + derived(id, $id => orpc.planet.find.queryOptions({ input: { id: $id } })), |
| 86 | +) |
| 87 | +``` |
0 commit comments