usePaginationQuery hook

[mdugue]

Hi, I'm somewhat new to URQL and still exploring its features, best-practices and eco system. Something that I'm still struggling with is Pagination, especially when trying to query the data as well in a paginated inifinite scrolling manner as well as as in a selective way (eg. first 3 for a preview or so).
I came across

• relayPagination from @urql/exchange-graphcache/extras which is a great & simple way to get relay pagination started but creates difficulties when trying to call the data in an unpaginated way.
• https://formidable.com/open-source/urql/docs/basics/ui-patterns/ which provides more flexibility but is more verbose

I was wondering if there are further possibilities such as encapsulating the paging logic into a hook, such as useQuery 🎉. AFAIK relay does sth similiar. Unfortunately I haven't been able to create one by myself yet, as I wasn't sure how to start. It wouldn't be buildable around useQuery due to looping needs, it looks challenging to include TypedDocumentNode, I didn't really understand the relay approach with the fragments and directives etc.

I was thinking about a shape more or less like that, given a relay compliant Connection is used:

// same return type & first parameter as useQuery
// second parameter for paging details, could provide good defaults
const [result] = usePaginationQuery({query: QUERY, variables: {}}, {pathToPageInfo: "node.friends.pageInfo", pageSize: 10})

The hook would encapsulate the logic of storing the "after" cursor and related responses, could flush them once variables or Query changes, etc…

Does somebody have experience in that area? Are there other approaches that you could recommend?

Thanks a lot in advance 🙏

[JoviDeCroock]

Personally a big fan of this where you actually hold caches of pages as this is both efficient in your data-cache and your rendering process thanks to keys.

[mdugue]

wow, that was a quick answer, thanks a lot!! 🚀
I followed this example (which is also referenced in the docs, see above) recently when refactoring from graphcaches relayPagination-Resolver. I still had the impression that it made the code more complex and harder to read. Thats why I'm looking for some solution that abstracts away the page complexity from the rendering of the actual list. Do you know of any further approaches?

[JoviDeCroock]

I mean, you can follow the naive approach of doing

export const usePagination = (query, variables) => {
  const [result] = useQuery({ query, variables }) 
  const prevFetching = useRef(result.fetching)
  const [data, setData] = useState([])
  useEffect(() => {
    if (!result.fetching && prevFetching.current) {
        setData([...data, result.data.nodes])
    } else if (/* detect pagination reset filter change or w/e */)

    prevFetching.current = result.fetching;
  }, [result])
}

[mdugue]

hm… I'm not sure if I fully understand the idea behind this. Do you have a working example somewhere? Where would you adjust the pagination cursors? Outside the hook? Would the hook only take care of storing the concatenated results?

[JoviDeCroock]

I mean, the API-boundaries are up to you, nothing is holding you back from incorporating nextPage and stuff in here but that's in my opinion a detail. Catering to all the pagination needs generally bloats libraries enormously and most users will only use one paradigm as opposed to all of them.

If you use limit offset for instance you can just hold your offset in a state and return [data, nextPage /* offset + limit */]

[mdugue]

ok, I see. Thanks @JoviDeCroock for the fast replies and detailled explanations 👌

Still if somebody comes by and knows about a simple drop-in-replacement for useQuery, supporting Typescript typed-document-node etc, I'd be more than happy to know about, be it opinonated on relay-connection or so… I'd be more than happy to know about