1. GraphQL 기본 개념

GraphQL은 API를 위한 쿼리 언어이며 기존 REST API의 한계를 극복하기 위해 Facebook에서 만들었습니다.

주요 특징:

1. 단일 엔드포인트: 모든 요청이 하나의 엔드포인트로 이루어집니다 (이 프로젝트에서는 /graphql)
2. 필요한 데이터만 요청: 클라이언트가 필요한 데이터만 정확히 지정하여 요청할 수 있습니다
3. 타입 시스템: 강력한 타입 시스템을 제공하여 API의 형태를 명확하게 정의합니다

2. Apollo Client

Apollo Client는 GraphQL을 프론트엔드에서 사용하기 위한 완벽한 상태 관리 라이브러리입니다.

주요 기능:

1. 캐싱: 서버에서 받은 데이터를 자동으로 캐싱
2. 로컬 상태 관리: 전역 상태 관리 가능
3. 에러 핸들링: 네트워크 오류 등을 쉽게 처리
4. 로딩 상태 관리: 데이터 로딩 상태를 쉽게 처리

3. GraphQL Codegen

GraphQL 스키마로부터 TypeScript 타입과 React Hook을 자동으로 생성해주는 도구입니다.

주요 설정:

generates: {
  // TypeScript 타입 생성
  './src/gql/types.ts': {
    plugins: ['typescript', 'typescript-operations']
  },
  // React Hook 생성
  './src/gql/output.ts': {
    plugins: ['typescript-react-apollo']
  },
  // 목업 데이터 생성
  './src/gql/mockDataTemplate.ts': {
    plugins: ['typescript-mock-data']
  }
}

4. 실제 사용 예시

GraphQL 쿼리 예시:

query GetUser {
  user {
    id
    name
    email
  }
}