reactjs - 使用 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>
    )
  }

当我在“主页”和“书籍”之间来回切换时(通过单击我的应用程序中的导航链接)，我每次都能看到书籍访问网络。我还在控制台中看到了“卸载”。
我最初将 Routes 包裹在 Switch 中，并删除了它，但 Books 组件似乎仍处于卸载状态。我希望它不会卸载并且我不会看到网络提取，并且书籍将从 react 查询缓存中提取。我还尝试使 useBooks Hook 不使用搜索选项参数，但结果相同。
在我的场景中如何使用避免网络获取？

Answer 1

react-router当您离开它时将卸载您的组件，是的。但这是故意的，而不是问题。
当使用 react-query hook 的组件挂载时，它会触发 fetch(因为挂载)。但是，如果您在缓存中已经有这个特定键的数据，您将立即将该数据作为“陈旧数据”返回，并且获取将仅在后台进行。
如果您想避免请求发出，您可以:

套装 refetchOnmount至 false以便组件挂载时不会重新获取

设置一个 staleTime关于您的查询

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