Query Options
在多个地方共享 queryKey 和 queryFn，同时保持它们彼此靠近的最佳方法之一是使用 queryOptions 辅助函数。在运行时，此辅助函数只返回您传入的任何内容，但在 TypeScript 中使用它时有很多优点。您可以在一个地方定义查询的所有可能选项，并且您还将获得所有这些选项的类型推断和类型安全。
ts
import { queryOptions } from '@tanstack/react-query'
function groupOptions(id: number) {
return queryOptions({
queryKey: ['groups', id],
queryFn: () => fetchGroups(id),
staleTime: 5 * 1000,
})
}
// usage:
useQuery(groupOptions(1))
useSuspenseQuery(groupOptions(5))
useQueries({
queries: [groupOptions(1), groupOptions(2)],
})
queryClient.prefetchQuery(groupOptions(23))
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
import { queryOptions } from '@tanstack/react-query'
function groupOptions(id: number) {
return queryOptions({
queryKey: ['groups', id],
queryFn: () => fetchGroups(id),
staleTime: 5 * 1000,
})
}
// usage:
useQuery(groupOptions(1))
useSuspenseQuery(groupOptions(5))
useQueries({
queries: [groupOptions(1), groupOptions(2)],
})
queryClient.prefetchQuery(groupOptions(23))
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
对于无限查询，可以使用单独的 infiniteQueryOptions 辅助函数。
您仍然可以在组件级别覆盖某些选项。一个非常常见且有用的模式是创建每个组件的 select 函数
ts
// Type inference still works, so query.data will be the return type of select instead of queryFn
const query = useQuery({
...groupOptions(1),
select: (data) => data.groupName,
})
// Type inference still works, so query.data will be the return type of select instead of queryFn
const query = useQuery({
...groupOptions(1),
select: (data) => data.groupName,
})
