@jgchk/trpc-svelte-query

A tRPC wrapper around svelte-query.

Installation

# npm
npm install @jgchk/trpc-svelte-query @tanstack/svelte-query

# Yarn
yarn add @jgchk/trpc-svelte-query @tanstack/svelte-query

# pnpm
pnpm add @jgchk/trpc-svelte-query @tanstack/svelte-query

Basic Example

Set up tRPC in lib/trpc.ts

import { createTRPCSvelte } from '@trpc/svelte-query'
import type { AppRouter } from '../server/routers/_app'

export const { createClient, setContextClient, getContextClient } = createTRPCSvelte<AppRouter>()

Set up a tRPC client in routes/+layout.ts

import { browser, dev } from '$app/environment'
import { QueryClient } from '@tanstack/svelte-query'
import { httpBatchLink, loggerLink } from '@trpc/client'
import { createClient } from '$lib/trpc'
import type { LayoutLoad } from './$types'

export const load: LayoutLoad = async ({ fetch }) => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        enabled: browser,
      },
    },
  })

  const trpc = createClient({
    queryClient,
    fetch,
    links: [
      loggerLink({ enabled: () => dev }),
      httpBatchLink({
        url: '/api/trpc',
        fetch,
      }),
    ],
  })

  return { trpc }
}

Then provide the client to the rest of your app via context in routes/+layout.svelte

<script lang="ts">
  import { QueryClientProvider } from '@tanstack/svelte-query'
  import { setContextClient } from '$lib/trpc'
  import type { LayoutData } from './$types'

  export let data: LayoutData

  setContextClient(data.trpc)
</script>

<QueryClientProvider client={data.trpc.queryClient}>
  <slot />
</QueryClientProvider>

Now in any page or component, you can query your API using the client you created

<script lang="ts">
  import { getContextClient } from '$lib/trpc'

  const trpc = getContextClient()
  const query = trpc.greeting.query({ name: 'tRPC' });
</script>

{#if $query.isSuccess}
  <p>{$query.data.greeting}</p>
{:else if $query.isError}
  <p>{$query.error.message}</p>
{:else}
  <p>Loading...</p>
{/if}

SSR

You can prefetch queries on the server, which:

1. Renders their data during SSR
2. Prepopulates the client-side cache

In any +page.ts file, just call prefetchQuery

import type { PageLoad } from './$types'

export const load: PageLoad = async ({ parent }) => {
  const { trpc } = await parent()
  await trpc.ping.prefetchQuery()
}