[Apollo] useLazyQuery & fetchPoricy

음 이번 포스팅은 react로 할지 graphql로 넣을지 고민하다가... 어짜피 apollo client의 useLazyQuery를 사용하게된게 포스팅의 주 목적이니 graphql로 섹션을 잡았다.

 

자 보통 버튼 클릭이 일어났을 때 api로 부터 data를 fetching 한다면 당연히 이벤트 callback에서 fetch해서 가져오면 된다

callback 밖에 있다면 버튼 클릭시가 아니라 그냥 input의 데이터가 변화되면서 재 랜더링 될때마다 계속 fetching을 하기에 불필요하다 매우!

 

그런데 여기서 한가지 문제가 발생했다. 지금 사용하는 useQuery의 경우 공식문서에 따르면 

useQuery hook은 component가 mount && render될 때 이미 Apollo Provider가 감싸고 있으므로 apollo client가 자동으로 실행이 된다. 그렇기 때문에 이미 랜더가 될때 hook은 역할을 수행을 하고있고 callback이 이루어지기 전에 이루어지므로 에러가 발생하는게 당연하다. 자 한번 보자

이렇게 에러가 뿌부부붐! 나온다.

 

그럼 어떻게 써야하나?! watch를 하고 있다가 그냥 매번 감지를 해줘야 하나? 그래서 버튼을 눌렀을 시점의 데이터를 모달로 띄워줘야하나?! 많은 고민이 있었으나  역시 공식문서가 갑이다.

 

바로 useLazyQuery를 사용 하면 되는데...

https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery

Hooks

useLazyQuery는 useQuery와 생김새는 비슷하나 return하는 값이 다르다.

const [executeFunction, {data,loading,error, refetch}] = useQuery(QUERY, {});

이런 식으로 쓰이고 바로 저기 나온executeFunction을 callback함수에 넣어서 사용하면 된다.  이름도 실행 함수이다.

실제 fetching을 해주는 함수!

자 그럼 실제 적용을 해보자

자 제대로 적용이 되었다! ok ! console창에 찍을땐 callback함수를 async await을 해주자 안그럼 callback이 끝났더라도 data 값은 undefined 된다.

 

이렇게 하나가 또 해결 되었고 하나를 배웠다! 

그리고 한가지 더 상기에 적힌 fetchPolicy에 관한 것인데

apollo에서 제공해주는 fetching 정책이다. 기본적으로 apollo의 useQuery를 쓰는 이유는 caching기능이 아주 좋아서 이다.

이는 아직 정확히 테스팅이 되진 않았지만 redux를 대체할 수 있는 useSwr과 같은 역할이다.

caching에 관한 것은 차후 포스팅 하고

요점은 default가 cache-start인데 이미 한번 보낸 쿼리의 값이 있고 그 값이 이전에 보낸 쿼리 즉 캐싱된 쿼리와 동일 하다면

data도 caching된 data를 사용하게 된다.

이게 문제가 되는게 즉각적으로 다시 fetch를 해야하는 경우 중복체크같은 유저가 이미 중복체크를 했더라도 다시 같은 것으로 할 수 도 있고 아무튼 문제가 될 것 같더라... 그래서 지금 작성중인 button에서는 policy를 network-only로 적용해서

클릭 될 때 마다 매번 fetching 하는 것으로 했다

 

물론 데이터의 양이 많다면 network-only는 매우 비효율 적이다. cache된 값을 쓰지 않기 때문에...

지금 버튼은 그냥 ok가 true or false인지만 확인하는 절차이기에 network-only로 바꿔주었다.

 

apollo의 fetchPolicy에 관한 공식 문서도 참고하자

https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy

Queries