useQueries()

useQueries 钩子可用于使用单个钩子调用同时获取可变数量的查询。

此钩子的主要用例是能够获取多个查询，通常是相同类型的查询。例如，如果您获取待办事项 ID 列表，您可以在 useQueries 钩子中循环遍历它们，调用 byId 端点来获取每个待办事项的详细信息。

注意

虽然在 useQueries 钩子中获取多种类型是可能的，但与使用多个 useQuery 调用相比，没有太多优势，除非您使用 suspense 选项，因为 useQueries 可以并行触发 suspense，而多个 useQuery 调用会级联。

用法

useQueries 钩子与 @tanstack/query useQueries 相同。唯一的区别是您传递一个返回查询数组的函数，而不是在对象参数中传递查询数组。

提示

当您使用 httpBatchLink 或 wsLink 时，以下内容最终将只对您的服务器进行 1 个 HTTP 调用。此外，如果底层过程使用的是 Prisma 的 findUnique() 之类的东西，它将 自动批处理 并作为一项工作只执行 1 个数据库查询。

tsx
const Component = (props: { postIds: string[] }) => {
  const postQueries = trpc.useQueries((t) =>
    props.postIds.map((id) => t.post.byId({ id })),
  );
  return <>{/* [...] */}</>;
};

tsx
const Component = (props: { postIds: string[] }) => {
  const postQueries = trpc.useQueries((t) =>
    props.postIds.map((id) => t.post.byId({ id })),
  );
  return <>{/* [...] */}</>;
};

为单个查询提供选项

您还可以将任何正常的查询选项传递给数组中任何查询调用的第二个参数，例如 enabled、suspense、refetchOnWindowFocus...等等。有关所有可用选项的完整概述，请参阅 tanstack useQuery 文档。

tsx
const Component = () => {
  const [post, greeting] = trpc.useQueries((t) => [
    t.post.byId({ id: '1' }, { enabled: false }),
    t.greeting({ text: 'world' }),
  ]);
  const onButtonClick = () => {
    post.refetch();
  };
  return (
    <div>
      <h1>{post.data && post.data.title}</h1>
      <p>{greeting.data.message}</p>
      <button onClick={onButtonClick}>Click to fetch</button>
    </div>
  );
};

tsx
const Component = () => {
  const [post, greeting] = trpc.useQueries((t) => [
    t.post.byId({ id: '1' }, { enabled: false }),
    t.greeting({ text: 'world' }),
  ]);
  const onButtonClick = () => {
    post.refetch();
  };
  return (
    <div>
      <h1>{post.data && post.data.title}</h1>
      <p>{greeting.data.message}</p>
      <button onClick={onButtonClick}>Click to fetch</button>
    </div>
  );
};

上下文

您还可以传递一个可选的 React Query 上下文来覆盖默认值。

tsx
const [post, greeting] = trpc.useQueries(
  (t) => [t.post.byId({ id: '1' }), t.greeting({ text: 'world' })],
  myCustomContext,
);

tsx
const [post, greeting] = trpc.useQueries(
  (t) => [t.post.byId({ id: '1' }), t.greeting({ text: 'world' })],
  myCustomContext,
);