TanStackQuery v5
自动
框架
版本
菜单
开始使用
指南 & 概念
API 参考
ESLint
社区资源
示例
插件

useQuery

tsx
const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  promise,
  refetch,
  status,
} = useQuery(
  {
    queryKey,
    queryFn,
    gcTime,
    enabled,
    networkMode,
    initialData,
    initialDataUpdatedAt,
    meta,
    notifyOnChangeProps,
    placeholderData,
    queryKeyHashFn,
    refetchInterval,
    refetchIntervalInBackground,
    refetchOnMount,
    refetchOnReconnect,
    refetchOnWindowFocus,
    retry,
    retryOnMount,
    retryDelay,
    select,
    staleTime,
    structuralSharing,
    subscribed,
    throwOnError,
  },
  queryClient,
)

const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  promise,
  refetch,
  status,
} = useQuery(
  {
    queryKey,
    queryFn,
    gcTime,
    enabled,
    networkMode,
    initialData,
    initialDataUpdatedAt,
    meta,
    notifyOnChangeProps,
    placeholderData,
    queryKeyHashFn,
    refetchInterval,
    refetchIntervalInBackground,
    refetchOnMount,
    refetchOnReconnect,
    refetchOnWindowFocus,
    retry,
    retryOnMount,
    retryDelay,
    select,
    staleTime,
    structuralSharing,
    subscribed,
    throwOnError,
  },
  queryClient,
)

