Use React Query's usePaginatedQuery

Share this video with your friends

Send Tweet

When working with data, sometimes you'll find yourself needing to deal with pagination. Usually this can be quite the cumbersome task, but not with react-query! It provides you with a hook named usePaginatedQuery where we can use things like resolvedData that will either resolve to the latest page's data or if fetching a new page, the last successful page's data. We will send a paginated query with Graphql and wire it up to buttons that allow us to switch back and forth between paged data.

Craig Doremus
Craig Doremus
~ 4 years ago

Like the other code samples in this series, this one is extremely out of date as the API has moved forward two version with breaking changes (v1->3). The usePaginatedQuery() function was deprecated in version 3 (see https://react-query.tanstack.com/guides/migrating-to-react-query-3#usepaginatedquery-has-been-deprecated-in-favor-of-the-keeppreviousdata-option).

Craig Doremus
Craig Doremus
~ 4 years ago