使用 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-query 缓存中提取书籍。我还尝试使 useBooks 挂钩不使用搜索选项参数，但结果相同。

在我的场景中如何使用避免网络获取？

Answer 1

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

当使用react-query hook的组件挂载时，它将触发一次fetch（因为挂载）。但是，如果您的缓存中已经有该特定键的数据，您将立即获得该数据作为“过时数据”返回，并且提取将仅在后台发生。

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

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

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