尽管有 keepPreviousData，React Query 仍在继续获取

Question

我有一个 API 调用 returns 图像：

const [previewImg, setPreviewImg] = useState(1);

  const getImage = async (key) => {
    const { data } = await axios({
      method: 'get',
      url: `imageUrl/${key}/'name'`,
      responseType: 'blob',
    });
    return URL.createObjectURL(data);
  };

  const { data } = useQuery(
    ['image', previewImg],
    () => getSignatureImage(previewImg),
    {
      keepPreviousData: true,
    }
  );


return (
      <button onClick={() => setPreviewImg(previewImg + 1)}>
        MORE
      </button>
      <button onClick={() => setPreviewImg(previewImg - 1)}>
        LESS
      </button>
)

但是，一旦我回到以前的号码，就会重新获取，而我希望它使用缓存的数据，尤其是基于默认选项：

defaultOptions: {
    queries: {
      staleTime: 'Infinity',
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
    },
  },

这是否与返回由 blob 制作的图像 url 有关？

Answer 1

staleTime 选项应该是 Infinity 而不是 'Infinity':

staleTime: Infinity,

Infinity 是 a global value，不是 RQ 的一些配置字符串。

尽管有 keepPreviousData，React Query 仍在继续获取

React Query keeps fetching despite keepPreviousData

reactjs

react-hooks

react-query