tRPC Type-Safe API Builder

import { initTRPC, TRPCError } from '@trpc/server';
import { z } from 'zod';
import { db } from './db';

// Context creation
export const createContext = async ({ req }: { req: Request }) => {
  const token = req.headers.get('authorization')?.replace('Bearer ', '');
  const user = token ? await verifyToken(token) : null;
  
  return {
    db,
    user,
  };
};

type Context = Awaited<ReturnType<typeof createContext>>;

const t = initTRPC.context<Context>().create();

// Middleware
const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next({
    ctx: {
      user: ctx.user,
    },
  });
});

// Procedures
export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(isAuthed);

// Router
export const appRouter = t.router({
  users: t.router({
    list: publicProcedure.query(async ({ ctx }) => {
      return ctx.db.user.findMany();
    }),
    
    create: protectedProcedure
      .input(
        z.object({
          name: z.string().min(3),
          email: z.string().email(),
        })
      )
      .mutation(async ({ ctx, input }) => {
        return ctx.db.user.create({
          data: input,
        });
      }),
  }),
});

export type AppRouter = typeof appRouter;

// app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter, createContext } from '~/server/trpc';

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext,
  });

export { handler as GET, handler as POST };

// app/providers.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import { trpc } from '~/utils/trpc';
import { useState } from 'react';

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/api/trpc',
          headers() {
            return {
              authorization: `Bearer ${getToken()}`,
            };
          },
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

// Component usage
export function UsersList() {
  const { data: users, isLoading } = trpc.users.list.useQuery();
  const createUser = trpc.users.create.useMutation();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      {users?.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
      <button
        onClick={() =>
          createUser.mutate({
            name: 'New User',
            email: 'user@example.com',
          })
        }
      >
        Add User
      </button>
    </div>
  );
}

import { EventEmitter } from 'events';
import { observable } from '@trpc/server/observable';

const ee = new EventEmitter();

export const appRouter = t.router({
  messages: t.router({
    onNew: publicProcedure.subscription(() => {
      return observable<Message>((emit) => {
        const onMessage = (data: Message) => {
          emit.next(data);
        };
        
        ee.on('newMessage', onMessage);
        
        return () => {
          ee.off('newMessage', onMessage);
        };
      });
    }),
    
    send: protectedProcedure
      .input(z.object({ text: z.string() }))
      .mutation(async ({ ctx, input }) => {
        const message = await ctx.db.message.create({
          data: {
            text: input.text,
            userId: ctx.user.id,
          },
        });
        
        ee.emit('newMessage', message);
        return message;
      }),
  }),
});

// utils/trpc.ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '~/server/trpc';

export const trpc = createTRPCReact<AppRouter>();

// Usage in component:
// const utils = trpc.useUtils();
// utils.users.list.invalidate(); // Invalidate cache
// utils.users.list.setData(undefined, newUsers); // Optimistic update