使用 react-query 和 react-router-dom 进行缓存

Question

我正在尝试 react-query 并希望看到它的缓存。我有一个获取书籍列表的页面。

请注意，为了简洁起见，显然省略了一些代码，只是为了显示重要部分。

const useBooks = options => {
  return useQuery(['books', options], bookApi.fetchBooks(options));
}

const Books = () => {
  useEffect(() => () => console.log("unmount"), []);
  const [options, setOptions] = useState({}); // options ex: { page: 1, search: "test"}
  const {error, isLoading, data} = useBooks(options);

  return books.map(book => <div>{book.name}</div>;
}

现在这本书是我应用程序中的一个“页面”，使用 react-router-dom:

const App = () => {

  return (
    <Router>
      <>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/books">
          <Books />
         </Route>
      </>
     </Router>
    )
  }

当我在“主页”和“图书”之间来回切换时（通过单击我的应用程序中的导航链接），我每次都看到图书在网络上获取。我还在控制台中看到“卸载”。

我最初将路由包裹在 Switch 中，并删除了它，但 Books 组件似乎仍未安装。我希望它不会卸载并且我不会看到网络提取，并且书籍将从反应查询缓存中提取。我还尝试让 useBooks 挂钩不使用搜索选项参数，但结果是一样的。

如何在我的场景中避免网络抓取？

Answer 1

react-router 将在您离开组件时卸载它，是的。但这是故意的，不是问题所在。

当使用 react-query hook 的组件挂载时，它会触发获取（因为挂载）。但是，如果缓存中已有此特定键的数据，您会立即将该数据作为“陈旧数据”返回，并且只会在后台进行提取。

如果您想避免请求外出，您可以：

将refetchOnmount设置为false，这样组件挂载时就不会重新获取
在您的查询中设置 staleTime

我建议设置 staleTime：它将告诉 react-query 数据应该被视为“新鲜”的时间。如果将它设置为 5 分钟，则 5 分钟内不会有 background-refetch - 数据将始终直接来自缓存。 staleTime 默认为 0，因此您将始终获得后台重新获取。

使用 react-query 和 react-router-dom 进行缓存

Caching with react-query and react-router-dom

reactjs

react-router

react-router-dom

react-query