React-query 缓存不会在页面刷新时持续存在

Question

我想在useQuery请求成功后设置 24 小时缓存。

但是当我刷新页面时，缓存就消失了。我看到它是因为每次在我的服务器上命中该路由时，我都会 console.log 一条消息。

如何防止这种行为并实现真正的缓存？

这是代码：

   import { useQuery } from "react-query";
import { api } from "./config";

const _getUser = async () => {
  try {
const res = api.get("/get-user");
return res;
  } catch (err) {
return err;
  }
};

export const getUser = () => {
  const { data } = useQuery("contact", () => _getUser(), {
cacheTime: 1000 * 60 * 60 * 24,
  });
  return { user: data && data.data };
};


// then in the component:
  const { user } = getUser();

return (
<div >
  hello {user?.name}
</div>

我也尝试过替换cacheTime为staleTime.

Answer 1

如果重新加载浏览器，缓存就会消失，因为缓存位于内存中。如果您想要持久缓存，可以尝试（实验性）persistQueryClient 插件：https ://react-query.tanstack.com/plugins/persistQueryClient