T3 Stack Gotcha: Stale Prisma Client After Migration

// io/thecodeforge/t3-stack/prisma/schema.prisma
// This schema generates the type chain — every layer derives types from here

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  role      Role     @default(MEMBER)
  posts     Post[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("users")
}

model Post {
  id        String   @id @default(cuid())
  title     String
  content   String
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String
  createdAt DateTime @default(now())

  @@index([authorId])
  @@index([published, createdAt])
  @@map("posts")
}

enum Role {
  ADMIN
  MEMBER
  VIEWER
}

import { z } from 'zod';
import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
import { TRPCError } from '@trpc/server';

export const postRouter = createTRPCRouter({
  // Public query — no auth required
  list: publicProcedure
    .input(z.object({
      limit: z.number().min(1).max(100).default(20),
      cursor: z.string().nullish(),
    }))
    .query(async ({ ctx, input }) => {
      const posts = await ctx.db.post.findMany({
        take: input.limit + 1,
        cursor: input.cursor ? { id: input.cursor } : undefined,
        orderBy: { createdAt: 'desc' },
        include: { author: { select: { name: true, email: true } } },
      });

      let nextCursor: string | undefined;
      if (posts.length > input.limit) {
        nextCursor = posts.pop()!.id;
      }

      return { posts, nextCursor };
    }),

  // Protected mutation — auth middleware applied
  create: protectedProcedure
    .input(z.object({
      title: z.string().min(1).max(200),
      content: z.string().min(1),
      published: z.boolean().default(false),
    }))
    .mutation(async ({ ctx, input }) => {
      const post = await ctx.db.post.create({
        data: {
          ...input,
          authorId: ctx.session.user.id,
        },
      });

      return post;
    }),

  // Protected query with authorization check
  getById: protectedProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      const post = await ctx.db.post.findUnique({
        where: { id: input.id },
        include: { author: { select: { name: true } } },
      });

      if (!post) {
        throw new TRPCError({
          code: 'NOT_FOUND',
          message: `Post ${input.id} not found`,
        });
      }

      // Authorization: only author or admin can view unpublished posts
      if (!post.published && post.authorId !== ctx.session.user.id) {
        throw new TRPCError({
          code: 'FORBIDDEN',
          message: 'You do not have access to this post',
        });
      }

      return post;
    }),
});

import { PrismaClient } from '@prisma/client';
import { withAccelerate } from '@prisma/extension-accelerate';

// Singleton pattern: prevent multiple PrismaClient instances in development
// Hot reloading creates new instances on every file change without this
const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

// In production, use Prisma Accelerate for connection pooling and edge caching
// In development, use the standard client
export const db = globalForPrisma.prisma ?? new PrismaClient({
  log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
}).$extends(withAccelerate());

if (process.env.NODE_ENV !== 'production') {
  globalForPrisma.prisma = db;
}

// Usage in Server Components and tRPC procedures:
// const posts = await db.post.findMany({
//   where: { published: true },
//   orderBy: { createdAt: 'desc' },
//   take: 20,
// });

// Custom DataTable component built on shadcn/ui primitives
// This is YOUR code — modify it to match your design system

'use client';

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { ChevronLeft, ChevronRight, Search } from 'lucide-react';
import { useState } from 'react';

interface Column<T> {
  key: keyof T;
  header: string;
  render?: (value: T[keyof T], row: T) => React.ReactNode;
}

interface DataTableProps<T> {
  data: T[];
  columns: Column<T>[];
  pageSize?: number;
  searchable?: boolean;
}

