ReactQuery似乎没有缓存

html5 • • 问答

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

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

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

回答

从重要默认值部分：

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

现场演示

以上是ReactQuery似乎没有缓存的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>