Parameter1 (选项)

  • queryKey: unknown[]
    • 必需
    • 用于此 query 的 query key。
    • query key 将被哈希为稳定的哈希值。 请参阅Query Keys 以获取更多信息。
    • 当此 key 更改时，query 将自动更新（只要 enabled 未设置为 false）。
  • queryFn: (context: QueryFunctionContext) => Promise<TData>
    • 必需，但仅当未定义默认 query 函数时 请参阅默认 Query 函数 以获取更多信息。
    • query 将用于请求数据的函数。
    • 接收 QueryFunctionContext
    • 必须返回一个 promise，它将解析数据或抛出错误。数据不能为 undefined。
  • enabled: boolean | (query: Query) => boolean
    • 设置为 false 以禁用此 query 自动运行。
    • 可用于依赖 Queries。
  • networkMode: 'online' | 'always' | 'offlineFirst
    • 可选
    • 默认为 'online'
    • 请参阅网络模式 以获取更多信息。
  • retry: boolean | number | (failureCount: number, error: TError) => boolean
    • 如果 false，则失败的 query 默认不会重试。
    • 如果 true，则失败的 query 将无限重试。
    • 如果设置为 number，例如 3，则失败的 query 将重试，直到失败的 query 计数达到该数字。
    • 客户端默认为 3，服务器端默认为 0
  • retryOnMount: boolean
    • 如果设置为 false，则如果 query 包含错误，则在挂载时不会重试。 默认为 true。
  • retryDelay: number | (retryAttempt: number, error: TError) => number
    • 此函数接收一个 retryAttempt 整数和实际的 Error，并返回下一次尝试前应用的延迟（以毫秒为单位）。
    • 类似 attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000) 的函数应用指数退避。
    • 类似 attempt => attempt * 1000 的函数应用线性退避。
  • staleTime: number | ((query: Query) => number)
    • 可选
    • 默认为 0
    • 数据被视为过时的时间（以毫秒为单位）。此值仅适用于定义它的 hook。
    • 如果设置为 Infinity，则数据将永远不会被视为过时
    • 如果设置为函数，则将使用 query 执行该函数以计算 staleTime。
  • gcTime: number | Infinity
    • 默认为 5 * 60 * 1000 (5 分钟) 或 SSR 期间为 Infinity
    • 未使用/非活动缓存数据保留在内存中的时间（以毫秒为单位）。当 query 的缓存变为未使用或非活动状态时，该缓存数据将在该持续时间后被垃圾回收。当指定不同的垃圾回收时间时，将使用最长的时间。
    • 注意：允许的最大时间约为 24 天。 请参阅更多。
    • 如果设置为 Infinity，将禁用垃圾回收
  • queryKeyHashFn: (queryKey: QueryKey) => string
    • 可选
    • 如果指定，此函数用于将 queryKey 哈希为字符串。
  • refetchInterval: number | false | ((query: Query) => number | false | undefined)
    • 可选
    • 如果设置为数字，则所有 query 将以此频率（以毫秒为单位）连续重新获取
    • 如果设置为函数，则将使用 query 执行该函数以计算频率
  • refetchIntervalInBackground: boolean
    • 可选
    • 如果设置为 true，则设置为使用 refetchInterval 连续重新获取的 query 将在其选项卡/窗口位于后台时继续重新获取
  • refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")
    • 可选
    • 默认为 true
    • 如果设置为 true，如果数据已过时，则 query 将在挂载时重新获取。
    • 如果设置为 false，则 query 将不会在挂载时重新获取。
    • 如果设置为 "always"，则 query 将始终在挂载时重新获取。
    • 如果设置为函数，则将使用 query 执行该函数以计算值
  • refetchOnWindowFocus: boolean | "always" | ((query: Query) => boolean | "always")
    • 可选
    • 默认为 true
    • 如果设置为 true，如果数据已过时，则 query 将在窗口聚焦时重新获取。
    • 如果设置为 false，则 query 将不会在窗口聚焦时重新获取。
    • 如果设置为 "always"，则 query 将始终在窗口聚焦时重新获取。
    • 如果设置为函数，则将使用 query 执行该函数以计算值
  • refetchOnReconnect: boolean | "always" | ((query: Query) => boolean | "always")
    • 可选
    • 默认为 true
    • 如果设置为 true，如果数据已过时，则 query 将在重新连接时重新获取。
    • 如果设置为 false，则 query 将不会在重新连接时重新获取。
    • 如果设置为 "always"，则 query 将始终在重新连接时重新获取。
    • 如果设置为函数，则将使用 query 执行该函数以计算值
  • notifyOnChangeProps: string[] | "all" | (() => string[] | "all" | undefined)
    • 可选
    • 如果设置，则仅当列出的任何属性更改时，组件才会重新渲染。
    • 例如，如果设置为 ['data', 'error']，则仅当 data 或 error 属性更改时，组件才会重新渲染。
    • 如果设置为 "all"，则组件将选择退出智能跟踪，并在每次 query 更新时重新渲染。
    • 如果设置为函数，则将执行该函数以计算属性列表。
    • 默认情况下，将跟踪对属性的访问，并且仅当跟踪的属性之一更改时，组件才会重新渲染。
  • select: (data: TData) => unknown
    • 可选
    • 此选项可用于转换或选择 query 函数返回的数据的一部分。 它会影响返回的 data 值，但不影响存储在 query 缓存中的内容。
    • 仅当 data 更改或对 select 函数本身的引用发生更改时，select 函数才会运行。 为了优化，请将该函数包装在 useCallback 中。
  • initialData: TData | () => TData
    • 可选
    • 如果设置，则此值将用作 query 缓存的初始数据（只要尚未创建或缓存 query）。
    • 如果设置为函数，则将在共享/根 query 初始化期间调用一次该函数，并期望同步返回 initialData。
    • 除非已设置 staleTime，否则初始数据默认被视为过时。
    • initialData 将持久化到缓存
  • initialDataUpdatedAt: number | (() => number | undefined)
    • 可选
    • 如果设置，则此值将用作 initialData 本身最后更新的时间（以毫秒为单位）。
  • placeholderData: TData | (previousValue: TData | undefined; previousQuery: Query | undefined,) => TData
    • 可选
    • 如果设置，则当 query 仍处于 pending 状态时，此值将用作此特定 query observer 的占位符数据。
    • placeholderData 不会持久化到缓存
    • 如果为 placeholderData 提供函数，则作为第一个参数，您将收到先前观察到的 query 数据（如果可用），第二个参数将是完整的 previousQuery 实例。
  • structuralSharing: boolean | (oldData: unknown | undefined, newData: unknown) => unknown)
    • 可选
    • 默认为 true
    • 如果设置为 false，则将禁用 query 结果之间的结构共享。
    • 如果设置为函数，则旧数据值和新数据值将通过此函数传递，该函数应将它们组合为 query 的已解析数据。 这样，即使数据包含不可序列化的值，您也可以保留对旧数据的引用以提高性能。
  • subscribed: boolean
    • 可选
    • 默认为 true
    • 如果设置为 false，则此 useQuery 实例将不会订阅缓存。 这意味着它不会自行触发 queryFn，并且如果数据通过其他方式进入缓存，它也不会接收更新。
  • throwOnError: undefined | boolean | (error: TError, query: Query) => boolean
    • 如果您希望在渲染阶段抛出错误并传播到最近的错误边界，请将其设置为 true
    • 设置为 false 以禁用 suspense 的默认行为，即向错误边界抛出错误。
    • 如果设置为函数，则会将其传递错误和 query，并且它应返回一个布尔值，指示是否在错误边界中显示错误 (true) 或将错误作为状态返回 (false)
  • meta: Record<string, unknown>
    • 可选
    • 如果设置，则在 query 缓存条目上存储可根据需要使用的附加信息。 它可以在 query 可用的任何位置访问，并且也是提供给 queryFn 的 QueryFunctionContext 的一部分。

