React Query 似乎没有缓存

Question

我正在关注我在 YouTube 上看到的一个使用React Query的示例，但我似乎无法让缓存按预期工作。在我的应用程序中，每次都会获取数据。不确定我是否遗漏了一些明显的东西。这是我的代码：https : //codesandbox.io/s/eager-faraday-nhmlb?file=/src/App.js

单击“行星”和“人物”按钮时，我可以看到每次来​​回切换时发出的网络请求。我希望看到它至少在缓存仍处于活动状态的一段时间内对每组数据发出一次请求。

有谁知道可能有什么问题？

Answer 1

您正在应用程序组件内创建一个新的 QueryClient，因此当它重新呈现时，您基本上会丢弃缓存。创建 new QueryClient ()像示例中一样

\n

另外，请注意，您仍然会看到网络请求，因为在组件安装时，react-query 会使用默认 staleTime 0 进行后台重新获取。如果您不想要的话，可以将其设置为更高的值。

\n

Answer 2

从重要默认值部分：

通过useQuery或useInfiniteQuery默认情况下查询实例将缓存数据视为陈旧数据。

在以下情况下，过时的查询会在后台自动重新获取：

• 查询挂载的新实例

默认情况下，当成功获取查询时，它会立即被视为过时，这就是每次更改选项卡时都会重新获取数据的原因。如果您不想要激进的重新获取行为，您可以设置更长的时间staleTime（默认为0）：

const { isLoading, error, data } = useQuery("planets", fetchPlanets, {
  staleTime: 10000, // only eligible to refetch after 10 seconds
});

您的代码中有另一个错误与 不太相关react-query，在您的以下代码中：

function App() {
  const [page, setPage] = useState("planets");

  const queryClient = new QueryClient();

  const pageSetter = (page) => {
    setPage(page);
  };

  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Star Wars Info</h1>
        <Navbar setPage={pageSetter} />
        <div className="content">
          {page === "planets" ? <Planets /> : <People />}
        </div>
      </div>
    </QueryClientProvider>
  );
}

每次用户单击按钮以显示不同的数据时，整个组件都会重新渲染，queryClient创建一个新实例并将其传递给QueryClientProvider，从而重置客户端缓存的任何内部状态。你应该解耦你的组件以避免像这样不必要的重新渲染：

function Content() {
  const [page, setPage] = useState("planets");
  const pageSetter = (page) => {
    setPage(page);
  };

  return (
    <div className="App">
      <h1>Star Wars Info</h1>
      <Navbar setPage={pageSetter} />
      <div className="content">
        {page === "planets" ? <Planets /> : <People />}
      </div>
    </div>
  );
}

// top level component, should not get re-rendered
function App() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <Content />
    </QueryClientProvider>
  );
}

现场演示