Profile My skills Saved My plugins Edit profile Submit a skill

Trpc Fullstack

tRPC

ComeOnOliver Updated 61 repo stars
Coding & Dev Tools

File contents

tRPC

Server

import { initTRPC } from '@trpc/server';
import { z } from 'zod';
const t = initTRPC.create();

const appRouter = t.router({
    getUser: t.procedure.input(z.string()).query(({ input }) => {
        return db.user.findUnique({ where: { id: input } });
    }),
    createUser: t.procedure
        .input(z.object({ name: z.string(), email: z.string().email() }))
        .mutation(({ input }) => db.user.create({ data: input })),
});
export type AppRouter = typeof appRouter;

Client (React)

import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/router';
const trpc = createTRPCReact<AppRouter>();

function UserPage({ id }: { id: string }) {
    const { data: user } = trpc.getUser.useQuery(id);
    const createUser = trpc.createUser.useMutation();
    return <div>{user?.name}</div>;
}

Key: Full type inference from server to client, no codegen needed

ComeOnOliver/skillshub/tree/main/skills/skillshub-team/catalog-batch5/trpc-fullstack commit e90ad3d045

Browse category

Frequently asked questions

npx skillmds@latest add comeonoliver/trpc-fullstack