export function DataTable<T extends { id: string }>({
  data,
  columns,
  pageSize = 10,
  searchable = true,
}: DataTableProps<T>) {
  const [page, setPage] = useState(0);
  const [search, setSearch] = useState('');

  const filtered = search
    ? data.filter((row) =>
        columns.some((col) =>
          String(row[col.key]).toLowerCase().includes(search.toLowerCase())
        )
      )
    : data;

  const paginated = filtered.slice(page * pageSize, (page + 1) * pageSize);
  const totalPages = Math.ceil(filtered.length / pageSize);

  return (
    <div className="space-y-4">
      {searchable && (
        <div className="relative">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="Search..."
            value={search}
            onChange={(e) => { setSearch(e.target.value); setPage(0); }}
            className="pl-9"
          />
        </div>
      )}

      <Table>
        <TableHeader>
          <TableRow>
            {columns.map((col) => (
              <TableHead key={String(col.key)}>{col.header}</TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {paginated.map((row) => (
            <TableRow key={row.id}>
              {columns.map((col) => (
                <TableCell key={String(col.key)}>
                  {col.render ? col.render(row[col.key], row) : String(row[col.key])}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>

      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">
          Showing {page * pageSize + 1}-{Math.min((page + 1) * pageSize, filtered.length)} of {filtered.length}
        </p>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" disabled={page === 0} onClick={() => setPage(page - 1)}>
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" disabled={page >= totalPages - 1} onClick={() => setPage(page + 1)}>
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}

// Recommended T3 Stack project structure for production scale
// Domain-driven organization — each feature is self-contained

io/thecodeforge/t3-stack/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── layout.tsx                # Root layout (Server Component)
│   │   ├── page.tsx                  # Landing page
│   │   ├── dashboard/                # Dashboard feature
│   │   │   ├── layout.tsx            # Dashboard layout with sidebar
│   │   │   ├── page.tsx              # Dashboard overview (Server Component)
│   │   │   ├── posts/                # Posts sub-feature
│   │   │   │   ├── page.tsx          # Posts list (Server Component)
│   │   │   │   ├── [id]/page.tsx     # Post detail (Server Component)
│   │   │   │   └── new/page.tsx      # Create post (Client Component form)
│   │   │   └── settings/             # Settings sub-feature
│   │   │       └── page.tsx          # Settings page
│   │   └── api/
│   │       └── trpc/[trpc]/route.ts  # tRPC API handler
│   │
│   ├── server/                       # Server-side code
│   │   ├── trpc/
│   │   │   ├── trpc.ts               # tRPC initialization + context
│   │   │   ├── routers/
│   │   │   │   ├── _app.ts           # Root router (merges all routers)
│   │   │   │   ├── post.ts           # Post procedures
│   │   │   │   └── user.ts           # User procedures
│   │   │   └── middleware.ts         # Auth, rate limiting middleware
│   │   └── auth.ts                   # Auth.js v5 configuration
│   │
│   ├── components/                   # Shared UI components
│   │   ├── ui/                       # shadcn/ui components (owned code)
│   │   │   ├── button.tsx
│   │   │   ├── table.tsx
│   │   │   └── input.tsx
│   │   └── shared/                   # App-specific shared components
│   │       ├── header.tsx
│   │       └── sidebar.tsx
│   │
│   ├── lib/                          # Shared utilities
│   │   ├── db.ts                     # Prisma client singleton
│   │   ├── utils.ts                  # cn() helper, formatters
│   │   └── validations/              # Shared zod schemas
│   │       ├── post.ts
│   │       └── user.ts
│   │
│   ├── prisma/
│   │   ├── schema.prisma             # Database schema (source of truth)
│   │   └── migrations/               # Migration history
│   │
│   ├── tailwind.config.ts            # Tailwind configuration
│   ├── components.json               # shadcn/ui configuration
│   └── next.config.js                # Next.js configuration

// io.thecodeforge — javascript tutorial

import { initTRPC, TRPCError } from '@trpc/server';
import { getServerSession } from 'next-auth';
import { authOptions } from './auth';

export const t = initTRPC.create();

const isAuthenticated = t.middleware(async ({ ctx, next }) => {
  const session = await getServerSession(ctx.req, ctx.res, authOptions);
  if (!session?.user) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next({ ctx: { user: session.user } });
});

export const protectedProcedure = t.procedure.use(isAuthenticated);

// Usage in a resolver:
export const guestbookRouter = t.router({
  addEntry: protectedProcedure
    .input(z.object({ message: z.string().max(500) }))
    .mutation(async ({ ctx, input }) => {
      const entry = await ctx.prisma.guestbookEntry.create({
        data: { message: input.message, userId: ctx.user.id },
      });
      return entry;
    }),
});

// io.thecodeforge — edge-safe prisma client

import { PrismaClient } from '@prisma/client'
import { PrismaNeon } from '@prisma/adapter-neon'
import { Pool } from '@neondatabase/serverless'

const pool = new Pool({ connectionString: process.env.DATABASE_URL })
const adapter = new PrismaNeon(pool)
const prisma = new PrismaClient({ adapter })

export async function GET(request) {
  const users = await prisma.user.findMany()
  return Response.json(users)
}