[Apollo] apollo codegen 에서 env사용하기.

지금 진행 중인 project가 크게 typescript , nextjs, graphql, apollo client를 사용해 진행중이다.

 

생각보다 nextjs와 apollo client에서 많이 막히게 된다..

 

기본적으로 둘에대한 국내 reference가 별로 없다. 전부 stackoverflow또는 해외 it community가 전부이다.

 

근데 검색하고 하다보면 역시 공식문서가 짱이다.. 그렇게 생각하고 공식문서를 열심히 보면 또 extends된 기능들이나

 

공식문서 만으로는 해결이 안되는 문제들이 많다.. ㅠㅠ

 

첫번째로 최근에 경험 했던 간단한 에러를 살펴보겠다.

 

먼저 필자는 공식문서에 나온 apollo:codegen을 기본적으로 사용하고 있고

 

부가적으로 graphql-codegen도 사용중에 있다.

여기에서 backend API를 지정해주면 apollo:codegen & graphql:codegen이 실행되면

 

backend에 설정된 api의 dto들을 가져온다.

기본적인 설정을 한 후의 apollo:codegen을 실행시 가져온 dto이다.

이번엔 graphql:codgen을 실행한 결과물이다.

 

apollo:codegen읜 해당 query나 mutation의 dto만 가져오는 반면

graphql:codegen은 custom hook을 생성해 주기 까지 한다.. 근데 쿼리별로 split해서 저장하는 방법을 모른다..

그래서 가독성이 좋은 apollo:codegen을 사용하고 있다.

 

근데 이걸 초기에 설정할 때 api주소를 설정해줘야 하는데 그대로 노출 시키면 안되니 환경변수로 입력해주었다.

 

여기서 생긴문제가.. 바로

 

Error: Error initializing Apollo GraphQL project "myproject": Error: Error in "Loading schema for myproject": TypeError: Cannot read property 'startsWith' of undefined

 

뭔가 했다.. 이 에러에 대한 정보도 많지 않아 이것저것 건들다 보니 url을 환경변수로 넣으니 못읽는 거였다...

 

 

해결과정은 쓰지 않겠다 간단히 해결된다.

 

현재 cross-env를 쓰고있는데 여기서 해결법은 모르겠고

dotenv를 설치후 apollo.config.js에서 detenv를 import해주고 해당 path를 지정해 주면 된다.

 

 

 graphql:codegen도 마찬가지이다.

 

graphql:codegen은 해당 config file에서 설정하지 않고 package.json의 scripts 명령문에 추가해줬다.

 

이렇게 해주니 해결이 되었다..

 

혹여나 apollo client사용하시는 분들에게 작은 도움이나마 되길 바란다