Note

The README onnpmjs might not be fully up to date. Please refer totheREADME on the Github Repo for the latest setup instructions.

Installation

# npmnpm install trpc-svelte-query-adapter @trpc/client @trpc/server @tanstack/svelte-query# yarnyarn add trpc-svelte-query-adapter @trpc/client @trpc/server @tanstack/svelte-query# pnpmpnpm add trpc-svelte-query-adapter @trpc/client @trpc/server @tanstack/svelte-query

Available Functions

Usage

exportconstrouter=t.router({greeting:t.procedure.input((name:unknown)=>{if(typeofname==='string')returnname;thrownewError(`Invalid input:${typeofname}`);}).query(async({ input})=>{return`Hello,${input} from tRPC v10 @${newDate().toLocaleTimeString()}`;}),});exporttypeRouter=typeofrouter;

Client-Only Svelte

// src/lib/trpc.tsimporttype{Router}from'/path/to/trpc/router';import{createTRPCProxyClient,httpBatchLink}from'@trpc/client';import{svelteQueryWrapper}from'trpc-svelte-query-adapter';constclient=createTRPCProxyClient<Router>({links:[httpBatchLink({// Replace this URL with that of your tRPC serverurl:'http://localhost:5000/api/v1/trpc/',}),],});exportconsttrpc=svelteQueryWrapper<Router>({ client});

<scriptlang="ts">import {trpc }from"/path/to/lib/trpc";const foo=trpc.greeting.createQuery('foo', { retry:false });</script>{#if$foo.isPending}  Loading...{:elseif$foo.isError}  Error: {$foo.error.message}{:elseif$foo.data}  {$foo.data.message}{/if}

SvelteKit and SSR

importtype{QueryClient}from'@tanstack/svelte-query';constclient=createTRPCProxyClient<Router>({links:[httpBatchLink({// Replace this URL with that of your tRPC serverurl:'http://localhost:5000/api/v1/trpc/',}),],});exportfunctiontrpc(queryClient?:QueryClient){returnsvelteQueryWrapper<Router>({    client,    queryClient,});}

<!-- routes/+page.svelte --><scriptlang="ts">import {trpc }from"$lib/trpc/client";const client=trpc();const foo=client.greeting.createQuery("foo", { retry:false });</script><p>  {#if$foo.isPending}    Loading...  {:elseif$foo.isError}    Error: {$foo.error.message}  {:else}    {$foo.data}  {/if}</p>

letbrowserClient:ReturnType<typeofcreateTRPCClient<Router>>;exportfunctiontrpc(init?:TRPCClientInit){constisBrowser=typeofwindow!=='undefined';if(isBrowser&&browserClient)returnbrowserClient;constclient=createTRPCClient<Router>({ init});if(isBrowser)browserClient=client;returnclient;}

import{svelteQueryWrapper}from'trpc-svelte-query-adapter';importtype{QueryClient}from'@tanstack/svelte-query';letbrowserClient:ReturnType<typeofsvelteQueryWrapper<Router>>;exportfunctiontrpc(init?:TRPCClientInit,queryClient?:QueryClient){constisBrowser=typeofwindow!=='undefined';if(isBrowser&&browserClient)returnbrowserClient;constclient=svelteQueryWrapper<Router>({client:createTRPCClient<Router>({ init}),    queryClient,});if(isBrowser)browserClient=client;returnclient;}

Server-Side Query Pre-Fetching

Note

Gotta await top-level promises to pre-fetch data from SvelteKit v2.

// +page.ts// tRPC is setup using `trpc-sveltekit` for this example.import{trpc}from'$lib/trpc/client';importtype{PageLoad}from'./$types';exportconstload=(async(event)=>{const{ queryClient}=awaitevent.parent();constclient=trpc(event,queryClient);return{foo:awaitclient.greeting.createServerQuery('foo'),queries:awaitclient.createServerQueries((t)=>['bar','baz'].map((name)=>t.greeting(name,{ssr:name!=='baz'}))// pre-fetching disabled for the `baz` query.),};})satisfiesPageLoad;

<!-- +page.svelte --><scriptlang="ts">import {page }from"$app/stores";importtype {PageData }from"./$types";exportlet data:PageData;const foo=data.foo();const queries=data.queries();</script>{#if$foo.isPending}  Loading...{:elseif$foo.isError}  {$foo.error}{:elseif$foo.data}  {$foo.data}{/if}<br /><br />{#each$queriesasquery}  {#ifquery.isPending}    Loading...  {:elseifquery.isError}    {query.error.message}  {:elseifquery.data}    {query.data}  {/if}  <br />{/each}

<scriptlang="ts">import {page }from"$app/stores";importtype {PageData }from"./$types";import {derived,writable }from'@svelte/store';exportlet data:PageData;const name=writable('foo');const newNames=writable<string[]>([]);const foo=data.foo($name);// You can also access the default input if you pass in a callback as the new input:// const foo = data.foo((old) => derived(name, ($name) => old + name));const queries=data.queries((t,old)=>derived(newNames, ($newNames)=> [...old,...$newNames.map((name)=>t.greeting(name))]));</script><div>  {#if$foo.isPending}    Loading...  {:elseif$foo.isError}    {$foo.error}    {:elseif$foo.data}    {$foo.data}  {/if}  <inputbind:value={$name} /></div><br /><div>  {#each$queriesasquery}    {#ifquery.isPending}      Loading...    {:elseifquery.isError}      {query.error.message}      {:elseifquery.data}      {query.data}    {/if}    <br />  {/each}  <formon:submit|preventDefault={(e)=> {const data=newFormData(e.currentTarget).get('name');if (typeofdata==='string')$newNames.push(data);$newNames=$newNames;  }}>    <inputname="name" />    <buttontype="submit">Submit</button>  </form></div>