React Query useQueries

When you have a dynamic number of queries, you cannot use them in a loop, neither can you use useQuery conditionally, because it violates the rules of hooks.

But you can use useQueries hook:

function useTagsQueries({tags}) {
  const queries = useQueries(
    tags.map(tag => {
      return {
        queryKey: ['tag', tag.id],
        queryFn: () => fetchTagById(tag.id),
      }
    }),
  )
}

If you're using TypeScript, you might want to use React Query v.3.28.0 or higher, which has enabled types for useQueries hook.