How do I get the loading of one of the queries that are inside useQueries?

[Vittor-Emanoel]

Hello, I hope you're doing well.

I'm currently working with useQueries to perform multiple parallel requests based on a list of items. For each item, I generate a unique queryKey and a corresponding queryFn.

The challenge I'm facing is identifying which of these individual queries are currently loading, since useQueries returns an array and doesn't directly expose the loading state per identifier.

Here's a simplified pseudocode example of how I'm structuring it:

const results = useQueries({
  queries: items.map(item => ({
    queryKey: ['SomeKey', item.id],
    queryFn: async () => {
      const data = await fetchData(item.id);

      if (!data) return undefined;

      const filteredSubItems = data.subItems.filter(subItem =>
        validTypes.includes(subItem.type)
      );

      const total = filteredSubItems.reduce((sum, subItem) => sum + subItem.count, 0);

      return {
        id: data.id,
        count: total,
        subItems: filteredSubItems,
      };
    },
    enabled: true
  })),
});

[TkDodo]

you can return the queryKey we pass into the queryFn as part of your return value to identify it.