7

我正在尝试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 组件似乎仍然卸载。我希望它不会卸载并且我不会看到网络获取，并且书籍将从反应查询缓存中提取。我还尝试让 useBooks 挂钩不使用搜索选项参数，但结果是一样的。

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

4

1 回答 1

8

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

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

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

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

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

于 2021-01-28T15:11:54.037 回答