tRPC v11: A Fully Type-Safe API Without Code Generation

// src/server/api/routers/invoice.ts
import { z } from "zod";
import { createTRPCRouter, staffProcedure } from "~/server/api/trpc";
 
export const invoiceRouter = createTRPCRouter({
  getAll: staffProcedure.query(async ({ ctx }) => {
    return ctx.orgDb.invoice.findMany({
      orderBy: { createdAt: "desc" },
      include: { client: true },
    });
  }),
 
  create: staffProcedure
    .input(
      z.object({
        clientId: z.string(),
        items: z.array(
          z.object({
            description: z.string(),
            quantity: z.number().positive(),
            unitPrice: z.number().positive(),
          }),
        ),
      }),
    )
    .mutation(async ({ ctx, input }) => {
      return ctx.db.invoice.create({
        data: {
          organizationId: ctx.session.user.organizationId,
          clientId: input.clientId,
          items: { create: input.items },
        },
      });
    }),
});

"use client";
import { api } from "~/trpc/react";
 
export function InvoiceList() {
  const { data, isLoading } = api.invoice.getAll.useQuery();
 
  if (isLoading) return <Skeleton />;
 
  return (
    <div>
      {data?.map((invoice) => (
        // invoice is typed automatically: full autocomplete
        <InvoiceCard key={invoice.id} invoice={invoice} />
      ))}
    </div>
  );
}

// From least to most restrictive
export const publicProcedure = t.procedure;
 
export const protectedProcedure = publicProcedure.use(enforceAuth);
 
export const staffProcedure = protectedProcedure.use(enforceStaffRole);
 
export const adminProcedure = protectedProcedure.use(enforceAdminRole);
 
// Granular permission
export const requirePermission = (perm: string) =>
  staffProcedure.use(({ ctx, next }) => {
    if (!hasPermission(ctx.session.user.role, perm)) {
      throw new TRPCError({ code: "FORBIDDEN" });
    }
    return next({ ctx });
  });

.input(
  z.object({
    search: z.string().optional(),
    page: z.number().int().positive().default(1),
    perPage: z.number().int().min(1).max(100).default(20),
  })
)

const utils = api.useUtils();
 
const createInvoice = api.invoice.create.useMutation({
  onSuccess: () => {
    // Invalidate the cache to refetch
    utils.invoice.getAll.invalidate();
  },
});