Initial page creation.

changeling 2019-05-15 12:06:08 -05:00
parent da8551321f
commit a57797e327

112
Relay-Pagination-example.md Normal file

@ -0,0 +1,112 @@
For this example, we're using `DjangoObjectType` and a hypothetical django model for Place. Neither of these is necessary, and it's being included only to present a complete (almost) example. Simply replace the model assignment, and use the appropriate `ObjectType` in place of `DjangoObjectType` in the initial type declaration (`class Place_Node_Type(DjangoObjectType)` herein) for your application, and pagination will be yours!
For this example, we're going to assume a basic understanding of what `startCursor` and `endCursor`, and really, `pagination` as a concept, actually **are**, and just quickly provide you with the basics of pagination-in-graphene's **how**.
In a nutshell, `pagination` is implemented via graphene relay's `Connection` and `ConnectionField` pairing. With these in place, you'll see `pageInfo` available within your queries. It looks something like this:
```
"pageInfo": {
"startCursor": "YXJyYXljb25uZWN0aW9uOjQx",
"endCursor": "YXJyYXljb25uZWN0aW9uOjQz",
"hasNextPage": false,
"hasPreviousPage": true
},
```
In addition to a `cursor` element within `edges` that will show you the cursor id for each element, like so:
```
edges {
cursor
node {
<whatever>
}
}
```
The basic implementation below provides the elements for cursor-based pagination that you'll need to do your thing in your code. Hope this helps.
```
from graphene import Connection, ConnectionField, Node, Int
from graphene_django import DjangoObjectType
from <wherever your models exist> import Place
class Place_Node_Type(DjangoObjectType):
class Meta:
model = Place
interfaces = (Node, )
class Place_Connection(Connection):
class Meta:
node = Place_Node_Type
count = Int()
def resolve_count(root, info):
return len(root.edges)
class Query(object):
places = ConnectionField(Place_Connection)
def resolve_places(root, info, **kwargs):
return Place.objects.all()
```
The following query, (the pageInfo element is included for illustration, but isn't necessary for the query to resolve):
```
{
places(first: 3, after: "YXJyYXljb25uZWN0aW9uOjQx") {
pageInfo {
startCursor
endCursor
hasNextPage
hasPreviousPage
}
edges {
cursor
node {
id
name
}
}
}
}
```
Gives us:
```
{
"data": {
"places": {
"pageInfo": {
"startCursor": "YXJyYXljb25uZWN0aW9uOjQy",
"endCursor": "YXJyYXljb25uZWN0aW9uOjQ0",
"hasNextPage": true,
"hasPreviousPage": false
},
"edges": [
{
"cursor": "YXJyYXljb25uZWN0aW9uOjQy",
"node": {
"id": "UGxhY2VfTm9kZV9UeXBlOjQz",
"name": "Wilton, Franklin, Maine, United States"
}
},
{
"cursor": "YXJyYXljb25uZWN0aW9uOjQz",
"node": {
"id": "UGxhY2VfTm9kZV9UeXBlOjQ0",
"name": "Boise City, Ada, Idaho, United States"
}
},
{
"cursor": "YXJyYXljb25uZWN0aW9uOjQ0",
"node": {
"id": "UGxhY2VfTm9kZV9UeXBlOjQ1",
"name": "Helena, Shelby, Akabama, USA"
}
}
]
}
}
}
```