react-query에서 오류가 발생한 cache만 삭제하는 법

QueryCache에서 error response body를 캐싱하지 않도록 하자.

useEffect(() => {
  const errorsKeys = queryClient.getQueryCache()
                                .getAll() // react-query의 query cache에서
                                .filter(q => q.state.status === 'error') // error를 캐싱한 것만 골라
                                .map(e => e.queryKey); // queryKey만 뽑아낸다

  return () => {
    queryClient.invalidateQueries(errorsKeys); // API Error 모달이 닫힐 때, 캐싱된 error response만을 삭제한다
  };
}, [queryClient]);

20220419