Parameter2 (QueryClient)

  • queryClient?: QueryClient,
    • 使用此项可使用自定义 QueryClient。 否则，将使用来自最近上下文的 QueryClient。

返回

  • status: QueryStatus
    • 将会是
      • 如果没有任何缓存数据且尚未完成任何 query 尝试，则为 pending。
      • 如果 query 尝试导致错误，则为 error。 相应的 error 属性具有从尝试的 fetch 收到的错误
      • 如果 query 已收到没有错误的响应并准备好显示其数据，则为 success。 query 上的相应 data 属性是从成功 fetch 收到的数据，或者如果 query 的 enabled 属性设置为 false 并且尚未获取 data，则 data 是初始化时提供给 query 的第一个 initialData。
  • isPending: boolean
    • 从上面的 status 变量派生的布尔值，为方便起见提供。
  • isSuccess: boolean
    • 从上面的 status 变量派生的布尔值，为方便起见提供。
  • isError: boolean
    • 从上面的 status 变量派生的布尔值，为方便起见提供。
  • isLoadingError: boolean
    • 如果 query 在首次获取时失败，则为 true。
  • isRefetchError: boolean
    • 如果 query 在重新获取时失败，则为 true。
  • data: TData
    • 默认为 undefined。
    • query 的最后成功解析的数据。
  • dataUpdatedAt: number
    • query 最近一次将 status 返回为 "success" 的时间戳。
  • error: null | TError
    • 默认为 null
    • query 的错误对象（如果抛出错误）。
  • errorUpdatedAt: number
    • query 最近一次将 status 返回为 "error" 的时间戳。
  • isStale: boolean
    • 如果缓存中的数据已失效，或者数据早于给定的 staleTime，则为 true。
  • isPlaceholderData: boolean
    • 如果显示的数据是占位符数据，则为 true。
  • isFetched: boolean
    • 如果 query 已被获取，则为 true。
  • isFetchedAfterMount: boolean
    • 如果 query 在组件挂载后已被获取，则为 true。
    • 此属性可用于不显示任何先前缓存的数据。
  • fetchStatus: FetchStatus
    • fetching：每当 queryFn 正在执行时（包括初始 pending 以及后台重新获取），则为 true。
    • paused：query 想要获取，但已被 paused。
    • idle：query 未获取。
    • 请参阅网络模式 以获取更多信息。
  • isFetching: boolean
    • 从上面的 fetchStatus 变量派生的布尔值，为方便起见提供。
  • isPaused: boolean
    • 从上面的 fetchStatus 变量派生的布尔值，为方便起见提供。
  • isRefetching: boolean
    • 每当后台重新获取正在进行时，则为 true，这不包括初始 pending
    • 与 isFetching && !isPending 相同
  • isLoading: boolean
    • 每当 query 的第一次获取正在进行时，则为 true
    • 与 isFetching && isPending 相同
  • isInitialLoading: boolean
    • 已弃用
    • 是 isLoading 的别名，将在下一个主要版本中删除。
  • failureCount: number
    • query 的失败计数。
    • 每次 query 失败时递增。
    • 当 query 成功时重置为 0。
  • failureReason: null | TError
    • query 重试的失败原因。
    • 当 query 成功时重置为 null。
  • errorUpdateCount: number
    • 所有错误的总和。
  • refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>
    • 手动重新获取 query 的函数。
    • 如果 query 发生错误，则只会记录该错误。 如果您希望抛出错误，请传递 throwOnError: true 选项
    • cancelRefetch?: boolean
      • 默认为 true
        • 默认情况下，当前正在运行的请求将在发出新请求之前取消
      • 当设置为 false 时，如果已经有请求正在运行，则不会进行重新获取。
  • promise: Promise<TData>
    • 将使用 query 数据解析的稳定 promise。
    • 需要 experimental_prefetchInRender 功能标志在 QueryClient 上启用。
在 GitHub 上编辑
notifyManager
useQueries
想要跳过文档？
Query.gg - The Official React Query Course - TanStack
“如果您认真想*真正*理解 React Query，那么没有比 query.gg 更好的方法了”—Tanner Linsley