这 是 定制 挂钩
export const useFilteredProfiles = (filters) => {
const { type, state, occupancy, propertyValue, loanToValue } = filters
return useQuery({
queryKey: ['profiles', type, state, occupancy, propertyValue, loanToValue]
, queryFn: ({ queryKey }) => fetchData(queryKey),
refetchOnWindowFocus: false,
retry: false,
staleTime: Infinity,
enabled: !!type
});
}中 的 每 一 个
我 在 不同 页面 的 两 个 组件 中 使用 了 它
在 第 一 页 上 有 过滤 器 使用 这些 过滤 器 状态 ， 我 使用 上面 的 钩子 来 获取 和 显示 当前 配置 文件 的 计数 。
在 第 一 页 中 有 一 个 按钮 onClick I pass these filter states in router query （ 在 路由 器 查询 中 传递 这些 过滤 器 状态 ） （ 如 下面 的 代码 所 示 ）
使用 另 一 个 页面 中 的 筛选 器 状态 来 获取 缓存 的 配置 文件 数据 ， 但 它 在 那里 发出 API 请求 ， 而 不 是 从 缓存 中 获取 。
const handleClick = () => {
router.push({ pathname: `${router.pathname}/profiles`, query: { type, state, occupancy, propertyValue, loanToValue } });
}格式
我 做 错 什么 了 吗 ？
1条答案
按热度按时间ozxc1zmp1#
默认 情况 下 ， ReactQuery 将 缓存 查询 的 数据 ， 但 这 并 不 影响 它 是否 认为 数据 已 过时 。这 意味 着 它 将 从 缓存 中 读取 数据 （ 如果 有 ） ， 但 由于 它 认为 数据 是 陈旧 的 ，仍 将 在 后台 访问 API 以 获取 任何 更新 的 数据 。
幸运 的 是 ， 您 可以 完全 控制 React Query 是否 将 数据 视为 陈旧 数据 。 您 可以 设置
staleTime配置 选项 来 控制 特定 数据 应 被 视为 新鲜 数据 的 时间 长度 。 您 甚至 可以 将 其 设置 为Infinity， 表示 只要 您 的 应用 处于 打开 状态 ， 它 就 只 应 调用 查询 函数默认 情况 下 ， 该 值 为 0 ， 这 就是 为什么 您 会 看到 这样 的 行为 - 每次 调用useQuery时 ， React Query 都会 在 后台 对 数据 进行refetch处理 ， 因为 它 会 立即 认为 数据 已 过时 （ 即使 数据 仍 在 缓存 中 ） 。在 您 的 示例 中 ， 如果 确实 只 希望 调用 一 次 API ， 则 只需 将 staleTime 选项 设置 为
Infinity。中 的 每 一 个
此 选项 以及 所有 其他 选项 可 在 此处 的 文档 中 阅读 https://react-query.tanstack.com/reference/useQuery