Apollo codegen globalTypes.ts 경로 변경하는 법 (Relative imports outside of src/ are not supported 에러)

문제 상황

apollo-cli로 graphQL 스키마를 이용해 typescript type을 생성한다. 생성한 타입 정의를 이용하기 위해 프로젝트 폴더/generated/globalTypes.ts 를 소스 파일에서 import 하고 yarn start로 시작하면

You attempted to import ../../../__generated__/globalTypes which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

와 같은 컴파일 에러가 발생한다

배경

create-react-app으로 생성된 리액트 프로젝트는 src/ 하위에 있는 module만 import할 수 있도록 제한한다.
그러나 apollo cli의 apollo codegen:generate 명령(또는 apollo client:codegen)은 기본 설정으로 src/가 아닌 프로젝트 폴더 바로 하위에 globalTypes.ts를 생성한다.
따라서 globalTypes.ts가 생성되는 위치를 src 하위로 바꿀 필요가 있다.

해결법

--globalTypesFile 옵션으로 globalTypes 파일이 생성되는 경로를 src 하위로 바꾼다.
즉 apollo codegen:generate --globalTypesFile=./src/graphQL/__generated__/globalTypes.ts 와 같은 형태로 codegen을 실행한다.

src 밖에 위치한 이전 globalTypes를 import하는 코드는 import 경로를 새로 생성된 src 하위의 globalTypes 파일 경로(예시에서는 src/graphQL/__generated__/globalTypes.ts)로 변경한다.

 

참고: apollo-cli github - client:codegen 명령 설명