查询函数

查询函数可以是任何返回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])
});

处理和抛出错误

为了让 TanStack Query 判断查询发生错误，查询函数必须抛出错误或返回一个被reject的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;
  }
});

查询函数变量

QueryKey 不仅用于唯一标识数据，还会作为QueryFunctionContext的一部分传递给查询函数。这使得查询函数可以被独立提取出来，例如：

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

// 在查询函数中访问 queryKey、status 和 page 变量
function fetchTodoList({ queryKey }) {
  const [_key, { status, page }] = queryKey;
  return new Promise();
}

QueryFunctionContext

QueryFunctionContext是传递给每个查询函数的对象，包含以下内容：

• queryKey: 查询键

• client：查询客户端实例

• signal?：由 TanStack Query 提供的AbortSignal，用于取消查询。

• meta?：可选字段，可用于存储查询的额外信息。

此外，无限查询（Infinite Queries）还会接收以下参数：

• pageParam：当前页面的分页参数

• directio（废弃）：当前页面的请求方向。

• 如果需要获取当前页面的方向，应在getNextPageParam 和 getPreviousPageParam 中手动添加 direction 到 pageParam。