You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ This library provides a GQL directive to more easily implement pagination based
4
4
5
5
## What / why?
6
6
7
-
Cursor-based pagination, the style implemented by the Relay specific, involves wrapping a dataset in a `connection` object which presents your dataset items as a collection of `edges`. When making your query you provide a `first` (page size) value and an optional `after` value. `first` sets the number of items to return and `after` sets the start point for item selection. For example, given 100 records with sequential IDs, your initial query could include a `first` value of 10 and the second query would include 10 as the `after` value (the id of the last item in the first page).
7
+
Cursor-based pagination, the style implemented by the Relay specific, involves wrapping a dataset in a `connection` object which presents your dataset items as a collection of `edges`. When making your query you provide a `first` (page size) value and an optional `after` value. `first` sets the number of items to return and `after` sets the start point for item selection. For example, given 100 records with sequential IDs, your initial query could include a `first` value of 10 and the second query would include 10 as the `after` value (the `id` of the last item on the first page).
8
8
9
9
To support this pattern in GQL we need to
10
10
@@ -18,11 +18,11 @@ This library aims to reduce this overhead by providing a GQL directive that allo
18
18
## Install
19
19
20
20
```
21
-
yarn add relay-pagination
21
+
yarn add relay-pagination-directive
22
22
# or
23
-
npm i relay-pagination
23
+
npm i relay-pagination-directive
24
24
# or
25
-
pnpm add relay-pagination
25
+
pnpm add relay-pagination-directive
26
26
```
27
27
28
28
## Usage
@@ -34,7 +34,7 @@ Annotate any types you wish to paginate with the `@connection` directive. Apply
Often it is desirable to add additional properties to our connection and/or edge objects. This is possible using the `typeOptionsMap` config object. This is a mapping of the base type name to the configuration detail. For example if we wanted to add a `totalCount` property.
190
+
Often it is desirable to add additional properties to our connection and/or edge objects. This is possible using the `typeOptionsMap` config object. This is a mapping of the base type name to the configuration detail. For example, if we wanted to add a `totalCount` property.
191
191
192
192
```js
193
193
...
@@ -436,12 +436,12 @@ An object with the following properties
436
436
437
437
## `hasNextPage` Strategies
438
438
439
-
The intention of the `pageInfo.hasNextPage` property is to indicate to the consuming application whether it needs to query for subsequent pages of results. By default, this library will set this value to true if the data set returned from your resolver has the same length as the `first` argument. Depending on your use case this could be enough for you. For example, in a scenario where you're using pagination to load a large dataset and your UI does not display page numbers having another page is not a problem. However if your pagination is enabling some `Next` style UI button this would be bad as the user could click next and receive a blank page.
439
+
The intention of the `pageInfo.hasNextPage` property is to indicate to the consuming application whether it needs to query for subsequent pages of results. By default, this library will set this value to true if the data set returned from your resolver has the same length as the `first` argument. Depending on your use case this could be enough for you. For example, in a scenario where you're using pagination to load a large dataset and your UI does not display page numbers having another page is not a problem. However, if your pagination is enabling some `Next` style UI button this would be bad as the user could click next and receive a blank page.
440
440
441
441
These are two additional strategies that can be used to generate your own `hasNextPage` value and provide it in the resolver response.
442
442
443
-
- The simplest and lowest overhead option is to simply add 1 to the received `first` value e.g. if 100 items are requested, query your DB for 101. You'll then known if 101 records are returned that there is at least 1 more page.
444
-
- A window function can be added to you SQL query to retrieve the total (remaining) records found by a query. Most DB products support window functions and with a simple count, we can retrieve the total number of records. You can then infer that if the total remaining count is greater than the request page size that there are more pages.
443
+
- The simplest and lowest overhead option is to simply add 1 to the received `first` value e.g. if 100 items are requested, query your DB for 101. You'll then know if 101 records are returned that there is at least 1 more page.
444
+
- A window function can be added to your SQL query to retrieve the total (remaining) records found by a query. Most DB products support window functions and with a simple count, we can retrieve the total number of records. You can then infer that if the total remaining count is greater than the requested page size there are more pages.
445
445
446
446
You can view full examples of all three strategies in [this example](./examples/hasNextPageStrategies.js)
0 commit comments