Schema-first.
Type-safe forever.

// v1: status is required
app.get("/api/tasks", async (req, res) => {
  const tasks = await db.query(`
    SELECT id, title, status FROM tasks
  `);
  res.json(tasks);
});

// Two months later: PM says "status is
// optional for imported tasks." You ALTER
// to allow NULL. The endpoint still works.
// You meant to update openapi.yaml too
// but the PR got merged without it.

// Auto-generated from OpenAPI (stale)
interface Task {
  id: string;
  title: string;
  status: string; // ← says required
}

function TaskCard({ task }: { task: Task }) {
  return (
    <span>{task.status.toUpperCase()}</span>
  );
}
// 💥 "Cannot read properties of null"
// User sees a white screen. No build error.

type Task {
  id:     ID!
  title:  String!
  status: String!  # "!" means non-null
}

type Query {
  tasks: [Task!]!
}

export const resolvers = {
  Query: {
    tasks: async () => {
      return db.query(`
        SELECT id, title, status
        FROM tasks
      `);
    },
  },
};
// Resolver returns raw DB rows.
// Nothing type-checks this function
// against the SDL schema at compile
// time — it's just untyped glue code.

// Auto-generated by graphql-codegen
// Last run: 2 months ago
export interface Task {
  id: string;
  title: string;
  status: string; // still says required
}
// Schema changed to String (nullable)
// but nobody re-ran codegen.
// Frontend types are frozen in time.

const { data } = useQuery(GET_TASKS);

{data.tasks.map(task => (
  <span>{task.status.toUpperCase()}</span>
))}
// 💥 GraphQL catches the null at runtime
// and errors — but only in production.
// No compile-time warning. No IDE squiggle.

model Task {
  id     String  @id @default(cuid())
  title  String
  status String? // ← make it optional here
}
// That's it. One line changed.
// Run: npx prisma migrate dev
// Prisma generates new types automatically.

// generated by prisma-client from schema.prisma
export type Task = {
  id: string;
  title: string;
  status: string | null;
  projectId: string;
  createdAt: Date;
};
// this is what tRPC/router code consumes
// and what eventually reaches the client types.

function TaskCard({ task }: { task: Task }) {
  return (
    <span>{task.status.toUpperCase()}</span>
  );        ~~~~~~~~
}
// TS2532: Object is possibly 'null'.
// Compiler catches it BEFORE you run
// the app. You fix it right here:

function TaskCard({ task }: { task: Task }) {
  return (
    <span>
      {task.status?.toUpperCase() ?? "No status"}
    </span>
  );
}
// ✅ Compiles. Handles null. Ships safe.