How to use createInfiniteScroll with a non-number page

[onx2]

I'm using GraphQL and the Relay specification which prefers an opaque string cursor instead of a page number. Does anyone have any recommendations on how to implement using the current state or would this utility need to be updated to allow string | number?

[atk]

Just use your fetcher function to not use the page.

[onx2]

Could you please elaborate? The fetcher function has a hard coded page as a number and is used internally to create a page signal with that type. Wouldn't it be more flexible to use a generic type for the page and not assume it is a number?

[atk]

IIRC, there was already a PR to do that, but it did not support the previous use case.

[onx2]

Do you have a suggestion on how to implement the string version by doing "use your fetcher function to not use the page"? I don't understand what you mean.

Are you suggesting tracking the page internally and decoding on the FE while passing the string the BE? Ideally this utility is agnostic of pagination approach.

[atk]

If it is not numeric, you will need to fetch the string id for the subsequent pages from the server in any case. Why not do so directly in your fetcher. Nobody tells you to even use the number. Here's our example adapted to that use case:

const [nextPageId, setNextPageId] = createSignal('');
async function fetcher() {
  let elements: string[] = [];
  let res = await fetch(`/api/page/${nextPageId()}`);
  if (res.ok) {
    let json = await res.json();
    // get the id from the next page from the data:
    setNextPageId(json.nextPageId);
    json.docs.forEach((b: any) => elements.push(b.title));
  }
  return elements;
}