|
| 1 | +--- |
| 2 | +title: Tanstack Query Integration For Solid |
| 3 | +description: Seamlessly integrate oRPC with Tanstack Query for Solid |
| 4 | +--- |
| 5 | + |
| 6 | +# Tanstack Query Integration For Solid |
| 7 | + |
| 8 | +This guide shows how to integrate oRPC with Tanstack Query for Solid. 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/solid-query@latest @tanstack/solid-query@latest |
| 16 | +``` |
| 17 | + |
| 18 | +```sh [yarn] |
| 19 | +yarn add @orpc/solid-query@latest @tanstack/solid-query@latest |
| 20 | +``` |
| 21 | + |
| 22 | +```sh [pnpm] |
| 23 | +pnpm add @orpc/solid-query@latest @tanstack/solid-query@latest |
| 24 | +``` |
| 25 | + |
| 26 | +```sh [bun] |
| 27 | +bun add @orpc/solid-query@latest @tanstack/solid-query@latest |
| 28 | +``` |
| 29 | + |
| 30 | +```sh [deno] |
| 31 | +deno install npm:@orpc/solid-query@latest npm:@tanstack/solid-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 { createORPCSolidQueryUtils } from '@orpc/solid-query' |
| 46 | + |
| 47 | +export const orpc = createORPCSolidQueryUtils(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 = createORPCSolidQueryUtils(userClient, { |
| 61 | + path: ['user'] |
| 62 | +}) |
| 63 | +const postORPC = createORPCSolidQueryUtils(postClient, { |
| 64 | + path: ['post'] |
| 65 | +}) |
| 66 | +``` |
| 67 | + |
| 68 | +## Usage |
| 69 | + |
| 70 | +:::warning |
| 71 | +Unlike the React version, when creating a Solid Query Signal, the first argument must be a callback. |
| 72 | +::: |
| 73 | + |
| 74 | +```ts twoslash |
| 75 | +import type { router } from './shared/planet' |
| 76 | +import type { RouterClient } from '@orpc/server' |
| 77 | +import type { RouterUtils } from '@orpc/solid-query' |
| 78 | +declare const orpc: RouterUtils<RouterClient<typeof router>> |
| 79 | +declare const condition: boolean |
| 80 | +// ---cut--- |
| 81 | +import { createQuery } from '@tanstack/solid-query' |
| 82 | + |
| 83 | +const query = createQuery( |
| 84 | + () => orpc.planet.find.queryOptions({ input: { id: 123 } }) |
| 85 | +) |
| 86 | +``` |
0 commit comments