To actually perform pagination over the connection, we need use the
loadNext function to fetch the next page of items, which is available from
Let's distill what's happening here:
loadNexttakes a count to specify how many more items in the connection to fetch from the server. In this case, when
loadNextis called we'll fetch the next 10 friends in the friends list of our currently rendered
- When the request to fetch the next items completes, the connection will be automatically updated and the component will re-render with the latest items in the connection. In our case, this means that the
friendsfield will always contain all of the friends that we've fetched so far. By default, Relay will automatically append new items to the connection upon completing a pagination request, and will make them available to your fragment component. If you need a different behavior, check out our Advanced Pagination Use Cases section.
loadNextmay cause the component or new children components to suspend (as explained in Loading States with Suspense). This means that you'll need to make sure that there's a
Suspenseboundary wrapping this component from above.
Often, you will also want to access information about whether there are more items available to load. To do this, you can use the
hasNext value, also available from
hasNextis a boolean which indicates if the connection has more items available. This information can be useful for determining if different UI controls should be rendered. In our specific case, we only render the
Buttonif there are more friends available in the connection .
Is this page useful?