Use tRPC in your SvelteKit applications

icflorescu

Ionut-Cristian Florescu

Posted on February 21, 2022

Use tRPC in your SvelteKit applications

Hi everyone! I'm mostly a React developer, but lately Svelte managed to really capture my attention. I've been playing around with it for a bit, and was simply astonished by how easy one can achieve things with far fewer lines of code than with React. On the other hand, I was a bit put-off by the (yet-) lack of tools in the ecosystem. One such tool was the ability to write & use typesafe APIs without the friction of REST or GraphQL... Such as we do in React-land with tRPC.

Hence trpc-sveltekit, my humble contribution to the Svelte ecosystem.

Image description

Simply install the package in your SvelteKit application with:

npm i trpc-sveltekit
Enter fullscreen mode Exit fullscreen mode

or

yarn add trpc-sveltekit
Enter fullscreen mode Exit fullscreen mode

...then make sure to add this to src/hooks.ts:

// src/hooks.ts
import { createTRPCHandle } from 'trpc-sveltekit';
// create your tRPC router...

export const handle = createTRPCHandle({ url: '/trpc', router });
Enter fullscreen mode Exit fullscreen mode

Head over to the GitHub repo to learn how to set it up with Prisma and superjson and see a full example on CodeSandbox.

Though basic functionality is stable and working, the package is still WIP, so PRs are more than welcome! And please, don't hesitate to star the repo; it helps a lot ;-)

💖 💪 🙅 🚩
icflorescu
Ionut-Cristian Florescu

Posted on February 21, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related