NestJS devtools 사용하려다 GraphQLModule 설정 바꾼 스토리

yujuck·2023년 5월 11일
0

NestJS 9.3.0 버전부터 devTools 지원하니까 버전 업데이트 하면 좋을 것 같다는 얘기에 버전 업그레이드를 진행했다.
NestJS에서 GraphQL을 같이 사용하고 있어 graphql의 버전도 같이 업데이트 해야하는 상황이였다.

1. 패키지 업데이트

yarn을 사용하고 있어 다음의 명령어로 업데이트를 진행하였다.

yarn upgrade-interactive

yarn upgrade-interactive 명령어는 yarn outdated와 yarn upgrade를 조합한 커맨드라고 생각하면 된다.
실행하면 설치되어있는 패키지들중에서 업그레이드를 하고 싶은 패키지를 선택하여 업그레이드를 진행할 수 있다.

공식 문서를 보면

async function bootstrap() {
  const app = await NestFactory.create(AppModule, {
    snapshot: true,
  });
  await app.listen(3000);
}

snapshot을 추가할 수 있어야하는데 nest의 버전이 낮으면 해당 부분에서 오류가 발생해서
@nestjs/core 등 주요 패키지의 업데이트를 진행했다.

2. @nestjs/devtools-intergration 설치

devtools를 사용하기 위해서는 위 패키지를 설치해줘야한다.
여기서 조금 문제가 있었는데, 계속 위 패키지를 설치하려고 하면 사내 npm 패키지 저장소를 참조하는 것이었다..
공식문서에서 말하는 것처럼 @nestjs/graphql@11 로 설치를 해도 잘 안되서 그냥 @nestjs/graphql 삭제 후 다시 설치한 다음에
다시 @nestjs/devtools-intergration 설치를 시도했는데 잘 넘어갔다!

3. graphql 관련 패키지들 업그레이드의 사이드이펙트(?)

@nestjs/graphql 패키지를 10.1.7에서 11.0.5로 업데이트를 하고 나니
GraphQLModule.forRoot의 첫번째 인자로 전달하는 options 타입인 ApolloDriverConfig가 변경이 되었는지,
기존에 사용하던 cors와 debug 필드가 오류를 발생하고 있었다..
어떻게 변경되어서 어떻게 사용해야하는지 열심히 찾아봐야하는 상황..!

cors

cors 관련 내용은 nestjs/graphql 레포지토리의 issues에서 발견하게 되었다.
Nestjs에서 graphql 사용할 때에는 GraphQLModule에 따로 적어줬어야 했는데 이제는 Nestjs/common에서 제공해주는 enableCors()를 같이 사용하면 된다고 한다.

const app = await NestFactory.create(AppModule);

app.enableCors({
    origin: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    credentials: true,
  });

debug

이 옵션은 요청에서 오류가 발생했을 때 response로 stacktrace를 전달해줄지에 대한 옵션이였다.
클라이언트에게 stacktrace까지 제공하는 것은 일반적을 권장되지 않는다 하여 debug: false로 사용하고 있었는데 이 옵션이 사라져버렸다..!!
아무리 검색을 해도 안나오고(ㅠㅠ) ApolloDriverConfig 타입을 봐도 못찾은 상황에서
그래 없을리가 없지..! 하고 다시 천천히 ApolloDriverConfig에서 extends하고 있는 타입들을 살펴보니 눈에 띄는 필드가 하나 발견되었다.
바로 includeStacktraceInErrorResponses!

굉장히 직관적인 이름으로 변경이 되어있었다ㅋㅋㅋㅋㅋ
다행히 잘 찾아내서 추가해주니 이전과 동일하게 stacktrace는 제거가 잘 되었다.. 휴..

결말

변경 후 devtools는 어떻게 사용하는거지? 싶어서 다시한번 공식문서를 읽어보았다.
snapshot 추가하고 DevtoolsModule 추가해주고 하면 사용할 수 있는 줄 알았는데
https://devtools.nestjs.com/ 을 들어가서 로그인을 하니까 유료였다.....
그냥 쓸 수 있는 줄 알고 바꾸자고 하셨던 것 같은데 알고보니 유료ㅠㅠ
결국 devtools 사용은 안하는걸로 하고 어쩌다보니 nestjs 버전 업데이트와 graphql 버전 업데이트만 진행하게 된 슬픈지만 좋은 결말..?

이상 만약 우리처럼 위의 옵션을 사용하고 있다가 업데이트 하고 보니 사라져서 어떻게 해야하나 싶은 분들을 위해 남기는 글이였습니다..

profile
알게 된 내용 부담 없이 남기기

0개의 댓글