# 모든 게시글 조회
GET /api/posts
Response: [
  { "id": 1, "title": "첫 번째 글", "authorId": 100 },
  { "id": 2, "title": "두 번째 글", "authorId": 101 }
]
 
# 특정 게시글 조회
GET /api/posts/1
Response: {
  "id": 1,
  "title": "첫 번째 글",
  "content": "내용...",
  "authorId": 100,
  "createdAt": "2025-09-30T10:00:00Z"
}
 
# 저자 정보 조회 (별도 요청 필요)
GET /api/users/100
Response: {
  "id": 100,
  "name": "홍길동",
  "email": "hong@example.com"
}
 
# 댓글 조회 (또 다른 요청)
GET /api/posts/1/comments
Response: [
  { "id": 1, "postId": 1, "content": "좋은 글이네요", "authorId": 102 }
]

# 스키마 정의
type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
  comments: [Comment!]!
  createdAt: DateTime!
}
 
type User {
  id: ID!
  name: String!
  email: String!
  posts: [Post!]!
}
 
type Comment {
  id: ID!
  content: String!
  author: User!
  post: Post!
}
 
type Query {
  posts: [Post!]!
  post(id: ID!): Post
  user(id: ID!): User
}

# 단일 쿼리로 모든 데이터 가져오기
query GetPostWithDetails {
  post(id: "1") {
    id
    title
    content
    createdAt
    author {
      id
      name
    }
    comments {
      id
      content
      author {
        name
      }
    }
  }
}
 
# 응답 (요청한 필드만 정확히 반환)
{
  "data": {
    "post": {
      "id": "1",
      "title": "첫 번째 글",
      "content": "내용...",
      "createdAt": "2025-09-30T10:00:00Z",
      "author": {
        "id": "100",
        "name": "홍길동"
      },
      "comments": [
        {
          "id": "1",
          "content": "좋은 글이네요",
          "author": {
            "name": "김철수"
          }
        }
      ]
    }
  }
}

// REST: 사용자 프로필 페이지 로딩
async function loadUserProfile(userId) {
  const user = await fetch(`/api/users/${userId}`);
  const posts = await fetch(`/api/users/${userId}/posts`);
  const followers = await fetch(`/api/users/${userId}/followers`);
  const following = await fetch(`/api/users/${userId}/following`);
 
  // 4번의 HTTP 요청, 많은 불필요한 데이터 포함
  return { user, posts, followers, following };
}
 
// GraphQL: 동일한 작업
async function loadUserProfile(userId) {
  const result = await fetch('/graphql', {
    method: 'POST',
    body: JSON.stringify({
      query: `
        query UserProfile($userId: ID!) {
          user(id: $userId) {
            name
            avatar
            bio
            posts(limit: 10) {
              title
              createdAt
            }
            followerCount
            followingCount
          }
        }
      `,
      variables: { userId }
    })
  });
 
  // 1번의 요청, 필요한 데이터만 정확히 반환
  return result.data.user;
}

// GraphQL Code Generator 사용 예
// schema.graphql에서 자동 생성된 타입
import { GetPostQuery, GetPostQueryVariables } from './generated/graphql';
 
const { data } = useQuery<GetPostQuery, GetPostQueryVariables>(GET_POST_QUERY, {
  variables: { id: '1' }
});
 
// data.post는 완전한 타입 안정성 보장
console.log(data.post.title); // ✅ 타입 체크됨
console.log(data.post.nonExistent); // ❌ 컴파일 오류

// Apollo Client 캐싱 설정
import { InMemoryCache } from '@apollo/client';
 
const cache = new InMemoryCache({
  typePolicies: {
    Post: {
      fields: {
        comments: {
          merge(existing = [], incoming) {
            return [...existing, ...incoming];
          }
        }
      }
    }
  }
});
 
// 동일한 데이터를 참조하는 여러 쿼리가 자동으로 동기화됨

// DataLoader로 N+1 문제 해결
import DataLoader from 'dataloader';
 
const userLoader = new DataLoader(async (userIds) => {
  // 여러 userId를 한 번에 조회
  const users = await db.users.findMany({
    where: { id: { in: userIds } }
  });
 
  // userIds 순서에 맞게 정렬하여 반환
  return userIds.map(id => users.find(u => u.id === id));
});
 
// Resolver에서 사용
const resolvers = {
  Post: {
    author: (post) => userLoader.load(post.authorId)
    // 100개 게시글이 있어도 author 쿼리는 1번만 실행됨
  }
};

# GraphQL Subscription 예제
subscription OnCommentAdded($postId: ID!) {
  commentAdded(postId: $postId) {
    id
    content
    author {
      name
    }
  }
}

// 클라이언트에서 구독
const subscription = client.subscribe({
  query: ON_COMMENT_ADDED,
  variables: { postId: '1' }
}).subscribe({
  next: ({ data }) => {
    console.log('새 댓글:', data.commentAdded);
    // UI 자동 업데이트
  }
});

# 사용 사례별 분리
- GraphQL: 프론트엔드 애플리케이션용 (복잡한 쿼리)
- REST: 외부 API (간단한 공개 엔드포인트)
- REST: 파일 업로드/다운로드 전용
 
# 점진적 마이그레이션
- 기존 REST API 유지
- 새로운 복잡한 기능은 GraphQL로 구현
- Apollo의 RESTDataSource로 REST → GraphQL 래핑

# 상품 목록
GET /api/products?page=1&limit=20
 
# 상품 상세 (5번의 요청 필요)
GET /api/products/123
GET /api/products/123/reviews
GET /api/products/123/related
GET /api/sellers/456  # 판매자 정보
GET /api/categories/789  # 카테고리 정보
 
# 장바구니
POST /api/cart/items
GET /api/cart
DELETE /api/cart/items/1

# 상품 상세 (1번의 요청)
query ProductDetail($id: ID!) {
  product(id: $id) {
    id
    name
    price
    images
    seller {
      name
      rating
    }
    category {
      name
      breadcrumb
    }
    reviews(first: 10) {
      rating
      comment
      author {
        name
      }
    }
    relatedProducts(limit: 5) {
      id
      name
      price
      thumbnail
    }
  }
}
 
# Mutation으로 장바구니 관리
mutation AddToCart($productId: ID!, $quantity: Int!) {
  addToCart(productId: $productId, quantity: $quantity) {
    cart {
      items {
        product {
          name
          price
        }
        quantity
      }
      totalPrice
    }
  }
}