Rendering paginated data is a very common UI pattern to avoid overloading bandwidth or even your UI. React Query exposes a
usePaginatedQuery that is very similar to
useQuery that helps with this very scenario.
Consider the following example where we would ideally want to increment a pageIndex (or cursor) for a query. If we were to use
useQuery, it would technically work fine, but the UI would jump in and out of the
loading states as different queries are created and destroyed for each page or cursor. By using
usePaginatedQuery we get a few new things:
data, you should use
resolvedDatainstead. This is the data from the last known successful query result. As new page queries resolve,
resolvedDataremains available to show the last page's data while a new page is requested. When the new page data is received,
resolvedDatagets updated to the new page's data.
latestDatais available. When the desired page is being requested,
undefineduntil the query resolves, then it will get updated with the latest pages data result.