How to clear only the error cache in react-query

Let’s make the QueryCache stop caching error response bodies.

useEffect(() => {
  const errorsKeys = queryClient.getQueryCache()
                                .getAll() // from react-query's query cache
                                .filter(q => q.state.status === 'error') // pick only the ones that cached an error
                                .map(e => e.queryKey); // and extract just the queryKey

  return () => {
    queryClient.invalidateQueries(errorsKeys); // when the API Error modal closes, delete only the cached error responses
  };
}, [queryClient]);

20220419