查询函数

一个查询函数可以是任何返回Promise的函数。返回的Promise要么解析（resolve）数据，要么抛出一个错误。以下所有配置都是邮箱的查询函数：

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 能够确定查询出错，查询函数必须抛出错误或返回一个被拒绝的 Promise。在查询函数中抛出的任何错误都将被记录在查询的错误状态中。

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

虽然像 axios 或 graphql-request 这样的大多数工具会自动为不成功的 HTTP 请求抛出错误，但像 fetch这样的某些工具默认不会抛出错误。如果是这种情况，你需要自己抛出它们。以下是如何使用fetchAPI 实现这一点的简单方法：

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

查询键不仅用于唯一标识你正在获取的数据，还会作为QueryFunctionContext的一部分方便传递给你的查询函数。虽然并不总是必需的，但这使得在需要时可以提取你的查询函数：

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

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

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

queryKey: QueryKey - 查询键。
client: QueryClient - 查询客户端。
signal?: AbortSignal - TanStack Query 提供的 AbortSignal 实例。可用于查询取消。
meta: Record<string, unknown> | undefined - 一个可选字段，你可以用关于查询的额外信息填充它。

此外，无限查询（Infinite Queries）还会收到以下选项：

pageParam: TPageParam - 用于获取当前页面的页面参数
direction: 'forward' | 'backward' - 已弃用 - 当前页面获取的方向。要获取当前页面获取的方向，请在 getNextPageParam 和 getPreviousPageParam 中将 direction 添加到 pageParam 中。

最后更新于4个月前