Website | Source


Minimal Node.js:

import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server';
import './polyfill';

const trpc = createTRPCClient<AppRouter>({
  links: [
      url: 'http://localhost:3000',

async function main() {
   * Inferring types
  const users = await trpc.userList.query();
  console.log('Users:', users);

  const createdUser = await trpc.userCreate.mutate({ name: 'sachinraja' });
  console.log('Created user:', createdUser);

  const user = await trpc.userById.query('1');
  console.log('User 1:', user);

import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { z } from 'zod';
import { db } from './db';
import { publicProcedure, router } from './trpc';

const appRouter = router({
  userList: publicProcedure.query(async () => {
    // Retrieve users from a datasource, this is an imaginary database
    const users = await db.user.findMany();
    return users;
  userById: publicProcedure.input(z.string()).query(async (opts) => {
    const { input } = opts;
    // Retrieve the user with the given ID
    const user = await db.user.findById(input);
    return user;
  userCreate: publicProcedure
    .input(z.object({ name: z.string() }))
    .mutation(async (opts) => {
      const { input } = opts;
      // Create a new user in the database
      const user = await db.user.create(input);
      return user;

// Export type router type signature,
// NOT the router itself.
export type AppRouter = typeof appRouter;

const server = createHTTPServer({
  router: appRouter,


Awesome tRPC

🧩 Extensions & community add-ons


Description Link
tRPC panel automatically generates a UI for manually testing your tRPC backend
tRPC-OpenAPI - OpenAPI & REST support for your tRPC routers
tRPC Client Devtools browser extension
tRPC Playground - sandbox for testing tRPC queries in the browser
tRPC-Chrome - Web extensions messaging support for tRPC
Step CI - Automated API Testing and Quality Assurance
msw-trpc - tRPC support for MSW

Frontend frameworks

Description Link
tRPC-SvelteKit - SvelteKit tRPC extension
tRPC-Remix - Adapter for Remix
tRPC Client For SolidJS W/ Solid Query
tRPC API Handler For SolidStart
tRPC-nuxt - Nuxt 3 module


Description Link
create-t3-app - Scaffold a starter project using the T3 Stack (Next.js, tRPC, Tailwind CSS, Prisma)
sidebase - Scaffold a starter project using sidebase (Nuxt 3, tRPC, Tailwind CSS, Prisma)
Create JD App - Scaffold a starter project using the JD Stack (SolidStart, tRPC, Tailwind, Prisma)
Create tRPC App - Create tRPC-powered apps with one command
viteRPC - Monorepo template powered by Vite (Vite, tRPC, Tailwind CSS)

Library adapters

Description Link
tRPC-uWebSockets - Adapter for uWebSockets.js server
jotai-trpc - Jotai wrapper around tRPC vanilla client
@h4ad/serverless-adapter - Connect tRPC with AWS SQS, AWS API Gateway, and many more event sources.
trpc-koa-adapter - tRPC adapter for Koa server
tRPC - iron-session
electron-trpc - Electron support for tRPC
cloudflare-pages-plugin-trpc - Quickly create a tRPC server with a Cloudflare Pages Function
ZenStack - Full-stack toolkit adds access control to Prisma and generates trpc routers from schema
tRPC-SWR - tRPC adapter for Vercel's SWR client
trpc-rtk-query - Automatically generate RTK Query api endpoints from your tRPC setup
k6-trpc - k6 compatible tRPC client
trpc-token-refresh-link - Link to refresh access tokens and refresh tokens
trpc-bun-adapter - tRPC adapter for Bun runtime environment

🍀 Starting points, example projects, etc

Description Link
Recommended: Starter project with Prisma, Next.js, tRPC, E2E-testing
create-t3-turbo - Clean and simple starter repo using the T3 Stack along with Expo React Native
create-t3-app - Scaffold a starter project using the T3 Stack (Next.js, tRPC, Tailwind CSS, Prisma)
WebSockets Starter Project
tRPC Kitchen Sink - A collection of tRPC usage patterns.
Turborepo + Expo + tRPC Starter
tRPC-SvelteKit Example Application
tRPC + Ultra
Nx Monorepo + tRPC + Prisma
tRPC (w/ Fetch Adapter) + SvelteKit + Tailwind CSS
With Ethereum tRPC + ViteJS React
tRPC + Vue3 todo example project (tRPC, Express.js, Vue3, Prisma, vue-query)
Vite + Svelte + tRPC
V3 - A T3 Inspired Nuxt Stack
sidebase - Scaffold a starter project using sidebase (Nuxt 3, tRPC, Tailwind CSS, Prisma)
Twitter clone - A simple Twitter clone built with T3 Stack + NextAuth + Supabase + Prisma
Separate backend & frontend repositories
tRPC + Deno + fresh

🏁 Open-source projects using tRPC

Description Link - Scheduling infrastructure
Skill Recordings - Hosting courses by Matt Pocock, Kent C Dodds, Dan Abramov, and many others
SST - A framework that makes it easy to build serverless apps.
Beam - A simple message board for your organization or project.
Rallly - Self-hostable doodle poll alternative.
Hilde - Match-making app for games like foosball, air hockey and similar
Answer Overflow - Discord bot that indexes help channel content into Google
Prisma Editor - Powerful tool to visualize and edit Prisma Schema
Saleor Apps - Official apps/integrations for Saleor Commerce
Rao Pics App - Visit Photo on any device. Supported MacOS/Windows

Tags: distribution   javascript  

Last modified 13 January 2024