How to make dependent infinite queries?

[CoolSpring8]

I'm trying to build a forum topic page with infinite scroll, where data are from two sources. The page needs to fetch the /topic/${topicId} first, and then batch query the avatars of the users at /users?id=1&id=2&.... The API is provided by a third party so I cannot change it.

My first thought is to write two useInfiniteQuerys, and the latter depends on (using enabled) the users array (IUser[][]), which is mapped from the former. To load the next page, call posts.fetchNextPage() and usersInfo.fetchNextPage() sequentially.
codepen: https://codepen.io/coolspring8/pen/OJgdxgr

However, this solution doesn't feel right. { enabled: !!users } does not stop the second query from being fired before the first query finishes and the users array gets a new element. Changing it to !isFetchingNextPage is not working as well (maybe when the second query's fetchNextPage is called, the first one's isFetchingNextPage has not been set yet). An obvious bug you can see from the codepen is that if you click "next" too fast, posts on the last page won't have their avatars loaded, until clicking "next" again.

Could someone please give me some advice?

[CoolSpring8]

Seems to have found a solution that fits the specific requirements of mine, though I'm afraid it might not be the optimal one.

const userInfo: UseInfiniteQueryResult<IUser[]> = useInfiniteQuery(
    ["user", topicId],
    ({ pageParam = data?.pages[0].map((post) => post.userId) }) =>
      ky
        .get(
          `${API_ROOT}/user?${pageParam
            .filter(Boolean)
            .map((userId: number) => `id=${userId}`)
            .join("&")}`
        )
        .json(),
    {
      enabled: open && (data?.pages.length ?? 0) >= 1,
    }
  );

const [sentryRef] = useInfiniteScroll({
    // ...
    onLoadMore: () => {
      if (isLoading) {
        return;
      }
      fetchNextPage().then((posts) =>
        userInfo.fetchNextPage({
          pageParam: posts.data?.pages
            .flat()
            .map((post) => post.userId)
            .filter(
              (id) =>
                !userInfo.data?.pages
                  .flat()
                  .map((user) => user.id)
                  .includes(id)
            ),
        })
      );
    },
    // ...
  });

return (
        // ...
        {data?.pages.map((page, i) => (
          // eslint-disable-next-line react/no-array-index-key
          <React.Fragment key={i}>
            {page.map((post) => (
              <div key={post.id}>
                <Reply
                  post={post}
                  user={userInfo.data?.pages
                    .flat()
                    .find((user) => user.id === post.userId)}
                />
              </div>
            ))}
          </React.Fragment>
        ))}
        // ...
)