Buggy interaction between returning filtered data in the combine property for useQueries function about query HOT 3 CLOSED

This is an interesting one, and took me some time to figure out, but I think I've got it. It's a problem with how we do smart property tracking (not so smart in this case).

We try to minimize re-renders by only re-rendering a component if it actually uses something that it is interested in. To do that, we keep track of what gets used, for each query. You can read more about this here: https://tkdodo.eu/blog/react-query-render-optimizations#tracked-queries

With useQueries, we also do this per query. But when you call .some on an array, it will eagerly abort if it gets a true hit, thus only invoking result.isLoading for the first query, which means when the loading state for the queries 2-4 changes, we don't re-render the component.

That + the .filter function, which will make sure that we track the data property will lead to only the data property being tracked. If you don't have the .filter function, we will have an empty set of properties to track, which means we're tracking all properties. That's why it works without filter, but not with it.

That's certainly a bug, but I'd need to dig into how to fix this. As a workaround, you can set notifyOnChangeProps: 'all' on your query to get a consistent result:

 queries: ids.map((id) => ({
   queryKey: ["post", id],
   queryFn: () => fetchPost(id),
   retry: false,
+  notifyOnChangeProps: "all",
 })),

If I don't find a fix, I will probably force set notifyOnChangeProps: 'all' if combine is specified on useQueries. This might run combine more often, but that's better than missing re-renders. We don't track the result object of useQueries anyways, so this option is not too useful if combine is specified.

from query.

Sounds good. Thanks for the quick reply, really appreciate it. I have read your blog before (really excellent resource) but I will brush up on it again.

from query.

I found a proper fix, please try out v5.24.7

from query.