Trpc Sveltekit

Overview:

tRPC-SvelteKit is a package that provides end-to-end typesafe APIs for SvelteKit applications. It allows developers to easily create a tRPC router and context, and provides a helper function to use the tRPC client in SvelteKit pages. Additionally, it offers experimental WebSocket support for SvelteKit using the @sveltejs/adapter-node adapter.

Features:

• Typesafe APIs for SvelteKit applications
• Compatibility with @sveltejs/adapter-node, @sveltejs/adapter-vercel, and @sveltejs/adapter-netlify
• Support for tRPC v10 (tRPC-SvelteKit v3.x.x) and tRPC v9 (tRPC-SvelteKit v2.x.x)
• Examples included for simple, bookstall, and websocket implementations

Installation:

To install tRPC-SvelteKit, follow these steps:

1. Install the package and its dependencies:

   npm install trpc-sveltekit
   

2. Create your tRPC router:

   // router.js
   import { createRouter } from 'trpc-sveltekit';
   
   export const router = createRouter();
   

3. Create a tRPC context:

   // context.js
   import { createHttpContext } from 'trpc-sveltekit';
   
   export const createContext = (url) => {
     // add any context configuration here
     return createHttpContext(url);
   };
   

4. Add this handler to your SvelteKit app hooks:

   // svelte.config.js
   import { createHandle } from 'trpc-sveltekit';
   import { router } from './router';
   import { createContext } from './context';
   
   export default {
     // ...
     kit: {
       // ...
       hooks: {
         handle: createHandle(router, createContext),
       },
     },
   };
   

5. Define a helper function to easily use the tRPC client in your pages:

   // utils.js
   import { createTRPCClient } from 'trpc-sveltekit';
   import { createContext } from './context';
   
   export const trpc = createTRPCClient(createContext);
   

6. Call the tRPC procedures in your pages:

   // index.svelte
   import { trpc } from '../utils';
   
   async function load() {
     const data = await trpc.query.myProcedure();
   
     // do something with data
   }
   

Summary:

tRPC-SvelteKit is a package that provides developers with typesafe APIs for SvelteKit applications. It offers compatibility with various SvelteKit adapters and allows for easy creation of tRPC routers and contexts. The package also includes experimental WebSocket support for SvelteKit when using the @sveltejs/adapter-node adapter. With tRPC-SvelteKit, developers can build robust and efficient APIs for their SvelteKit projects.