使 React Query 在错误时返回以前的数据答案

【问题标题】：Make React Query return previous data on error使 React Query 在错误时返回以前的数据
【发布时间】：2021-05-21 11:30:12
【问题描述】：

React Query 有没有办法在发生错误时返回以前的数据？现在，当出现错误时，所有帖子都会消失，并且我有空白页面，因为数据未定义但我想保留旧数据。发生错误时我想拥有旧数据。我有 keepPreviousData: true 但这并不能解决问题。

import React from 'react';
import AxiosClient from 'api/axiosClient';
import { createFetchResourcesAction } from 'api/actions/resources/resourcesActions';
import { Post, Resources } from 'api/actions/resources/resources.types';
import { Home } from './Home';

export const HomeContainer = () => {
  const { selectedPage, perPage, handlePageChange } = usePagination();

  const fetchResources = ({ pageParam = 1 }) =>
    AxiosClient.request<Resources<Post>>(createFetchResourcesAction(perPage, pageParam));

  const { data, isError, isFetching } = useQuery(
    ['resources', selectedPage, perPage],
    () => fetchResources({ pageParam: selectedPage }),
    { keepPreviousData: true },
  );

  return (
    <Home
      posts={data?.data.results}
      isLoading={isFetching}
      isError={isError}
      selectedPage={selectedPage}
      numberOfPages={Math.ceil(resolverNumberOfPages())}
      onPageChange={(action, value) => handlePageChange(action, +value)}
    />
  );
};

Home.tsx

import React from 'react';
import { useLocale } from 'hooks';
import { AppMessages } from 'i18n/messages';
import { Post } from './post/Post';
import { Box, Typography } from '@material-ui/core';
import { useStyles } from './Home.style';
import { HomeProps } from './Home.types';
import { Loader, ErrorMessage, Button } from 'ui';
import { Pagination } from 'ui';

export const Home = ({
  posts,
  isLoading,
  isError,
  numberOfPages,
  selectedPage,
  onPageChange,
}: HomeProps) => {
  const { formatMessage } = useLocale();
  const styles = useStyles();

  const handlePageChange = (page: number) => {
    onPageChange('page', page);
  };

  const postList = <>{posts && posts.map(post => <Post post={post} key={post.id} />)}</>;

  return (
    <Box className={styles.home}>
      <Box className={styles.main}>
        <Typography variant="h2" className={styles.title}>
          {formatMessage({ id: AppMessages['home.allEntries'] })}
        </Typography>
        <Box className={styles.postsWrapper}>
          {posts && posts.length < 1 && !isError && !isLoading && (
            <Typography variant="h3" className={styles.genericMessage}>
              {formatMessage({ id: AppMessages['home.noEntries'] })}
            </Typography>
          )}
          {postList}
          {isLoading && <Loader position="fixed" width={60} height={60} />}
          {isError && (
            <ErrorMessage position="top" description={formatMessage({ id: AppMessages['home.errorLoadingEntries'] })} />
          )}
          {isDesktop && numberOfPages > 1 ? (
            <Pagination numberOfPages={numberOfPages} selectedPage={selectedPage} onPageClick={handlePageChange} />
          ) : (
           nyll
          )}
        </Box>
      </Box>
    </Box>
  );
};

createFetchResourcesAction.ts

import { AxiosRequestConfig } from 'axios';

export const createFetchResourcesAction = (perPage: number, page: number): AxiosRequestConfig => {
  return {
    method: 'get',
    url: /resources?per_page=${perPage}&page=${page},
  };
}

【问题讨论】：

标签： reactjs axios react-query

【解决方案1】：

据我所知，如果查询从成功状态变为错误状态，react-query 不会从缓存中删除任何数据。如果您的缓存中有data，您将得到它，即使之后查询出错。所以这是一种可能的状态：

{ state: 'error', isError: true, data: { json from previous successful response }}

【讨论】：

但是我如何才能访问以前的成功响应？
通过 useQuery 返回的data 属性
当我遇到 403 时在我的 fetch helper 中抛出错误后，数据对我来说是未定义的
如果分页 API 失败并且不保留以前的数据，我也会得到未定义的数据。似乎此功能不支持 API 故障场景。