useInfiniteQuery pages

[tigawanna]

hey there

was wondering if there was a way to return one page and concatenate all the incoming pages as one array.
Encountered this issue after playing around with Github's Graphql API and it can return nested arrays which get harder to iterate over and handle pagination with every level.

With one level of depth, I created a custom function in the select option to merge them into one array,
I did this mostly because I also wanted the ability to filter through all the results, which didn't work predictively when trying to filter through nested arrays so i had to combine them into one

export const concatPages = (repo: InfiniteData<GetRepoRefsQuery>, keyword: string) => {
  let totalRepos = repo.pages[0].repository?.refs?.edges
  let i = 1;
  for (i = 1; i < repo.pages.length; i++) {
    if (repo?.pages) {
     //@ts-ignore
      totalRepos = [...totalRepos, ...repo.pages[i].repository?.refs?.edges];
    }
  }
 const filtered = totalRepos?.filter((item) =>
    item?.node?.name.toLowerCase().includes(keyword.toLowerCase())
  );
const base = repo.pages[repo.pages.length - 1].repository;
 const repos = {
    ...base,
     refs: {
      edges: filtered,
      totalCount: base?.refs?.totalCount,
      pageInfo: base?.refs?.pageInfo,
    },
  };
  const final: InfiniteData<GetRepoRefsQuery> = {
    pageParams: [...repo.pageParams],
    //@ts-ignore
    pages: [{ repository:repos }],
  };
  return final;
};

but when requesting something like a list of branches and the most recent commits to them, it returns a deeply nested field which would be easier to deal with if react query returned it as one page.

kind regards

[TkDodo]

data transformation is something you have to handle for yourself. If your api returns nested data and you don't like that, you have to unfold it somewhere.