pyRPC
← Back to Blog

The Svelte adapter: framework-native, zero ceremony

·8 min read

Svelte has its own query library (@tanstack/svelte-query) with a different API shape than React's. The @pyrpc/svelte adapter respects that difference while keeping the same transport and kind system.

Setup

import { createSvelteClient } from "@pyrpc/svelte"
import type { Types } from "@pyrpc/types"
import { procedureKinds } from "@pyrpc/types"

const api = createSvelteClient<Types>({
  baseUrl: "http://localhost:8000",
  kinds: procedureKinds,
})

Provider setup

Svelte Query uses a setContext-based provider. The adapter wraps this in a setup.ts file:

// src/lib/pyrpc/setup.ts
import { QueryClient } from "@tanstack/svelte-query"
import { api } from "./pyrpc"

export const queryClient = new QueryClient()

Wrap the app root with Svelte Query's provider. No custom provider component needed.

Using procedures

Svelte Query exposes createQuery and createMutation as functions, not hooks:

<script>
import { api } from "$lib/pyrpc/setup"
import { createQuery } from "@tanstack/svelte-query"

const userQuery = createQuery(
  api.get_user.queryOptions({ userId: 1 })
)
</script>

{#if $userQuery.isLoading}
  <p>Loading...</p>
{:else}
  <p>{$userQuery.data.name}</p>
{/if}

For mutations, createMutation works the same way. The adapter's Proxy ensures you only get the right function for each procedure kind.

Why Svelte is different from React/Vue

React re-renders on state change. Vue uses reactivity proxies. Svelte compiles to imperative DOM updates. TanStack Svelte Query bridges this with stores ($query prefix). The adapter respects this — no React hooks, no Vue composition, just Svelte stores.

The invariant holds

Same createClient underneath. Same procedureKinds. Same query keys. Just Svelte-native integration.

Svelte docs · Vue and Svelte adapters