[GraphQL] GraphQL 정의, 테스트 #1

☘️ 시작하며...

요즘 GraphQL에 대해 많은 관심이 있으며 인기가 갈수록 높아지고 있다. 

실제로 GraphQL를 사용하는 회사에는 페이스북, 깃허브, 핀터레스트, 에어비앤비 등이 있다고 한다.

 

그래서 GraphQL가 무엇인지 공부해보고 싶어 노마드코더에 있는 GraphQL 강의를 듣게 되었다. (무료 강의!!!!)

 

GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders

 

---

 

☘️ GraphQL 이란?

Rest API 단점

GraphQL은 Rest API의 단점을 해결하기 위해 만들어졌다.

그러면 Rest API의 단점은 무엇일까? GraphQL 홈페이지를 살펴보면서 알아볼 것이다.

 

첫 번째, over-fetching

당신이 필요한 것을 요청하고, 딱 그것만 받으세요 

 

즉, GraphQL은 Rest API의 over-fetching의 문제점을 해결하고 있다. Rest API의 단점은 내가 필요한 데이터에 비해 너무 쓸데없는 데이터도 같이 받고 있다는 것이다.

 

실제로 최근에 한 운동 메이트 매칭 프로젝트이며, 게시물의 전체 목록을 보여주는 데이터인데 프론트엔드에서 보여줄 데이터 이외에도 많은 부분이 있다.(api 문서 캡쳐함)

실제 프론트엔드 코드를 보면 내가 사용한 데이터는 요청받은 데이터의 일부분이다.

이처럼 필요 이상의 데이터를 받게 된다면, 데이터를 주는 곳의 백엔드, 데이터베이스가 더 많은 일을 해야한다.

 

이러한 over-fetching 의 문제를 GraphQL가 해결해준다.

바로 GraphQL는 url로 모든 데이터를 즉시 요청하지 않고, 필요한 데이터를 요청한다.

 

두 번째, under-fetching

Rest API를 사용하다 보면 불충분한 데이터를 받게 되어 API 요청을 두 번 이상 해야 될 상황이 발생한다.

 

아래 코드도 내가 최근에 한 운동 메이트 매칭 프로젝트이다.

해당 페이지는 홈 페이지 화면인데 한 화면에 게시물 목록, 이번주 운동 기록, 내 주변 운동 메이트, 내 정보

이렇게 4가지의 정보를 보여주다 보니 API 호출을 무려 4번이나 했다...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이렇게 되면 로딩 시간이 길어지고 한 화면에서만 요청을 4번 하다보니 백엔드쪽에서도 서버 비용 부담 등이 될 수 있다.

 

하지만, graphQL은 많은 리소스들을 하나의 요청으로 받을 수 있다.

 

GraphQL 테스트

그럼 이 graphQL이 어떻게 생겼고, 어떻게 사용하는 지 알아볼 것이다.

 

해당 페이지에서 graphQL을 직접 사용해보고 테스트할 수 있다.

SWAPI GraphQL API

해당 웹 페이지에 들어가고 도큐먼트 버튼을 클릭한 후, Root 를 누르면

내가 요청할 수 있는 데이터들을 볼 수 있다.

이 중 allFilms에서 어떤 데이터를 받을 수 있는지 보기 위해서 FilmsConnection을 클릭한다.

여기서 만약에 totalCount를 받고 싶으면, 아래와 같이 작성하면 내가 딱 원하는 totalCount 데이터만 받아,

불필요한 데이터까지 더 받지 않았다.

즉, Rest API의 over-fetching의 문제점을 해결한 것을 알 수 있다.

그 외에도 films의 배열 정보를 가져오고 싶다면 [Film] 을 클릭해 원하는 데이터를 찾아 요청한다.

그래서 아래와 같이 작성하면 내가 작성한 데이터만 딱 받은 것을 볼 수 있다.

allFilms 이외에도 allPeople도 가져올 수 있어

api요청을 여러 번 하는 Rest API의 under-fetching의 문제점을 해결할 수 있다.

☘️ 마무리 하며...

이번 게시물을 작성하면서 graphQL에 대해 알게 되었다.

지금은 간단하게 테스트만 해봤는데 너무 신세계다ㅠㅠㅠㅠㅠ
REST API의 단점을 해결해줘 진짜 내가 필요한 데이터만 딱딱 요청하면 보내주는 것이 신기하고 효율적이라고 생각이 든다.

나중에 graphQL을 사용하여 프로젝트를 해보고 싶다!!!!