0.11.2 • Published 1 year ago
@bevm0/trpc-sveltekit v0.11.2
@bevm0/trpc-sveltekit
Move fast and break nothing.
End-to-end typesafe APIs for your
SvelteKit applications.
Quickstart
Install the package and its dependencies:
# npm
npm install @bevm0/trpc-sveltekit @trpc/client @trpc/server
# Yarn
yarn add @bevm0/trpc-sveltekit @trpc/client @trpc/server
# pnpm
pnpm add @bevm0/trpc-sveltekit @trpc/client @trpc/server
Create a tRPC context:
// src/lib/trpc/context.ts
import type { trpcSvelteContextOptions } from '@bevm0/trpc-sveltekit'
import type { inferAsyncReturnType } from '@trpc/server'
export const createContext = (options: trpcSvelteContextOptions) => (options)
export type Context = inferAsyncReturnType<typeof createContext>
Create your tRPC router:
// src/lib/trpc/router.ts
import delay from 'delay';
import { initTRPC } from '@trpc/server';
import type { Context } from '$lib/trpc/context';
const t = initTRPC.context<Context>().create();
export const { router, procedure } = t
export const appRouter = router({
greeting: procedure.query(async () => {
await delay(500); // 👈 simulate an expensive operation
return `Hello tRPC v10 @ ${new Date().toLocaleTimeString()}`;
})
});
export type AppRouter = typeof appRouter;
Add this handle to your SvelteKit hooks hooks:
// hooks.server.ts
import { createTRPCHandle } from '@bevm0/trpc-sveltekit';
import type { Handle } from '@sveltejs/kit';
import { createContext } from '$lib/trpc/context';
import { appRouter } from '$lib/trpc/router';
export const handle: Handle = createTRPCHandle({ router: appRouter, createContext });
Or add it to a +server.ts
file. More information is available on the official documentation.
Define a helper function to easily use the tRPC client in your pages:
// src/lib/trpc/client.ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'
import type { AppRouter } from '$lib/trpc/router';
export const trpc = createTRPCProxyClient<AppRouter>({
links: [ httpBatchLink({ url: 'http://localhost:5173/trpc' }) ]
})
Call the tRPC procedures in your pages:
<!-- routes/+page.svelte -->
<script lang="ts">
import trpc from '$lib/trpc/client';
let greeting = 'press the button to load data';
let loading = false;
async function loadData () {
loading = true;
greeting = await trpc.greeting.fetch();
loading = false;
};
</script>
<h6>Loading data in<br /><code>+page.svelte</code></h6>
<a
href="#load"
role="button"
class="secondary"
aria-busy={loading}
on:click|preventDefault={loadData}>Load</a
>
<p>{greeting}</p>
Using the svelte-query + tRPC proxy client from @bevm0/trpc-svelte-query
Same steps as the other README
0.11.1
1 year ago
0.11.2
1 year ago
0.11.0
1 year ago
0.9.22
2 years ago
0.9.18
2 years ago
0.9.19
2 years ago
0.9.20
2 years ago
0.9.21
2 years ago
0.9.17
2 years ago
0.9.16
2 years ago
0.9.15
2 years ago
0.9.14
2 years ago
0.9.13
2 years ago
0.9.12
2 years ago
0.9.11
2 years ago
0.9.3
2 years ago
0.9.1
2 years ago
0.9.0
2 years ago
0.1.69
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.999
2 years ago
0.0.99
2 years ago
0.0.98
2 years ago
0.0.97
2 years ago
0.0.95
2 years ago
0.0.94
2 years ago
0.0.93
2 years ago
0.0.90
2 years ago
0.0.80
2 years ago
0.0.70
2 years ago
0.0.69
2 years ago