GraphQL - [ useQuery & useLazyQuery ]

 

🌸 TIL

 

 

 

이번에 회사에서 담당하는 프로젝트에 전부터 사용해보고 싶었던 GraphQL을 적용해보았다.

처음 사용해보기 때문에 아직까지는 좋은 퍼포먼스를 보일 수 없지만 단시간에 공식문서를 보며 빠르게 적용할 수 있다는 것도 큰 장점이라 생각한다.

 

서버에서는 어떤식으로 typeDefs를 설계하고, resolvers는 어떤식으로 작성이 되는지 간단하게나마 이해하고 client와 server를 직접 구현하여 한 싸이클을 타보는 것도 좋을 것 같아서 처음에는 서버는 Node를, 클라이언트는 React를 사용하여 간단한 예제를 만들어보았었다.

 

간단한 예제를 만들어보면서 서버와 클라이언트의 흐름을 파악하고 나니까 실제 서비스에 적용하는 시간도 절약되었고, 이해도 더 빠르고, 백엔드 개발자분들과의 소통도 좀 더 원활하게 진행할 수 있게 되어 협업에 도움이 되었다.

 

GraphQL은 공식문서도 잘 되어있고, 검색하면 좋은 자료들이 많이 나와서 다루는 법에 대한 설명은 생략하고, GraphQL을 사용하면서 처음이다보니 헷갈렸던 몇가지를 정리해나갈 예정이다.

 

 

---

 

 

👉 useQuery와 useLazyQuery의 차이점 👈

 

간단한 예시로 다음과 같은 클라이언트 코드가 있다.

 

 

 

 

GET_GREETING이라는 query가 있고, 버튼을 클릭했을 때, loadGreeting 함수가 실행하면서 useQuery로 서버에 있는 message를 가져오려고 한다.

 

하지만 다음과 같은 에러가 나는 것을 볼 수 있다.

 

 

useQuery는 콜백함수 안에서 사용할 수 없기 때문인데 이에 대한 설명은 공식문서에 다음과 같이 나와있다.

 

 

 

 

useQuery는 컴포넌트가 Mount, Render 될 때, apollo client가 자동으로 실행하기 때문에 에러가 나는 것이다.

useLazyQuery는 컴포넌트가 Render 될 때가 아닌 어떠한 이벤트에 대해 Query를 실행하게 해주기 때문에 위와 같은 경우에는 아래와 같이 코드를 작성해주어야 에러가 나지 않는다.

 

 

💻 브라우저 콘솔 확인

 

getGreeting의 message에 서버에 저장해두었던 데이터가 들어오는 것을 확인할 수 있다.

 

위에서 확인했듯이 useQuery와 useLazyQuery는 return하는 값도 다르다 !

useQuery는 query에 대한 결과를 응답해주고, useLazyQuery는 결과 + 쿼리를 실행할 수 있는 함수를 return해 준다.

 

 

 

 

---

 

 

마치며 🌸

 

아직까지는 많은 API를 GraphQl로 구현해보지 않아서 사용했을 때의 장점은 크게 와닿지는 않는다.

 

지금까지 써보면서 느꼈던 GraphQl의 강점을 정리해보자면

 

1. 필요한 정보들만 선택하여 받아올 수 있다.

• OverFetching 문제 해결 가능
• 데이터 전송량 감소

2. 여러 정보들을 한번에 받아올 수 있다.

• UnderFetching 문제 해결 가능
• 요청 횟수 감소

3. 하나의 EndPoint 에서 모든 요청을 처리할 수 있다.

• 하나의 URL에서 POST로 모든 요청 처리가 가능

앞으로 좀 더 깊이있게 사용하게 된다면 더 많은 장점들을 알 수 있을 것 같고 단점 또한 느껴볼 수 있을 것 같다.