useQueries hook for fetching unknown number of entities

When fetching an unknown amount of entities, the useQueries hook comes handy, e.g.:

let filteredUsers: number[] = [/* Unknown amount of IDs */];
const results = useQueries(
  filteredUsers.map((id) => ["user.find", id] as const);
)

The typings of useQueries went through significant overhauls lately, which might make it less cumbersome to infer tRPC’s end-to-end types.

[KATT]

Yeah, it’s very hard to deal with the types on this one which is why I haven’t added support for it.

@TkDodo, the react-query maintainer, even brought up on Twitter today that he can barely follow how the types work himself 😅 https://twitter.com/TkDodo/status/1487804403356680201

To me, this feels like an edge-case and I’m unsure if I want to support this as part of the wrapper, to be honest.

However, you can still use useQueries and achieve this if you want:

import { useRouter } from 'next/router';
import { trpc } from 'utils/trpc';
import { useQueries } from 'react-query';

const PostViewPage = () => {
  const { client } = trpc.useContext();
  const postIds = ['1', '2'];
  const posts = useQueries(
    postIds.map((id) => ({
      queryKey: ['post.byId', { id }],
      queryFn: (args: any) => {
        const input = args.queryKey[1];
        return client.query('post.byId', input);
      },
    })),
  );
  // [..]
  return <></>
}

[tianhuil]

Thank you for providing this workaround @KATT. Let me try to convince you that it’s not an edge case.

To me, this feels like an edge-case and I’m unsure if I want to support this as part of the wrapper, to be honest.

The big reason for having a native trpc.useQueries would be smart cache validation (https://tanstack.com/query/v4/docs/guides/query-invalidation). I would like to query for 10 todos (by id) and then update a single one of them without having to refetch all 10. Ideally, the code would be something like …

const {data, isLoading} = trpc.useQueries(todos.map((id) => ['todo', { id }]))

const editedId = ...
const mutation = trpc.useMutation(['todo', { id: editedId }])