React Query - Don't clear previous data on error

Question

Is it possible to make React Query to not clear data when error?

async function loadList(payload, signal) {
  const response = await http.get(`/users-with-permissions?q=${payload}`, {
    signal,
  });

  return response.data;
}
export function useUserLists(payload) {
  const [displaySnackbar] = useSnackbar();

  return useQuery(
    [BASE_KEY, payload],
    async ({ signal }) => await loadList(payload, signal),
    {
      keepPreviousData: true,
      refetchOnWindowFocus: false,
      enabled: Boolean(payload),
      retry: false,
      staleTime: minutesToMilliseconds(5), // will be stale on 5 mins
      onError: error =>
        displaySnackbar('error', `Error: ${error.response.data.message}`),
      onSuccess: response =>
        response.map(item => {
          item.initials = getInitials(item.name);

          return item;
        }),
    },
  );
}```

I have this code, but everytime the `loadList` is return `404` RQ will clear prev data even though I set to keep prev data.

Answer 1

I'm not sure how good this idea is, so use on your own risk, but you can do something like that:

  const query = useQuery(
    ['post', post],
    () => {
      return axios
        .get(`https://jsonplaceholder.typicode.com/posts/${post}`)

        // Catch an error in your fetcher function and return previous data here
        .catch((error) => {
          if (error.response.status === 404) {
            return query.data;
          } else {
            throw error;
          }
        });
    },
    {
      // Use this flag too, otherwise previous data will not be available
      keepPreviousData: true,
      retry: false,
      
      // OR you could use onError handler of react-query to directly modify the cache
      onError(error) {
        if (error.response.status === 404) {
          queryClient.setQueryData(['post', post], query.data);
        }
      }
    }
  );