2022-04-21_TIL

KRyun·2022년 4월 21일
0

TIL

목록 보기
30/36

updating ApolloClient Cache and lead to re-rendering

  • issue
  1. end user가 원하는 시기(event)에 data를 update 했을 때 cache의 데이터가 업데이트(삭제-> fetch)되는 작업에서 re-rendering이 안되는 문제.

  2. useQuery에서 제공하는 refetch() 함수를 통해 query를 재요청할 수 있지만, loading state를 변경하지는 않는다. => 사용자가 button을 통해 refetch()를 호출했지만 결과를 가져오기까지 로딩 화면이 없다면, 결과가 동일했을 시 refetch되었음을 알 수 없는 이슈
    ex) const {loading, error, data} = useQuery('someQuery');

  • solution

refetch가 시작되었을 때, re-render를 trigger 해줄 수 있는 툴을 제공: networkStatus
networkStatus 가 refetch 시에 변하는 것을 알기 위해서는 notifyOnNetworkStatusChange 옵션을 true로 지정.

const {loading, error, data, networkStatus} = useQuery(
	'someQuery", 
    { notifyOnNetworkStatusChange: true });
    

networkStatus가 '4'일 경우, re-fetch가 이뤄지는 중

const {loading, error, data, networkStatus} = useQuery(
	'someQuery", 
    { notifyOnNetworkStatusChange: true });

...

// loading status가 true이거나, refetch로 networkStatus가 4인 경우, <loading /> 컴포넌트 반환
if( loading || networkStatus === 4) return <loading />;

...
profile
신입 개발자입니다.

0개의 댓글