查询函数
查询函数可以是任何返回 Promise 的函数。返回的 Promise 应该解析数据或抛出错误。
以下所有都是有效的查询函数配置
ts
injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchAllTodos }))
injectQuery(() => ({ queryKey: ['todos', todoId], queryFn: () => fetchTodoById(todoId) })
injectQuery(() => ({
queryKey: ['todos', todoId],
queryFn: async () => {
const data = await fetchTodoById(todoId)
return data
},
}))
injectQuery(() => ({
queryKey: ['todos', todoId],
queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),
}))
injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchAllTodos }))
injectQuery(() => ({ queryKey: ['todos', todoId], queryFn: () => fetchTodoById(todoId) })
injectQuery(() => ({
queryKey: ['todos', todoId],
queryFn: async () => {
const data = await fetchTodoById(todoId)
return data
},
}))
injectQuery(() => ({
queryKey: ['todos', todoId],
queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),
}))
处理和抛出错误
为了让 TanStack Query 确定一个查询已出错，查询函数必须抛出或返回一个被拒绝的 Promise。在查询函数中抛出的任何错误都将被持久化到查询的 error 状态中。
ts
todos = injectQuery(() => ({
queryKey: ['todos', todoId()],
queryFn: async () => {
if (somethingGoesWrong) {
throw new Error('Oh no!')
}
if (somethingElseGoesWrong) {
return Promise.reject(new Error('Oh no!'))
}
return data
},
}))
todos = injectQuery(() => ({
queryKey: ['todos', todoId()],
queryFn: async () => {
if (somethingGoesWrong) {
throw new Error('Oh no!')
}
if (somethingElseGoesWrong) {
return Promise.reject(new Error('Oh no!'))
}
return data
},
}))
与 fetch 和其他默认不抛出错误的客户端一起使用
虽然大多数工具如 axios 或 graphql-request 会自动为不成功的 HTTP 调用抛出错误，但有些工具如 fetch 默认不会抛出错误。在这种情况下，您需要自己抛出错误。以下是使用流行的 fetch API 进行此操作的简单方法。
ts
todos = injectQuery(() => ({
queryKey: ['todos', todoId()],
queryFn: async () => {
const response = await fetch('/todos/' + todoId)
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.json()
},
}))
todos = injectQuery(() => ({
queryKey: ['todos', todoId()],
queryFn: async () => {
const response = await fetch('/todos/' + todoId)
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.json()
},
}))
查询函数变量
查询键不仅用于唯一标识您正在获取的数据，而且还会作为 QueryFunctionContext 的一部分方便地传递到您的查询函数中。虽然不总是必需的，但这使得在需要时提取查询函数成为可能。
ts
result = injectQuery(() => ({
queryKey: ['todos', { status: status(), page: page() }],
queryFn: fetchTodoList,
}))
// Access the key, status and page variables in your query function!
function fetchTodoList({ queryKey }) {
const [_key, { status, page }] = queryKey
return new Promise()
}
result = injectQuery(() => ({
queryKey: ['todos', { status: status(), page: page() }],
queryFn: fetchTodoList,
}))
// Access the key, status and page variables in your query function!
function fetchTodoList({ queryKey }) {
const [_key, { status, page }] = queryKey
return new Promise()
}
QueryFunctionContext
QueryFunctionContext 是传递给每个查询函数的对象。它包含：
- queryKey: QueryKey: 查询键
- client: QueryClient: QueryClient
- signal?: AbortSignal
- TanStack Query 提供的 AbortSignal 实例
- 可用于 查询取消
- meta: Record<string, unknown> | undefined
- 一个可选字段，你可以用它来填充有关查询的附加信息
此外，无限查询会获得以下选项传递。
- pageParam: TPageParam
- 用于获取当前页面的页面参数
- direction: 'forward' | 'backward'
- 已弃用
- 当前页面获取的方向
- 要访问当前页面获取的方向，请从 getNextPageParam 和 getPreviousPageParam 的 pageParam 中添加一个方向。
