Scroll pagination

You can use getScrollSchema (or useScrollQuery) to scroll through a cursor-based or offset-based resource.

getScrollSchema(scroller, fetcher, cooldown?, timeout?)

useScrollQuery(scroller, fetcher, cooldown?, timeout?)

Behaviour

query.scroll() will fetch the next page.

query.fetch() will fetch the first page (next pages will be discarded if the first page changed).

Scroller function

A scroller function uses the previous page data and returns the next page key.

type Scroller<D = any, K = any> = (previous?: D) => K | undefined

If you use useScrollQuery, the scroller must be memoized as it acts like a key, you can create one with a useCallback or use a top-level function.

Cursor-based example

function getHelloSchema() {
  return getScrollSchema((previous?: MyData) => {
    if (!previous)
      return `/api/hello` // <--- no previous data = first page
    if (!previous.after)
      return undefined // <--- no after cursor = last page
    return `/api/hello?after=${previous.after}`
  }, fetchAsJson)
}
 
function useHello() {
  const query = useScrollSchema(getHelloSchema, [])
  useFetch(query) // <-- all blocks are compatible
  return query
}

Using SSR & ISR Deduplication cooldown