React Query - 不要清除以前的错误数据答案

【问题标题】：React Query - Don't clear previous data on errorReact Query - 不要清除以前的错误数据
【发布时间】：2022-08-04 05:49:15
【问题描述】：

是否可以让 React Query 在出错时不清除数据？


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.

标签： reactjs react-hooks react-query

【解决方案1】：

我不确定这个想法有多好，所以使用风险自负，但你可以这样做：

  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);
        }
      }
    }
  );

【讨论】：