useQueries()

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

¥The useQueries hook can be used to fetch a variable number of queries at the same time using only one hook call.

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

¥The main use case for such a hook is to be able to fetch a number of queries, usually of the same type. For example if you fetch a list of todo ids, you can then map over them in a useQueries hook calling a byId endpoint that would fetch the details of each todo.

注意

虽然可以在 useQueries 钩子中获取多种类型，但与使用多个 useQuery 调用相比，没有太大优势，除非你使用 suspense 选项，因为 useQueries 可以并行触发悬念，而多个 useQuery 调用会瀑布流。

¥While fetching multiple types in a useQueries hook is possible, there is not much of an advantage compared to using multiple useQuery calls unless you use the suspense option as that useQueries can trigger suspense in parallel while multiple useQuery calls would waterfall.

用法

¥Usage

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

¥The useQueries hook is the same as that of @tanstack/query useQueries. The only difference is that you pass in a function that returns an array of queries instead of an array of queries inside an object parameter.

提示

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

¥When you're using the httpBatchLink or wsLink, the below will end up being only 1 HTTP call to your server. Additionally, if the underlying procedure is using something like Prisma's findUnique() it will automatically batch & do exactly 1 database query as a well.

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 <>{/* [...] */}</>;
};

为个别查询提供选项

¥Providing options to individual queries

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

¥You can also pass in any normal query options to the second parameter of any of the query calls in the array such as enabled, suspense, refetchOnWindowFocus...etc. For a complete overview of all the available options, see the tanstack useQuery documentation.

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

上下文

¥Context

你还可以传入可选的 React Query 上下文来覆盖默认值。

¥You can also pass in an optional React Query context to override the default.

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