Apollo client를 이용한 query 재요청

JH.P·2022년 4월 18일
0
  • useQuery를 이용하여 서버로부터 받아온 데이터를 배열 state에 갱신하여 렌더링하였다.
  • 목록 중 한 요소를 클릭하고, 뒤로가기를 눌러 리스트로 돌아오면 리스트가 정상적으로 출력되지 않고 에러가 발생했다.
    • Apollo client는 여러번 요청을 보내지 않고, cache에 저장해두기 때문이다.
  • 따라서 뒤로가기 시에도, 즉 컴포넌트가 렌더링 될 때마다 요청을 보내고 싶어서 많은 방법을 고민했다.(useEffct를 이용한 refetch, 조건문을 활용한 새로고침 등등)
  • 그 중 가장 좋은 방법은, apollo.js에서 해당 옵션을 추가해주는 것이였다.
 defaultOptions: {
    watchQuery: {
      fetchPolicy: 'network-only',
    },

해당 옵션을 추가해주면 캐시데이터에 관계없이 무조건 서버에 데이터를 요청하고 캐시 데이터를 업데이트한다.

참고링크
https://crmrelease.tistory.com/61

profile
꾸준한 기록

0개의 댓글