프론트엔드
핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기
두줄요약
MSA 환경의 복잡도를 줄이기 위한 GraphQL 기반 BFF 구조와 프론트엔드 활용 방식을 소개했습니다.\nApollo 캐시 키 충돌 해결과 BFF 도입에 따른 운영 복잡도도 함께 짚었습니다.
문제 상황
- MSA 확대로 분산된 엔드포인트, 플랫폼별 인증·정책, CORS 대응에 따른 프론트엔드 복잡도
- 백엔드 API 스펙 변경과 다중 서비스 호출로 인한 프론트엔드 의존성 및 소통 비용
구조와 흐름
- NestJS·Fastify 기반 BFF에서 Apollo Server로 여러 마이크로서비스 데이터를 단일 GraphQL 스키마로 통합
- Apollo Client의 선언적 query·mutation, InMemoryCache 정규화 캐시, graphql-codegen 기반 TypeScript 타입 생성
- BFF 단일 진입점에서 데이터 집계·가공과 인증·인가·로깅·CORS 정책 처리
선택 이유
- GraphQL 쿼리 기반 자동 타입 생성과 생성된 React 훅을 통한 타입 안정성·개발 생산성 확보
- BFF 응답 매핑을 통한 백엔드 스펙 변경의 프론트엔드 영향 최소화
- 필요한 데이터만 요청하고 다중 API 호출을 줄이는 통신 구조
주의할 점
- 기본
__typename:id캐시 키로 동일 id의RegistrationMember항목이 병합되어 UI에 같은 데이터가 표시된 사례 keyFields: ['id', 'idType', 'kycSeq']설정으로 복합 식별 키 적용- 추가 레이어로 인한 장애 지점, 배포·테스트·모니터링 범위 증가와 소규모·단일 플랫폼 프로젝트의 도입 필요성 검토
