Skip to content

Commit

Permalink
Merge pull request #49 from dangerismycat/patch-2
Browse files Browse the repository at this point in the history
Minor copyediting of pagination.md
  • Loading branch information
Sashko Stubailo authored Sep 8, 2016
2 parents 6670036 + c291e2f commit acf6ed8
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions react-docs/source/pagination.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ In this article, we'll cover the technical details of using Apollo to implement

<h2 id="fetch-more">Using `fetchMore`</h2>

Apollo lets you do pagination with a function called [`fetchMore`](cache-updates.html#fetchMore), which provided on the `data` prop by the `graphql` HOC. You need to specify what query and variables to use for the update, and how to merge the new query result with the existing data on the client. How exactly you do that will determine what kind of pagination you are implementing.
Apollo lets you do pagination with a function called [`fetchMore`](cache-updates.html#fetchMore), which is provided on the `data` prop by the `graphql` HOC (higher-order component). You need to specify what query and variables to use for the update, and how to merge the new query result with the existing data on the client. How exactly you do that will determine what kind of pagination you are implementing.

<h2 id="numbered-pages">Offset-based</h2>

Offset based pagination - also called numbered pages - is a very common pattern, found on many websites, because it is usually the easiest to implement on the backend. In SQL for example, numbered pages can easily be generated by using [OFFSET and LIMIT](https://www.postgresql.org/docs/8.2/static/queries-limit.html).
Offset-based pagination also called numbered pages is a very common pattern, found on many websites, because it is usually the easiest to implement on the backend. In SQL for example, numbered pages can easily be generated by using [OFFSET and LIMIT](https://www.postgresql.org/docs/8.2/static/queries-limit.html).

Here is an example with numbered pages taken from [GitHunt](https://github.com/apollostack/GitHunt-React):

Expand Down Expand Up @@ -106,7 +106,7 @@ One downside of pagination with numbered pages or offsets is that an item can be

<h2 id="cursor-pages">Cursor-based</h2>

In cursor-based pagination a cursor is used to keep track of where in the data set the next items should be fetched from. Sometimes the cursor can be quite simple and just refer to the ID of the last object fetched, but in some cases - for example lists sorted according to some criteria - the cursor needs to encode the sorting criteria in addition to the ID of the last object fetched. Cursor-based pagination isn't all that different from offset-based pagination, but instead of using an absolute offset, it points to the last object fetched and contains information about the sort order used. Because it doesn't use an absolute offset, it is more suitable for frequently changing datasets than offset-based pagination.
In cursor-based pagination, a cursor is used to keep track of where in the data set the next items should be fetched from. Sometimes the cursor can be quite simple and just refer to the ID of the last object fetched, but in some cases for example lists sorted according to some criteria the cursor needs to encode the sorting criteria in addition to the ID of the last object fetched. Cursor-based pagination isn't all that different from offset-based pagination, but instead of using an absolute offset, it points to the last object fetched and contains information about the sort order used. Because it doesn't use an absolute offset, it is more suitable for frequently changing datasets than offset-based pagination.

In the example below, we use a `fetchMore` query to continuously load new comments, which then appear at the top. The cursor to be used in the `fetchMore` query is provided in the initial server response, and has to be updated whenever more data is fetched.

Expand Down

0 comments on commit acf6ed8

Please sign in to comment.