RTK Query - Multiple requests in a single query - Reuse cached data.

[Valli-]

Hey guys,

I'm building a community app with a lot of views based on users/users-data.
My main feed is a Flashlist which need to have pure components, so as far as I know, I have to do all the data fetching done before rendering the Flashlist, so hook-based fetching is out of the scope.

My setup:
I use RTK Query with auto generated endpoints/Open Api.
Base -> Generated -> Enhanced.

On top of this I chain multiple requests into a single query (https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#performing-multiple-requests-with-a-single-query).
Which it self is no problem, I have placed a queryFn in the Base with some custom code.

But now I want to reuse / cache data with this initial request so I can reuse the userdata in the rest of the app.

My take on this:

async queryFn(_arg, _queryApi, _extraOptions, fetchWithBQ) {
        const getFeed = {
          url: `/feed`,
          method: 'GET',
          params: {
            sort: _arg.Sort,
            pageNumber: _arg.PageNumber,
            pageSize: _arg.PageSize,
          },
        };
        try {
          const feedData = (await fetchWithBQ(getLiveFeed))
            .data;
          feedData.data.map(async (card) => {
            return {
              ...card,
              users: await getUsersByIds(
                card.userIds.map((x) => x.id),
                _queryApi.dispatch,
              ),
            };
          });
          return { data: [] }; //Todo..
        } catch (error) {
          console.log(error);
          return {
            error: error as FetchBaseQueryError,
          };
        }
      },
    }),

getUsersByIds :

const getUsersByIds = async (ids: string[], dispatch: AppDispatch) => {
  const { enhancedApi } = await import('./api-enhance');

  return await Promise.all(
    ids.map((id) => {
      return dispatch(enhancedApi.endpoints.getUsersByUserId.initiate(id))
        .unwrap()
        .then((result) => {
          return result as GetUserResponse;
        });
    }),
  );
};

By doing this I can now reused the user-hook in other components and the data is already cached.
Is this approach acceptabel or is there any other way or should I just drop this silly idea :D