reactjs - 即使数据被缓存，React useQuery 也会向 Api 发出请求

Question

我有一个调用 API 的简单应用程序。我正在使用 react-query 进行提取并缓存数据。但是如果你去网络改成慢3g，在它的状态改变后，它会调用API。文档声明react-query在第二次尝试中将返回缓存的数据。

import React, { memo, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import { useQuery } from "react-query";
import Axios from "axios";

const fetchTodoList = async (key, id) => {
  const { data } = await Axios.get(
    `https://jsonplaceholder.typicode.com/photos`
  );
  return data;
};

function App() {
  const [flag, setFlag] = useState(true);
  const { isLoading, isError, data, error, isFetching } = useQuery(
    "todos",
    fetchTodoList
  );
  console.log(isFetching, data);
  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  // also status === 'success', but "else" logic works, too
  return (
    <>
      <button
        onClick={() => {
          setFlag(!flag);
        }}
      >
        ddddddddd
      </button>
      <ul>
        {data.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </>
  );
}

export default memo(App);

Answer 1

我认为您对 react-query API 有错误的想法，确实在第二次尝试时它会返回缓存的数据，但在后台，它还会从 API 重新获取数据，以便让您的应用程序保持最新。