Skip to main content

QueryCache

QueryCache是 React Query 的存储机制。它存储它包含的所有数据、元信息和查询状态。 通常，您不会直接与QueryCache交互，而是将QueryClient用于特定的缓存。

import { QueryCache } from "@tanstack/react-query";

const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error);
  },
  onSuccess: (data) => {
    console.log(data);
  },
});

const query = queryCache.find("posts");

其可用的方法有：find, findAll, subscribe, clear

Options​

  • onError?: (error: unknown, query: Query) => void

    • 可选的
    • 如果某些查询遇到错误，将调用此函数。

  • onSuccess?: (data: unknown, query: Query) => void

    • 可选的
    • 如果某些查询成功，将调用此函数。

全局回调​

QueryCache 上的onError和onSuccess回调可用于在全局级别上处理这些事件。它们与提供给 QueryClient 不同的defaultOptions，因为： - defaultOptions可以被每个 Query 覆盖——将始终调用全局回调。 - defaultOptions每个 Observer 都会调用一次回调，而每个 Query 只会调用一次全局回调。

queryCache.find​

find是一种稍微高级的同步方法，可用于从缓存中获取现有查询实例。该实例不仅包含查询的所有状态，还包含所有实例以及查询的底层内容。如果查询不存在，将返回undefined。

注意：大多数应用程序通常不需要此功能，但在极少数情况下需要有关查询的更多信息时会派上用场（例如，查看 query.state.dataUpdatedAt 时间戳以确定查询是否足够新鲜以用作初始值）

const query = queryCache.find(queryKey);

Options​

  • queryKey?: QueryKey：查询键
  • filters?: QueryFilters：查询过滤器

Returns​

  • Query
    • 缓存中的查询实例

queryCache.findAll​

findAll是更高级的同步方法，可用于从缓存中获取部分匹配查询键的现有查询实例。如果查询不存在，将返回空数组。

注意：大多数应用程序通常不需要此功能，但在极少数情况下需要有关查询的更多信息时会派上用场

const queries = queryCache.findAll(queryKey);

Options​

  • queryKey?: QueryKey：查询键
  • filters?: QueryFilters：查询过滤器

Returns​

  • Query[]
    • 从缓存中查询实例

queryCache.subscribe​

该subscribe方法可用于订阅整个查询缓存，并被告知对缓存的安全/已知更新，例如查询状态更改或查询正在更新、添加或删除

const callback = (event) => {
  console.log(event.type, event.query);
};

const unsubscribe = queryCache.subscribe(callback);

Options​

  • callback: (event: QueryCacheNotifyEvent) => void：
    • 每当查询缓存通过其跟踪的更新机制进行更新时，该函数会被调用, 如query.setState,queryClient.removeQueries,等。不鼓励对缓存进行超出范围的修改，并且不会触发订阅回调
  • filters?: QueryFilters：查询过滤器

Returns​

  • unsubscribe: Function => void
    • 此函数将从查询缓存中取消订阅回调。

queryCache.clear​

该clear方法可用于完全清除缓存并重新开始。

queryCache.clear();