종단 간 형식 안전성: 스키마 우선 작업 흐름

스키마 우선이란?

# The workflow:
# 1. Define schema (.graphql or SDL)
# 2. Generate server resolver types
# 3. Generate client operation types
# 4. Both sides automatically stay in sync

스키마 정의

# schema.graphql
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

서버: 리졸버 타입 생성

# Server codegen step
npx graphql-codegen --config codegen.server.yml

클라이언트: 작업 타입 생성

# Client codegen step
npx graphql-codegen --config codegen.client.yml

호환성을 깨는 변경 감지

npx graphql-inspector diff ./api/schema.graphql ./api/schema.new.graphql
# Reports: BREAKING: Field 'User.email' was removed

스키마 레지스트리

# Push schema to Apollo Studio:
npx apollo schema:push --endpoint https://api.example.com/graphql

스키마를 사용한 모의 데이터

import { buildClientSchema, introspectionFromSchema } from "graphql";
import { addMocksToSchema } from "@graphql-tools/mock";
const schema = buildClientSchema(introspectionResult);
const mockedSchema = addMocksToSchema({ schema });

대안으로 사용하는 tRPC

// Server: router infers types
const router = t.router({ getUser: t.procedure.query(() => fetchUser()) });
// Client: types flow automatically via inference
const { data } = trpc.getUser.useQuery();

유효성 검사를 위한 Zod + tRPC

const createUser = t.procedure
  .input(z.object({ name: z.string(), email: z.string().email() }))
  .mutation(({ input }) => saveUser(input));
// input: { name: string; email: string } — from Zod schema

CI: 전체 스키마 안전성 처리 절차

# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm test

복습: 스키마 우선 작업 흐름

빠른 확인

학습한 내용