GraphQL은 API에 대한 강력한 쿼리 언어 및 런타임을 제공하며, 스키마는 해당 API의 기본 구조를 정의합니다. 타입스크립트와 GraphQL을 함께 사용할 때, 스키마의 변경 사항을 모니터링하고 싶을 수 있습니다. 이를 통해 애플리케이션에 대한 더 나은 안정성과 신속한 문제 해결이 가능해집니다.

1. GraphQL Code Generator를 사용한 타입스크립트 스키마 모니터링

GraphQL Code Generator를 사용하면 타입스크립트에서 GraphQL 스키마를 모니터링하기 편리해집니다. graphql-codegen 패키지를 사용하여 API 스키마를 기반으로 타입 정의를 생성할 수 있으며, 이를 통해 스키마 변경 사항에 따라 타입스크립트 코드를 업데이트할 수 있습니다.

먼저, 프로젝트에 @graphql-codegen/cli 패키지를 설치합니다.

npm install @graphql-codegen/cli

그런 다음, codegen.yml 파일을 작성하여 필요한 설정을 지정합니다.

schema: http://example.com/graphql
documents: ./src/**/*.graphql
generates:
  ./src/types/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-graphql-files-modules
    config:
      skipTypename: true

마지막으로, 아래 명령어를 사용하여 코드 생성을 실행합니다.

npx graphql-codegen

이제 타입스크립트 코드를 안전하게 업데이트할 수 있게 되었습니다. 스키마 변경에 따라 자동으로 타입 정의가 갱신되므로, 코드 일관성과 안정성을 유지할 수 있습니다.

2. 타입스크립트와 GraphQL Inspector를 활용한 스키마 변경 사항 감지

또 다른 방법으로는 GraphQL Inspector를 사용하여 스키마 변경 사항을 감지하고 타입스크립트 코드를 업데이트할 수 있습니다. 아래 단계를 따라 진행합니다.

1. 먼저, 프로젝트에 @graphql-inspector/cli 패키지를 설치합니다.

npm install @graphql-inspector/cli

1. 타입스크립트 파일과 GraphQL 스키마 파일을 감시하고 싶은 디렉토리에 다음 명령어를 실행하여 변경 사항을 감지합니다.

npx graphql-inspector watch ./src/schema.graphql --handler codegen --codeHandler <your-codegen-command>

위 명령어에서 <your-codegen-command> 부분에는 코드를 자동으로 업데이트하는 커맨드를 입력해야 합니다. 예를 들어, npx graphql-codegen을 사용하여 타입스크립트 코드를 업데이트하는 커맨드를 입력할 수 있습니다.

이제 타입스크립트에서의 GraphQL 스키마 모니터링을 통해 코드 일관성을 유지하고 안정성을 높일 수 있게 되었습니다.

이러한 방법을 통해, 타입스크립트와 GraphQL을 함께 사용할 때 스키마 변경에 대한 안정적인 대응이 가능해집니다. 코드 일관성과 안정성을 유지하면서 API에 대한 변경 사항을 신속하게 반영할 수 있습니다.

참고 자료:

• GraphQL Code Generator
• GraphQL Inspector
• 타입스크립트로 GraphQL 서비스 생성하기