Data loaded in
+page.ts
8 | {data.greeting}
9 | -------------------------------------------------------------------------------- /docs/src/app.scss: -------------------------------------------------------------------------------- 1 | $enable-responsive-typography: false; 2 | @import '@picocss/pico/scss/pico'; 3 | 4 | h2 { 5 | font-size: 2rem; 6 | } 7 | 8 | @media (min-width: 768px) { 9 | h2 { 10 | font-weight: normal; 11 | font-size: 3rem; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/simple/src/routes/page-server-data/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |Data loaded in
+page.ts
8 | {data.greeting}
9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte"], 7 | "pluginSearchDirs": ["."], 8 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 9 | } 10 | -------------------------------------------------------------------------------- /examples/bookstall/src/lib/trpc/middleware/auth.ts: -------------------------------------------------------------------------------- 1 | import { t } from '$lib/trpc/t'; 2 | import { TRPCError } from '@trpc/server'; 3 | 4 | export const auth = t.middleware(async ({ next, ctx }) => { 5 | if (!ctx.userId) throw new TRPCError({ code: 'UNAUTHORIZED' }); 6 | return next(); 7 | }); 8 | -------------------------------------------------------------------------------- /examples/bookstall/src/lib/components/inputs/LabelAsterisk.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if required} 6 | * 7 | {/if} 8 | 9 | 15 | -------------------------------------------------------------------------------- /docs/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | // and what to do when importing types 4 | declare namespace App { 5 | // interface Locals {} 6 | // interface PageData {} 7 | // interface Error {} 8 | // interface Platform {} 9 | } 10 | -------------------------------------------------------------------------------- /docs/static/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 |%sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/simple/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | %sveltekit.head%
8 |
9 |
10 | %sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/websocket/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | %sveltekit.head%
8 |
9 |
10 | %sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/websocket/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Using with Svelte-Query
2 | 3 |
4 | If you want to use tRPC-SvelteKit with
5 | Svelte Query,
6 | check out the
7 | tRPC Svelte Query Adapter
12 | by @ vishalbalaji.
13 |
9 |
14 |
15 |
21 |
--------------------------------------------------------------------------------
/examples/bookstall/src/lib/trpc/client.ts:
--------------------------------------------------------------------------------
1 | import type { Router } from '$lib/trpc/router';
2 | import { createTRPCClient, type TRPCClientInit } from 'trpc-sveltekit';
3 | import transformer from 'trpc-transformer';
4 |
5 | let browserClient: ReturnTypeAcknowledgements
6 | 7 |8 | Huge thanks to Alex / KATT 9 | for being the first sponsor of this project 🎉, for his outstanding work at 10 | tRPC.io and for his encouragement. 11 |
12 | 13 |
14 | Thank you for your support,
15 |
16 | Ionut-Cristian Florescu
17 |
Loading data in
+page.svelte
16 |
17 | Load
24 | {greeting}
25 | -------------------------------------------------------------------------------- /examples/bookstall/src/lib/trpc/router.ts: -------------------------------------------------------------------------------- 1 | import { authors } from '$lib/trpc/routes/authors'; 2 | import { books } from '$lib/trpc/routes/books'; 3 | import { stores } from '$lib/trpc/routes/stores'; 4 | import { t } from '$lib/trpc/t'; 5 | import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server'; 6 | 7 | export const router = t.router({ 8 | authors, 9 | books, 10 | stores 11 | }); 12 | 13 | export const createCaller = t.createCallerFactory(router); 14 | 15 | export type Router = typeof router; 16 | 17 | // 👇 type helpers 💡 18 | export type RouterInputs = inferRouterInputs
6 |
9 |
10 |
30 |
--------------------------------------------------------------------------------
/package/src/ValidRoute.ts:
--------------------------------------------------------------------------------
1 | type HasTrailingSlash@sveltejs/adapter-{name}
8 | Experimental WebSocket support
2 | 3 |
4 | SvelteKit doesn't (yet) offer WebSockets support, but if you're using @sveltejs/adapter-node, tRPC-SvelteKit can spin up
7 | an experimental WS server to process tRPC procedure calls.
8 |
11 | Please refer to the dedicated section in the README for more information. 16 |
17 | -------------------------------------------------------------------------------- /package/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], 5 | plugins: ['svelte3', '@typescript-eslint'], 6 | ignorePatterns: ['*.cjs'], 7 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], 8 | settings: { 9 | 'svelte3/typescript': () => require('typescript') 10 | }, 11 | parserOptions: { 12 | sourceType: 'module', 13 | ecmaVersion: 2020 14 | }, 15 | env: { 16 | browser: true, 17 | es2017: true, 18 | node: true 19 | }, 20 | rules: { 21 | '@typescript-eslint/no-explicit-any': 'off' 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /docs/src/lib/components/Info.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
13 |
14 |
33 |
--------------------------------------------------------------------------------
/docs/src/lib/components/home/Mantra.svelte:
--------------------------------------------------------------------------------
1 |
7 |
9 |
10 |
2 | Move fast and break nothing.
3 |
4 | End-to-end typesafe APIs for your
5 |
6 | SvelteKit applications.
7 |
8 |
9 |
31 |
--------------------------------------------------------------------------------
/package/src/websocket/client.ts:
--------------------------------------------------------------------------------
1 | import {
2 | CreateTRPCClientOptions,
3 | createTRPCProxyClient,
4 | createWSClient,
5 | wsLink
6 | } from '@trpc/client';
7 | import { AnyRouter } from '@trpc/server';
8 |
9 | export function createTRPCWebSocketClient
12 | {#each options as { value, label } (value)}
13 |
17 | {/each}
18 |
19 |
20 |
30 |
--------------------------------------------------------------------------------
/docs/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | %sveltekit.head%
14 |
15 |
16 | %sveltekit.body%
17 |
18 |
19 |
--------------------------------------------------------------------------------
/examples/websocket/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 | WebSocket example
15 |16 | Open {$page.url}messages in a new window/tab. 17 |
18 | 19 | 23 | 24 | 33 | -------------------------------------------------------------------------------- /examples/bookstall/src/lib/components/Footer.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 29 | -------------------------------------------------------------------------------- /examples/bookstall/src/lib/components/AuthorizationAlert.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "trpc-sveltekit-monorepo", 3 | "version": "0.0.0", 4 | "description": "SvelteKit adapter for trpc.io", 5 | "author": { 6 | "name": "Ionut-Cristian Florescu", 7 | "email": "ionut.florescu@gmail.com", 8 | "url": "https://github.com/icflorescu" 9 | }, 10 | "license": "ISC", 11 | "private": true, 12 | "type": "module", 13 | "workspaces": [ 14 | "package", 15 | "docs", 16 | "examples/*" 17 | ], 18 | "scripts": { 19 | "dev": "turbo dev", 20 | "build": "turbo build", 21 | "start": "turbo preview", 22 | "lint": "turbo lint", 23 | "format": "turbo format" 24 | }, 25 | "devDependencies": { 26 | "@typescript-eslint/eslint-plugin": "^7.13.0", 27 | "@typescript-eslint/parser": "^7.13.0", 28 | "eslint": "^8.57.0", 29 | "eslint-config-prettier": "^9.1.0", 30 | "eslint-plugin-svelte3": "^4.0.0", 31 | "prettier": "^3.3.2", 32 | "prettier-plugin-svelte": "^3.2.4", 33 | "turbo": "^1.12.4" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /docs/misc/suggested-structure.txt: -------------------------------------------------------------------------------- 1 | -------------- 2 | | lib/trpc | 👈 place your tRPC-related stuff here 3 | -------------- 4 | | 5 | |-- context.ts 👈 router context 6 | |-- t.ts 👈 tRPC definition helper (see below) 7 | |-- router.ts 👈 main router definition (imports files defined in routes folder) 8 | |-- middleware.ts 👈 tRPC middleware (this could be split into multiple files if necessary) 9 | |-- client.ts 👈 define a client helper function here 10 | | 11 | | ------------ 12 | |--| routes | 👈 split your routes into multiple files and place them here 13 | | ------------ 14 | | | 15 | | |-- route-1.ts 16 | | |-- route-2.ts 17 | | |-- route-3.ts 18 | | | ... 19 | | |-- route-n.ts 20 | | 21 | | ---------------- 22 | |--| middleware | 👈 split your middleware into multiple files and place them here 23 | ---------------- 24 | | 25 | |-- middleware-1.ts 26 | | ... 27 | |-- middleware-n.ts 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: icflorescu 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /docs/src/routes/sitemap.xml/+server.ts: -------------------------------------------------------------------------------- 1 | import { GITHUB_PAGES_ROOT, PAGES } from '$lib/constants'; 2 | import type { RequestHandler } from './$types'; 3 | 4 | export const prerender = true; 5 | 6 | export const GET: RequestHandler = () => { 7 | const date = new Date().toISOString(); 8 | return new Response( 9 | [ 10 | '', 11 | '16 | {/if} 17 | {part} 18 | {/each} 19 | {/if} 20 | 21 | 22 | 48 | -------------------------------------------------------------------------------- /docs/src/lib/icons/IconWebSocket.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 31 | -------------------------------------------------------------------------------- /docs/src/lib/loadCodeBlocks.ts: -------------------------------------------------------------------------------- 1 | import fromPairs from 'lodash/fp/fromPairs'; 2 | import { readFile } from 'node:fs/promises'; 3 | import { join } from 'node:path'; 4 | 5 | const cwd = process.cwd(); 6 | const examplesFolder = join(cwd, '..', 'examples'); 7 | const miscFolder = join(cwd, 'misc'); 8 | 9 | export default async function loadCodeBlocks
Suggested structure
11 | 12 |13 | Here's how you could structure the tRPC-related files in a non-trivial application in order to 14 | avoid cyclic dependencies: 15 |
16 | 17 |
18 |
20 |
21 |
22 | The t.ts file contains a simple helper that allows you to build routes and middleware:
23 |
28 | You'll have to import t.ts in multiple other files such as router.ts,
29 | middleware.ts,
30 | routes/route-1.ts, routes/route-2.ts, etc.
31 |
9 |
16 |
17 |
41 |
--------------------------------------------------------------------------------
/docs/src/lib/icons/IconClipboard.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
32 |
--------------------------------------------------------------------------------
/docs/src/routes/page-server-data/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | tRPC-SvelteKit works with:
10 |
11 |
15 | Page server data
9 | 10 |11 | If you want to call tRPC procedures in your SvelteKit page server load functions, you should bypass HTTP and invoke the methods directly on the 16 | tRPC caller: 17 |
18 | 19 |You can then use the loaded data in your pages like so:
22 | 23 |26 | Have a look at this SvelteKit documentation section to learn the difference between shared vs. server data loading. 31 |
32 | -------------------------------------------------------------------------------- /package/src/websocket/svelteKitServer.ts: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | import * as url from 'url'; 3 | import type { Server } from 'ws'; 4 | import { WebSocketServer } from 'ws'; 5 | 6 | export const GlobalThisWSS = Symbol.for('trpc.sveltekit.wss'); 7 | 8 | export function onHttpServerUpgrade(req, sock, head) { 9 | const pathname = url.parse(req.url).pathname; 10 | if (pathname !== '/trpc') return; 11 | 12 | const wss = globalThis[GlobalThisWSS] as Server; 13 | 14 | wss.handleUpgrade(req, sock, head, function done(ws) { 15 | wss.emit('connection', ws, req); 16 | }); 17 | } 18 | 19 | export function createWSSGlobalInstance() { 20 | const wss = new WebSocketServer({ 21 | noServer: true 22 | }); 23 | 24 | globalThis[GlobalThisWSS] = wss; 25 | 26 | return wss; 27 | } 28 | 29 | export async function SvelteKitTRPCWSServer(import_meta_url: string) { 30 | const __filename = url.fileURLToPath(import_meta_url); 31 | const __dirname = path.dirname(__filename); 32 | 33 | createWSSGlobalInstance(); 34 | 35 | const { server } = await import(/* @vite-ignore */ path.resolve(__dirname, './build/index.js')); 36 | server.server.on('upgrade', onHttpServerUpgrade); 37 | } 38 | -------------------------------------------------------------------------------- /docs/src/lib/icons/IconErrorHandling.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 34 | -------------------------------------------------------------------------------- /docs/src/lib/icons/IconHome.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 33 | -------------------------------------------------------------------------------- /docs/src/lib/icons/IconBulb.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 33 | -------------------------------------------------------------------------------- /docs/src/lib/icons/IconFileCode.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 34 | -------------------------------------------------------------------------------- /docs/src/lib/components/home/CallsToAction.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 |
12 |
21 |
22 |
46 |
--------------------------------------------------------------------------------
/docs/src/lib/icons/IconRocket.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
35 |
--------------------------------------------------------------------------------
/examples/bookstall/src/routes/login/+page.server.ts:
--------------------------------------------------------------------------------
1 | import { JWT_SECRET } from '$env/static/private';
2 | import prisma from '$lib/prisma';
3 | import { fail } from '@sveltejs/kit';
4 | import { md5 } from 'hash-wasm';
5 | import jwt from 'jsonwebtoken';
6 | import type { Actions } from './$types';
7 |
8 | export const actions: Actions = {
9 | default: async ({ request, cookies }) => {
10 | try {
11 | const data = await request.formData();
12 | const email = data.get('email') as string;
13 | const password = data.get('password') as string;
14 |
15 | // 👇 replace this with a non-naiive hashing algorithm
16 | const passwordHash = await md5(password);
17 |
18 | const { id, name } = await prisma.user.findFirstOrThrow({
19 | where: { email, passwordHash },
20 | select: { id: true, name: true }
21 | });
22 |
23 | cookies.set('jwt', jwt.sign({ id, name }, JWT_SECRET), { path: '/', secure: false });
24 |
25 | return { success: true };
26 | // 👆 or, if we're using HTTP headers based auth, we could return the token,
27 | // and let the client set the header on subsequent requests
28 | } catch {
29 | return fail(401, { error: 'Authentication failed' });
30 | }
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
/examples/simple/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-simple",
3 | "version": "0.0.0",
4 | "author": {
5 | "name": "Ionut-Cristian Florescu",
6 | "email": "ionut.florescu@gmail.com",
7 | "url": "https://github.com/icflorescu"
8 | },
9 | "private": true,
10 | "scripts": {
11 | "dev": "vite --port 3001 --clearScreen false",
12 | "build": "vite build",
13 | "preview": "vite preview --port 3001",
14 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
15 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
16 | "lint": "prettier --plugin-search-dir . --check . && eslint .",
17 | "format": "prettier --plugin-search-dir . --write ."
18 | },
19 | "devDependencies": {
20 | "@picocss/pico": "^1.5.12",
21 | "@sveltejs/adapter-auto": "^3.2.2",
22 | "@sveltejs/kit": "^2.18.0",
23 | "sass": "^1.85.1",
24 | "svelte": "^4.2.18",
25 | "svelte-check": "^3.8.0",
26 | "svelte-preprocess": "^6.0.3",
27 | "tslib": "^2.8.1",
28 | "typescript": "^5.8.2",
29 | "vite": "^4.5.2"
30 | },
31 | "type": "module",
32 | "dependencies": {
33 | "@trpc/client": "^10.45.2",
34 | "@trpc/server": "^10.45.2",
35 | "delay": "^6.0.0"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/docs/src/lib/icons/IconFileDatabase.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
34 |
--------------------------------------------------------------------------------
/docs/src/lib/icons/IconSpeakerphone.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
35 |
--------------------------------------------------------------------------------
/docs/src/lib/icons/IconLifeBuoy.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
36 |
--------------------------------------------------------------------------------
/docs/src/routes/handling-errors/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | Handling errors
9 | 10 |
11 | Whenever an error occurs in a procedure, tRPC responds to the client with an object that includes
12 | an "error" property. This property contains all the information that you need to handle the error
13 | in the client. Here's an example of how you can handle the error in your SvelteKit page (look at
14 | the try/catch block in the handleSave function):
15 |
20 | Please refer to the error handling page in the tRPC documentation for more information. 23 |
24 | 25 |
26 | You can also supply an onError handler to the createTRPCHandle method in
27 | your hooks.server.ts, which could be useful, for instance, if you want to log all
28 | errors to a service like Sentry:
29 |
Using authentication
9 | 10 |
11 | The tRPC-SvelteKit package works with both cookie-based and JWT-based authentication.
12 |
15 | Below is an example of how you could secure your tRPC routes with cookie-based authentication. 16 |
17 | 18 |19 | Let's assume you have a username/password-based login page that POSTs to the following action: 24 |
25 | 26 |Your tRPC context builder could look like this:
29 | 30 |You could define an authentication middleware like this:
33 | 34 |And you could use the auth middleware in your tRPC procedured as needed:
37 | 38 |
26 |
37 |
38 |
61 |
--------------------------------------------------------------------------------
/docs/src/routes/page-data/+page.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 | ✨ WebSocket Messages ✨
27 | 36 |Page data
10 | 11 |
12 | Assuming you created a trpc() helper function as described in the
13 | getting started
14 | section, you can call tRPC procedures in your SvelteKit
15 | page load functions:
17 |
You can then use the loaded data in your pages like so:
22 | 23 |
26 | A load function defined in a +page.ts file will run
27 | both on the server and in the browser. You should therefore consider using a
28 | +page.server.js instead.
29 |
32 | Have a look at this SvelteKit documentation section to learn the difference between shared vs. server data loading. 37 |
38 | -------------------------------------------------------------------------------- /examples/bookstall/src/lib/components/HeaderNavLink.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |Bookstall
16 |Fantasy novels
17 | 18 |19 | 31 |
13 |
43 |
44 |
61 |
--------------------------------------------------------------------------------
/docs/src/lib/components/layout/DarkModeSwitcher.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 | 😎
14 |
15 | Welcome to Bookstall, a sample SvelteKit application built to illustrate the usage of ✨
16 | trpc-sveltekit.
19 |
20 | No REST API routes are being used white you're managing books, authors and stores — all data is transferred
21 | through:
22 |
23 |
24 |
25 |
26 | tRPC
27 |
28 |
30 | You are {data.isAuthenticated ? '' : 'not'} authenticated{data.userName
31 | ? ` as ${data.userName}`
32 | : ''}.
33 |
34 | {#if data.isAuthenticated}
35 | You will be able to browse and edit the books, authors and stores.
36 | {:else}
37 | You will be able to browse the books, authors and stores,
38 |
39 | but you'll need to authenticate in order to edit them.
40 | {/if}
41 |
21 |
25 |
26 |
77 |
--------------------------------------------------------------------------------
/examples/bookstall/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
14 |
15 |
31 |
32 |
77 |
--------------------------------------------------------------------------------
/package/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "trpc-sveltekit",
3 | "version": "3.6.3",
4 | "description": "SvelteKit adapter for tRPC.io, working with Node.js, Vercel and Netlify",
5 | "keywords": [
6 | "trpc",
7 | "svelte",
8 | "sveltekit",
9 | "kit",
10 | "adapter",
11 | "handle",
12 | "typescript",
13 | "rpc",
14 | "vercel",
15 | "netlify",
16 | "node"
17 | ],
18 | "repository": "icflorescu/trpc-sveltekit",
19 | "homepage": "https://icflorescu.github.io/trpc-sveltekit/",
20 | "bugs": {
21 | "url": "https://github.com/icflorescu/trpc-sveltekit/issues"
22 | },
23 | "author": {
24 | "name": "Ionut-Cristian Florescu",
25 | "email": "ionut.florescu@gmail.com",
26 | "url": "https://github.com/icflorescu"
27 | },
28 | "funding": {
29 | "type": "github",
30 | "url": "https://github.com/sponsors/icflorescu"
31 | },
32 | "license": "ISC",
33 | "type": "module",
34 | "module": "dist/index.js",
35 | "types": "dist/index.d.ts",
36 | "files": [
37 | "dist",
38 | "README.md",
39 | "LICENSE"
40 | ],
41 | "exports": {
42 | ".": {
43 | "types": "./dist/index.d.ts",
44 | "import": "./dist/index.js"
45 | },
46 | "./websocket": {
47 | "types": "./dist/websocket/index.d.ts",
48 | "import": "./dist/websocket/index.js"
49 | },
50 | "./package.json": "./package.json"
51 | },
52 | "typesVersions": {
53 | "*": {
54 | "websocket": [
55 | "dist/websocket/index.d.ts"
56 | ]
57 | }
58 | },
59 | "scripts": {
60 | "build": "tsc && cp ../README.md README.md && cp ../LICENSE LICENSE",
61 | "lint": "prettier --plugin-search-dir . --check . && eslint .",
62 | "format": "prettier --plugin-search-dir . --write ."
63 | },
64 | "devDependencies": {
65 | "@sveltejs/kit": "^1.27.0",
66 | "@trpc/client": "^10.45.2",
67 | "@trpc/server": "^10.45.2",
68 | "@types/ws": "^8.18.0",
69 | "typescript": "^5.8.2"
70 | },
71 | "peerDependencies": {
72 | "@sveltejs/adapter-node": ">=1.2",
73 | "@trpc/client": "^10.0.0",
74 | "@trpc/server": "^10.0.0",
75 | "ws": ">=8"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/examples/bookstall/src/lib/trpc/routes/stores.ts:
--------------------------------------------------------------------------------
1 | import prisma from '$lib/prisma';
2 | import { auth } from '$lib/trpc/middleware/auth';
3 | import { logger } from '$lib/trpc/middleware/logger';
4 | import { t } from '$lib/trpc/t';
5 | import { z } from 'zod';
6 |
7 | export const stores = t.router({
8 | list: t.procedure
9 | .use(logger)
10 | .input(z.string().optional())
11 | .query(({ input }) =>
12 | prisma.store.findMany({
13 | select: {
14 | id: true,
15 | name: true,
16 | updatedAt: true,
17 | _count: { select: { books: true } }
18 | },
19 | orderBy: { updatedAt: 'desc' },
20 | where: input ? { name: { contains: input } } : undefined
21 | })
22 | ),
23 |
24 | loadOptions: t.procedure
25 | .use(logger)
26 | .query(() =>
27 | prisma.store
28 | .findMany({ select: { id: true, name: true }, orderBy: { name: 'asc' } })
29 | .then((stores) => stores.map(({ id, name }) => ({ label: name, value: id })))
30 | ),
31 |
32 | load: t.procedure
33 | .use(logger)
34 | .use(auth)
35 | .input(z.string())
36 | .query(({ input }) =>
37 | prisma.store.findUniqueOrThrow({
38 | select: {
39 | id: true,
40 | name: true,
41 | updatedAt: true,
42 | updatedBy: { select: { name: true } }
43 | },
44 | where: { id: input }
45 | })
46 | ),
47 |
48 | save: t.procedure
49 | .use(logger)
50 | .use(auth)
51 | .input(z.object({ id: z.string().nullable(), name: z.string() }))
52 | .mutation(async ({ input: { id, ...rest }, ctx: { userId } }) => {
53 | if (id) {
54 | await prisma.store.update({
55 | data: { ...rest, updatedByUserId: userId },
56 | where: { id }
57 | });
58 | } else {
59 | await prisma.store.create({
60 | data: { ...rest, updatedByUserId: userId }
61 | });
62 | }
63 | }),
64 |
65 | delete: t.procedure
66 | .use(logger)
67 | .use(auth)
68 | .input(z.string())
69 | .mutation(async ({ input: id }) => {
70 | await prisma.store.delete({ where: { id } });
71 | })
72 | });
73 |
--------------------------------------------------------------------------------
/examples/bookstall/src/routes/login/+page.svelte:
--------------------------------------------------------------------------------
1 |
33 |
34 |
17 |
20 |
21 | {#if nextPage}
22 |
23 | Go back
18 | {previousPage.title}
19 |
24 |
27 | Up next
25 | {nextPage.title}
26 | Hire the author
6 | 7 |Hi there!
8 | 9 |
12 |
13 |
14 | I'm Ionut-Cristian Florescu, a full-stack developer from Bucharest, Romania, EU, with more than 20
15 | years of experience in building commercial web applications and open-source projects.
16 |
17 | tRPC-SvelteKit is one of my dearest open-source projects.
18 |
21 | You can learn more about what I do by visiting my profiles on GitHub
26 | 
46 | So, if you want to hire my services, don't hesitate to drop me a line at the email address listed 47 | in my GitHub profile. I'm currently getting a constant flow of approaches from recruiters, some of 48 | them relevant, others not so relevant. Mentioning "tRPC-SvelteKit" in your text would help me 49 | prioritize your message. 50 |
51 | 52 |
53 | Thank you for your interest,
54 |
55 | Ionut-Cristian Florescu
56 |
Getting started
10 | 11 |
12 | 1
13 | Install the trpc-sveltekit package and its dependencies with:
14 |
15 |
16 | 24 | 2 25 | Create your 26 | tRPC router: 27 |
28 | 29 |32 | 3 33 | Create a tRPC context: 34 |
35 | 36 |39 | 4 40 | Add this handle to your SvelteKit app 41 | hooks: 42 |
43 | 44 |47 | If you have your own logic to place in the server hook, have a look at the sequence helper function in the SvelteKit docs. 52 |
53 | 54 |55 | 5 56 | Define a helper function to easily use the tRPC client in your pages: 57 |
58 | 59 |62 | 6 63 | Call the tRPC procedures in your pages: 64 |
65 | 66 |69 | 70 |
71 | 72 | Remember 73 |
74 | 75 |
76 | The trpc-sveltekit package exports two functions: createTRPCHandle and
77 | createTRPCClient.
78 |
79 | The former is used in your SvelteKit app hooks, the latter is used in your pages.
80 |
107 |
110 |
54 |
55 |
58 |
59 |
60 |
61 |
100 |
--------------------------------------------------------------------------------
/docs/static/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
58 |
--------------------------------------------------------------------------------
/docs/src/lib/components/layout/Header.svelte:
--------------------------------------------------------------------------------
1 |
23 |
24 |
26 |
27 |
28 |
31 |
32 |
33 |
36 |
37 |
46 |
47 |
136 |
--------------------------------------------------------------------------------
/docs/src/lib/constants.ts:
--------------------------------------------------------------------------------
1 | import IconFileCode from '$lib/icons/IconFileCode.svelte';
2 | import IconFileDatabase from '$lib/icons/IconFileDatabase.svelte';
3 | import IconFolder from '$lib/icons/IconFolder.svelte';
4 | import IconHome from '$lib/icons/IconHome.svelte';
5 | import IconLock from '$lib/icons/IconLock.svelte';
6 | import IconRocket from '$lib/icons/IconRocket.svelte';
7 | import IconTools from '$lib/icons/IconTools.svelte';
8 | import IconBulb from './icons/IconBulb.svelte';
9 | import IconErrorHandling from './icons/IconErrorHandling.svelte';
10 | import IconHeartHandshake from './icons/IconHeartHandshake.svelte';
11 | import IconLifeBuoy from './icons/IconLifeBuoy.svelte';
12 | import IconSpeakerphone from './icons/IconSpeakerphone.svelte';
13 | import IconWebSocket from './icons/IconWebSocket.svelte';
14 |
15 | export const GITHUB_PAGES_ROOT = 'https://icflorescu.github.io/trpc-sveltekit';
16 | export const AUTHOR_URL = 'https://github.com/icflorescu';
17 | export const REPO_URL = `${AUTHOR_URL}/trpc-sveltekit`;
18 | export const BADGE_COLOR_CODE = '1095c1';
19 |
20 | export const PAGES: {
21 | title: string | string[];
22 | path: string;
23 | icon: typeof IconHome;
24 | customPageTitle?: string;
25 | pageDescription: string;
26 | }[] = [
27 | {
28 | title: 'Home',
29 | path: '/',
30 | icon: IconHome,
31 | customPageTitle: 'tRPC-SvelteKit: end-to-end typesafe APIs for SvelteKit',
32 | pageDescription:
33 | 'tRPC-SvelteKit is a tRPC adapter that makes it easy to build end-to-end typesafe APIs for your SvelteKit applications.'
34 | },
35 | {
36 | title: 'Getting started',
37 | path: '/getting-started',
38 | icon: IconRocket,
39 | pageDescription: 'Get started with tRPC-SvelteKit'
40 | },
41 | {
42 | title: 'Page data',
43 | path: '/page-data',
44 | icon: IconFileCode,
45 | pageDescription: 'How to load SvelteKit page data with tRPC'
46 | },
47 | {
48 | title: 'Page server data',
49 | path: '/page-server-data',
50 | icon: IconFileDatabase,
51 | pageDescription: 'How to load SvelteKit server data with tRPC'
52 | },
53 | {
54 | title: 'Suggested structure',
55 | path: '/suggested-structure',
56 | icon: IconFolder,
57 | pageDescription: 'Suggested structure for a tRPC-SvelteKit application'
58 | },
59 | {
60 | title: 'Authentication',
61 | path: '/authentication',
62 | icon: IconLock,
63 | pageDescription: 'How to add authentication to a tRPC-SvelteKit application'
64 | },
65 | {
66 | title: 'Handling errors',
67 | path: '/handling-errors',
68 | icon: IconErrorHandling,
69 | pageDescription: 'How to handle errors in a tRPC-SvelteKit application'
70 | },
71 | {
72 | title: 'Recipes and caveats',
73 | path: '/recipes-and-caveats',
74 | icon: IconTools,
75 | pageDescription: 'Recipes and caveats for tRPC-SvelteKit'
76 | },
77 | {
78 | title: 'Using with Svelte Query',
79 | path: '/using-with-svelte-query',
80 | icon: IconBulb,
81 | pageDescription: 'How to use tRPC-SvelteKit with Svelte Query'
82 | },
83 | {
84 | title: ['WebSocket support', '(experimental)'],
85 | path: '/experimental-websocket-support',
86 | icon: IconWebSocket,
87 | pageDescription: 'Experimental WebSocket support in tRPC-SvelteKit'
88 | },
89 | {
90 | title: 'Contribute and support',
91 | path: '/contribute-and-support',
92 | icon: IconLifeBuoy,
93 | pageDescription: 'Contribute to tRPC-SvelteKit and support the project'
94 | },
95 | {
96 | title: 'Acknowledgements',
97 | path: '/acknowledgements',
98 | icon: IconSpeakerphone,
99 | pageDescription: 'Huge thanks to tRPC-SvelteKit sponsors'
100 | },
101 | {
102 | title: 'Hire the author',
103 | path: '/hire-the-author',
104 | icon: IconHeartHandshake,
105 | pageDescription: 'Hire the author of tRPC-SvleteKit'
106 | }
107 | ];
108 |
--------------------------------------------------------------------------------
/docs/src/routes/recipes-and-caveats/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
33 | v{$page.data.version}
35 |
36 |
37 | End-to-end typesafe APIs for your SvelteKit applications
38 |
39 |
40 |
41 |
45 | Recipes and caveats
9 | 10 |Custom HTTP headers
11 | 12 |
13 | The createTRPCClient method optionally accepts a headers option, which
14 | can be useful, for example, to set an Authorization header.
15 |
Setting response headers and cookies
18 | 19 |
20 | To change the headers of the response, you want to use the event provided in
21 | getContext. You may also pass the event into the context, so that it can
22 | be accessed in your procedures.
23 |
26 | You can then use event.setHeaders and event.cookies to edit the headers.
27 |
Using custom data transformers
32 | 33 |
34 | The createTRPCClient method optionally accepts a transformer option.
35 | Please refer to
36 | this section in the tRPC.io documentation
39 | for more information, and keep in mind that you'll have to use the same transformer when
40 | you're defining the router and when you're creating the client.
41 |
43 | If you're looking for a convenient transformer based on superjson
48 | with
49 | Decimal.js
50 | support, consider using the
51 | trpc-transformer
54 | package. Keep in mind that you'll have to install the superjson and
55 | decimal.js peer dependencies as well.
56 |
Response caching
58 | 59 |60 | Your server responses must satisfy some criteria 65 | in order for them to be cached (i.e. by Vercel's Edge Network). Please refer to 66 | this section of the tRPC.io documentation for more information. 69 |
70 |
71 | The createHTTPHandle method conveniently allows you to specify a
72 | responseMeta function.
73 |
Inferring types
76 | 77 |
78 | It is often useful to wrap functionality of your tRPC client API within other functions. For this
79 | purpose, it's necessary to be able to infer input types and output types generated by your tRPC
80 | router. The@trpc/server package exports two helper types to assist with inferring
81 | these types from your router, namely inferRouterInputs and
82 | inferRouterOutputs. Please refer to
83 | this section of the tRPC.io documentation
86 | for more information.
87 |
90 | To make your code faster to type and easier to read, you could further refine these helper types 91 | when defining your router: 92 |
93 | 94 |Then, you could use the helper types in your pages code like so:
97 | 98 |Reserved path prefix
101 | 102 |
103 | Invoking the createHTTPHandle method reserves the /trpc path prefix for
104 | the tRPC API. This means that you cannot use this prefix for any other purpose. If you need to use
105 | this prefix for other purposes, you can use the url option to change the reserved prefix.
106 |