查询函数 Query Functions
查询函数实际上可以是任何一个返回 Promise 的函数。返回的 Promise 应该解决数据或抛出错误。
以下所有都是有效的查询函数配置:
TypeScript
1useQuery({ queryKey: ["todos"], queryFn: fetchAllTodos });2useQuery({ queryKey: ["todos", todoId], queryFn: () => fetchTodoById(todoId) });3useQuery({4 queryKey: ["todos", todoId],5 queryFn: async () => {6 const data = await fetchTodoById(todoId);7 return data;8 },9});10useQuery({11 queryKey: ["todos", todoId],12 queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),13});抛出和处理错误
为了使 React Query 确定查询错误,查询函数的错误必须抛出或返回rejected Promise。查询函数中引发的任何错误都将被持久化在查询的error状态中。
TypeScript
1const { error } = useQuery({2 queryKey: ["todos", todoId],3 queryFn: async () => {4 if (somethingGoesWrong) {5 throw new Error("Oh no!");6 }7 if (somethingElseGoesWrong) {8 return Promise.reject(new Error("Oh no!"));9 }10 11 return data;12 },13});与fetch和其他默认不抛出错误的客户端库一起使用
虽然大多数库(例如axios或graphql-request)会针对不成功的 HTTP 请求自动抛出错误,但某些库(如fetch)默认不会抛出错误。
在这种情况下,你需要自己throw它们。这是使用流行的fetch API 的一种简单方法:
TypeScript
1useQuery({2 queryKey: ["todos", todoId],3 queryFn: async () => {4 const response = await fetch("/todos/" + todoId);5 if (!response.ok) {6 throw new Error("Network response was not ok");7 }8 return response.json();9 },10});查询函数的参数
查询键值不仅用于唯一地标识要获取的数据,而且还可以方便地传递到查询函数中,虽然并非总是必需的,但这使得在需要时提取查询函数成为可能:
TypeScript
1function Todos({ status, page }) {2 const result = useQuery({3 queryKey: ["todos", { status, page }],4 queryFn: fetchTodoList,5 });6}7 8// 在查询函数中访问键值,状态和页面变量!9function fetchTodoList({ queryKey }) {10 const [_key, { status, page }] = queryKey;11 return new Promise();12}QueryFunctionContext及其类型定义
QueryFunctionContext 会当作参数传给每一个查询函数,其包含:
queryKey: QueryKey: 查看查询键值pageParam: unknown | undefined- 只会在无限查询场景传递
- 为查询当前页所使用的参数
- signal?: AbortSignal
- React Query 提供的AbortSignal实例
- 可以用来做查询取消
meta?: Record<string, unknown>- 一个可选字段,可以填写任意关于该查询的额外信息