Skip to main content

查询函数 Query Functions

查询函数实际上可以是任何一个返回 Promise 的函数。返回的 Promise 应该解决数据或抛出错误。

以下所有都是有效的查询函数配置：

useQuery({ queryKey: ["todos"], queryFn: fetchAllTodos });
useQuery({ queryKey: ["todos", todoId], queryFn: () => fetchTodoById(todoId) });
useQuery({
  queryKey: ["todos", todoId],
  queryFn: async () => {
    const data = await fetchTodoById(todoId);
    return data;
  },
});
useQuery({
  queryKey: ["todos", todoId],
  queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),
});

抛出和处理错误​

为了使 React Query 确定查询错误，查询函数的错误必须抛出或返回rejected Promise。查询函数中引发的任何错误都将被持久化在查询的error状态中。

const { error } = useQuery({
  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）默认不会抛出错误。 在这种情况下，你需要自己throw它们。这是使用流行的fetch API 的一种简单方法：

useQuery({
  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();
  },
});

查询函数的参数​

查询键值不仅用于唯一地标识要获取的数据，而且还可以方便地传递到查询函数中，虽然并非总是必需的，但这使得在需要时提取查询函数成为可能：

function Todos({ status, page }) {
  const result = useQuery({
    queryKey: ["todos", { status, page }],
    queryFn: fetchTodoList,
  });
}

// 在查询函数中访问键值，状态和页面变量！
function fetchTodoList({ queryKey }) {
  const [_key, { status, page }] = queryKey;
  return new Promise();
}

QueryFunctionContext及其类型定义​

QueryFunctionContext 会当作参数传给每一个查询函数，其包含：

  • queryKey: QueryKey: 查看查询键值
  • pageParam: unknown | undefined
    • 只会在无限查询场景传递
    • 为查询当前页所使用的参数
  • signal?: AbortSignal
  • meta?: Record<string, unknown>
    • 一个可选字段，可以填写任意关于该查询的额外信息