NestJS Graphql 활용하기

graphql 활용하여 api만들어보기

문서 소개글을 먼저 보자면,

GraphQL은 API를 위한 강력한 쿼리 언어이며 기존 데이터로 이러한 쿼리를 수행하기 위한 런타임입니다. 이것은 REST API에서 일반적으로 발견되는 많은 문제를 해결하는 우아한 접근 방식입니다. 배경을 위해, 우리는 GraphQL과 REST 사이의 이 비교를 읽는 것을 제안한다. TypeScript와 결합된 GraphQL은 GraphQL 쿼리를 사용하여 더 나은 유형 안전성을 개발할 수 있도록 도와주며, 종단 간 타이핑을 제공합니다.

이렇다고 하는데,

많은 내용들이 있지만 간단히 이야기 해보자면,
데이터를 선별하여 가져올 수 있다는 장점이 가장 커보인다.
여러번 호출하여 가져올 데이터들을 한번의 호출로 가져올 수 있다.

그렇지만, 구조가 복잡해진다는 단점이 있고, 용어가 기존의 용어와 달라서 배우는데 시간이 좀 걸린다는 단점도 있다.

프로젝트의 규모에 맞게 선택하여 사용할 필요가 있어보인다.

그러면 REST API에서 Graphql로 어떻게 넘어갈 수 있을까.

일단 AppModule에서의 모습이다. 가장 큰 차이점이라면 GraphQL모듈이 따로 추가됐다는 것이다. 이를 위해 먼저 필요한 모듈을 install해준다.

기존의 컨트롤러가 리졸버라는 이름으로 바뀌게 되고, Get, Post등이 Query와 Mutation으로 바뀐다. get은 query와 같은 의미로 생각하면 되고, post, patch, delete등은 mutation으로 작성해준다.

그러면 query옆의 ()=>String은 무엇일까?

graphql은 playground라는 실행환경을 제공하여 주는데, postman이나 insomnia같은 느낌이라고 생각하면 된다. 이 안에서는 내가 만든 api들을 요약하여 확인 할 수도 있다.

url에 http://localhost:8080/graphql? 같은 방식으로 graphql?만 더해주면 된다.

그럼 다시 돌아가서 () =>String 은 무엇이냐면,
graphql에게 알려주는 부분이라고 생각하면 된다.
저 Query는 String값을 반환해줄것이다 라는 뜻이다. (타입스크립트 처럼)

재밌는 점은 entity의 배열([ ])을 표현할때 Podcast[]라고 하지않고
[Podcast]로 감싸주어야 한다는 것이다.

그리고 기존의 @Body나 @Param대신 @Args()를 사용하여
받아오는 데이터의 이름을 입력해주면 된다. ex) @Args('id)

다음은 entity의 모습이다.
이 역시 graphql을 위한 데코레이터가 추가되었을 뿐이다.
@ObjectType()으로 지정하면 entity를 정의해 줄 수 있고,
@Field()는 각각의 변수등을 지정해준다. 안쪽의 ()=>String은 그 변수의 데이터유형을 알려준다.

여기서 dto(data transfer object)의 개념이 추가되는데,
dto는 쉽게 말해서 entity를 가지고 요리할때(post나 patch 등) entity자체를 가지고 하지않고, 필요한 부분만 떼서 요리하는 느낌으로 사용한다.
그니까, dto는 entity라는 재료에서 필요한 부분만 떼온 부분재료이다.

그래서 이처럼 create와 update가 나뉘는 모습을 볼 수 있다.( 두개의 함수가 필요한 재료가 다를 수 있으니까)

dto의 모습은 entity와 같지만 @ObjectType이 @InputType으로 달라진 모습을 볼 수 있다. 간단히 생각하면 우리가 입력(input)해야 되니까 input으로 바뀌었다고 생각하면 쉽다.

리졸버와 서비스 구현 화면이고, playground에서 확인해보면

postPodcast Mutation을 실행한 모습이다.

그 후에 fetchAll로 입력한 데이터를 불러온 모습이다.

중요한점은 데이터를 불러올때도 (fetchAll임에도 불구하고!) 모든 데이터를 불러 오지 않는다는점이다. 필요한 데이터만 선별하여 불러올 수 있다. (굿..)