useMultipleQueries

[hornta]

I'm trying to make a general hook for making subscribing/selecting in multiple queries at once because we do a lot of that in our app. What I've come up is working but the problem is that I can't get the result typed correctly. I'm no TS-ninja so I appreciate any support 🙂

export const useMultipleQueries = <T, R>(
  endpoint: ApiEndpointQuery<
    QueryDefinition<T, any, any, R, any>,
    EndpointDefinitions
  >,
  options: (T | SkipToken)[]
) => {
  const dispatch = useAppDispatch();

  useEffect(() => {
    const subscriptions = options
      .filter((options): options is T => {
        return options !== skipToken;
      })
      .map((options) => {
        return dispatch(endpoint.initiate(options));
      });
    return () => {
      for (const subscription of subscriptions) {
        subscription.unsubscribe();
      }
    };
  }, [dispatch, endpoint, options]);

  return useAppSelector((state) => {
    return options.map((options) => {
      return endpoint.select(options)(
        state as any
      ) as QueryResultSelectorResult<QueryDefinition<T, any, any, R, any>>;
    });
  });
};

// Intended usage:
const user1And2Posts = useMultipleQueries(myApi.endpoints.getPosts, [{user: 1}, {user: 2}]);

[phryneas]

You know how to NerdSnipe:tm: me.

I've started implementing a full-fledged version of this - I was kinda putting that off for a very long while.

Since I don't have a lot of time atm.: cooperation is highly welcome, it's far from done right now.

#2402

[Jonesus]

What's the intended API for this feature? Should the end-user use it like @hornta 's example

const user1And2Posts = useMultipleQueries(myApi.endpoints.getPosts, [{user: 1}, {user: 2}]);

or more like #1353 (comment)

const useGetPostsQueries = useQueries(myApi.endpoints.getPosts);

const user1And2Posts = useGetPostsQueries([{user: 1}, {user: 2}]);

or maybe even:

const { useGetPostsQuery, useGetPostsQueries } = myApi;

const user1And2Posts = useGetPostsQueries([{user: 1}, {user: 2}]);

[phryneas]

In the end probably like const [result1, result2]= useGetPostsQueries([{user: 1}, {user: 2}], options);.

[paulleonartcalvo]

I realize this is an old discussion but I've been attempting to use @hornta 's solution for a situation where i need to return the query results for an arbitrary number of queries. Im running into the issue where the array being regenerated by the selector in each render causes some react memoization to break. Is there an approach that i could take to make sure the array reference is not different if none of the contained elements have changed?