GraphQL Interface 자동생성으로 빠르게 프론트엔드 개발하기
프론트엔드
GraphQL Interface 자동생성으로 빠르게 프론트엔드 개발하기
두줄요약
GraphQL 스키마를 기반으로 Apollo Codegen에서 TypeScript 인터페이스를 자동 생성하는 방법을 소개했습니다. JSON 스키마를 분석해 프로젝트 요구에 맞는 생성 로직으로 확장하는 방향도 설명합니다.
구조와 흐름
- Django와 Graphene-Django의 Query·Mutation·Type 정의를 GraphQL 스키마로 노출
graphql_schema명령으로schema.graphql과 JSON 스키마 생성- 프론트엔드 쿼리·뮤테이션 정의와 스키마 기반 타입 정보 연결
해결 방법
- Apollo Client Codegen으로 GraphQL 쿼리·뮤테이션 유효성 검사와 TypeScript 인터페이스 자동 생성
apollo.config.js의 GraphQL 문서 경로와 로컬 스키마 파일 설정- JSON 스키마의
types정보 추출을 통한 원하는 클래스·로직 형태의 커스텀 생성 기반
선택 이유
- API 변경이 잦은 초기 개발 단계의 수동 인터페이스 수정 부담 감소
- 백엔드 스키마를 프론트엔드 타입 정의의 기준으로 활용
주의할 점
- Apollo 생성 타입의 긴 이름과 camelCase·snake_case 혼재
- 자동 생성 파일 직접 수정 불가와 도구 범위 내 커스터마이징 제약
