useQueries and useInfiniteQuery combination help

[berkaycirak]

is there a way to combine those two hooks? I am trying to fetch multiple queries and also want to handle a logic with infinite scrolling through those data. I need an hook like useInfiniteQueries to handle this logic :) otherwise for 4 different fetch, I will write a same logic with useInfiniteQuery, that looks dirty on code ( four times useInfiniteQuery logic with different four fetches)

[TkDodo]

I don't understand the question. Please show a reproduction

[berkaycirak]

Okey, think that I have an api which returns me different things based on the endpoint.
api1= .../tasks
api2= .../liked-musics
api3= .../liked-films

In that case, I want to fetch those all in parallel with useQueries

const result = useQueries({
    queries: endpoints.map((endpoint) => ({
      queryKey: [endpoint],
      queryFn: ({pageParam}) => fetchFn(endpoint,pageParam),
    }))
  });

Now I have a result with those three api's responses. Think that, each response contains hundreds objects of an array like
response1 = [{...},{...},{...},.....100 more]
response2 = [{...},{...},{...},.....100 more]
response3 = [{...},{...},{...},.....100 more]

Instead of querying like that I want to use pagination since my endpoints have pagination option. Each time I will fetch 10 object of an array on related endpoints. You can see my fetchFn below

const fetchFn = async (endpoint,pageParam)=>{
  let apiUrl = `..../${endpoint}?skip=${pageParam * 10}&take=10`;
  const result = await axios.get(apiUrl);
  return result.data

However, in order to do pagination and infinite scroll logic via tanstack query, I should use useInfiniteQuery hook. There is my stuck point. How can I relate those pagination and infinite scroll logic to my queries while querying all in parallel as like useQueries do. If I want to do that, I have to use useInfiniteQuery for each api endpoint without using useQueries. This is kinda code smells. I guess, there should be a logic where we can combine useInfiniteQuery and useQueries like useInfiniteQueries

[berkaycirak]

Thank you @TkDodo. I have one more question. In my api, returned data is ordered according to timestamp but when I use fetch function in useInfiniteQuery ( I am fetching 10 items per fetch), data is returned me as unordered. Do you have any idea

[uguptu]

there is no useInfiniteQueries hook. You just need to call useInfiniteQuery once for each "different thing".

If it's dynamic, split it up into components. I generally think there should be a <Tasks> component, a <LikedMusics> component and a <LikedFilms> component that all do their own fetching (infinite or not, doesn't matter). There's usually no good reason to stick completely different things into the same component. Imo that's just standard react component composition.

Good advise and normally I would do that, but if one needs to "infinite load" multiple data requests into one data array, like some DataTable implementations (including Tanstack's) require, then I don't have a luxury of splitting my list of things into individual components, do I? Anyhow I am trying to wrap my head into how can I do that and I can't.

There is a specific use case, DataGridPro from MUI Pro package, and awful thing, but we are forced to use it in my team at work. It accepts the whole hierarchical dataset into one array of objects where each object represent a row and "path" array field is responsible for the data item hierarchy. I load the top level, the "group rows", with a single infinite query, but by expanding each group I have to initiate another individual infinite query, and because I have to feed the table componen with the data, I have no choice but implementing those secondary infinite loads with custom code and utilise useEffect and global state to store all that huge mess of a data before I feed it to the table component.

Any advise for such cases @TkDodo?

[TkDodo]

have you tried doing multiple requests in the queryFn to fetch & build the complete data set ?

[uguptu]

No, the goal is to literally keep "Loading more" by a button click, for each subgroup

[uguptu]

To be honest, I am even considering making an invisible list of invisible component group items each of them is maintaining its infinite query setup and handles loading more, but I still need to use useEffect to update the array of items on each load, which sucks.