Okay then, my friends. So far, we've

been able to fetch all the posts on the

homepage, and every single one of them

is listed right here. And that's not so

bad at the moment because we've only got

about 10 of them. But what if we had 50

posts or 100 or more? Well, then we

wouldn't want to show them all at once

on this page, right? Because that would

mean the page would be huge and with

lots and lots of content that a user

might even never scroll down to, and it

would be a lot of potentially useless

data to fetch. Instead, it would be nice

to have some pageionation in place where

we only fetch say four posts and we show

those by default on this homepage. Then

at the bottom of those posts, we could

have a load more button which when we

click triggers another query for the

next four posts and renders those as

well. And then we'd click that button

again to see the next four and so forth.

So we're going to start this process in

this lesson by updating the query to

fetch the posts which implements this

kind of pageionation behavior. And then

in the next lesson, we'll finish the

process by updating the homepage to

implement that new query. To start with,

I'm going to head back to the high

studio and to the API playground to

explore how we can put this kind of

pageionated query together.

So I have got a brand new query up here

called posts and I've deleted some of

the old ones as well that we don't need

anymore. And now we're going to make

this query to grab the posts, but only

four at a time. And we're going to ask

for some pageionation data as well. So

then this time instead of selecting

posts from over here, we're going to

select the posts connection option. And

for every data model that we add to

Higgraph, we get this model connection

option automatically added to the

GraphQL API for us. Now the reason I'm

using this post connection option this

time is because as well as allowing us

to query the posts, it also allows us to

get page information which can be used

for pageionation. So then inside this

post connection option, we're going to

see some slightly different things that

we can query for. Now the first thing I

want to query is the page info which

contains that pageionation information.

So I'm going to select that option and

from inside that I want two things. I

want the end cursor which is the cursor

position for the last post that we

fetch, for example, the fourth post. And

I also want the has next page property,

which tells us if there's any more

entries left after the most recent

fetch. So, we're going to use both of

these things later when we're making

subsequent queries for more posts. The

next thing we want are the posts

themselves. And this time, they're

within a property called edges. So,

let's select that first of all. And this

edges structure for GraphQL APIs was

actually introduced by Relay, I think,

which is Facebook's GraphQL client. So

you can think of edges as just like a

list of entries where each entry is

called an edge right and each edge

contains the entry data itself which is

called the node as well as some cursor

information which can be used for

pageionation. So from this edges

property we want the node which is the

post entry itself and from that we want

the title and summary fields and the

slug field as well. So let's select all

of those. Oh, and also we want the

thumbnail field and from that we want

the URL of the thumbnail which again we

won't be using yet but we will be doing

later on. Okay, so now we've got this

general query now and if we hit this

play button to test it, we should see a

response which includes all those posts

but also at the top we should see this

page info which includes an end cursor

and a has next page property. Now

currently that has next page is false

and that's because we fetched all 10

posts in this query. So naturally

there's no next page of data. But if we

limit the query to x number of posts we

should see that change. So what I'm

going to do now is come back to these

post connection filters to add a maximum

number of posts to fetch. And we can do

that by adding this first filter and

setting it equal to something like four.

And this means fetch me the first four

posts. I also want to order these. So

I'll click on the order by filter and

order them by published at date in

descending order. So if we run this

query again, we should see that now we

only get back four posts and the has

next page value is true this time

because there are more posts available.

Now if we were to run this again, we

would just see the exact same four

posts. So how do we set this query up to

fetch the next set of four posts? Well,

we can use another filter which is

called after. And the value of this

filter should be a cursor. So remember

in our query, we also asked for the end

cursor, right? And that's the cursor of

the last post in this set of four. And

we can see that cursor over here at the

top of this response. So we could grab

that cursor, right? copy it and paste it

right here as the value. And now if we

were to run this query again, it should

get us the next four posts after these

initial four, which when we run the

query, we should hopefully see. Awesome.

So in essence, when we're using this

query in the project, we need to be able

to keep hold of the end cursor, right?

And then pass that into the query when

we want to fetch the next page of posts.

And we'll do that by setting the end

cursor up as a query variable. Also,

currently when we get a response, we're

getting properties like edges and node

in the object that we get back. And that

is a little bit abstract and confusing.

So in GraphQL when we're making queries,

we can actually give fields custom names

by adding that name before the field

itself and then a colon. For example,

edges could be called posts by adding

the word posts just before it. Then a

colon and a space to say the post

property should be the edges. And the

node could be called post singular by

adding the word post in front of it

followed by a colon and a space. So if

we do that and then we click on the play

button again, we should see that in the

response those property names update to

be posts and post which is nicer. We'll

still have to restructure how we're

accessing all this data from the code

because it is still structured different

but at least we're having these property

names now in the response which is

better than edges and nodes. So let's

copy this query and head back to the

project to use it. So then now let's

replace the current post query with this

one back inside the queries object in

the high file. So it's this one down

here that we need to replace. So just

delete all that first of all and then

we're going to paste in the next one

which includes all of that pageionation

data. All right. So currently as well

we're hard coding the cursor value into

the after filter right and really we

need to be able to dynamically pass in

the end cursor every time we run this

query to update the entries that we get

back. So I'm going to come to the query

name and after that I'm going to add

some parenthesis to accept a query

variable which I'm going to call dollar

sign cursor. Remember it has to start

with a dollar sign. And the type of that

should be a string. But we don't need to

add the exclamation mark on because if

we don't pass a value it will be null

and when the curse is null it just won't

be used. And by default we'll just get

back the first four posts. So, the first

time we use this query, we're not going

to need to pass a cursor value in, and

we'll just get that first set. Anyway,

now we need to replace that hardcoded

cursor with the cursor variable down

here. And once we've done that, we're

pretty much done with this query. Now,

we already have an action defined inside

the actions folder, which runs this

posts query. And we now need to update

that action because the data structure

that we get back is a little bit

different. So open that file up and then

go to the get post function where the

first thing we're going to do is accept

an argument called cursor and we'll set

the default value of this argument to be

null. So again when we call this

function to begin with we're not going

to pass in a cursor argument and it's

going to default to null instead in this

query and we're just going to get back

the first four posts. Then we also need

to pass this cursor value as the query

variable inside the send method just

like we did before with the slug using

curly braces.

Also, we need to change how we're

accessing the data from the response

object because as well as posts, now we

also have the page info property. So,

before we return the value, I'm going to

dstructure both of these things from the

response by saying const and then curly

braces. And we want the posts property

and we want the page info property. And

we set this equal to response and then

posts connection because that's the

property we're querying now not the

posts one. All right. If we go back to

the query itself over in the other file

we can see the root property is the

posts connection one. That's why we need

to do that. All right. So back in the

action then down here we can return an

object instead which contains the posts

property and the page info property. And

then that's all we need to do in this

action. But we also now need to update

how we access the posts from this action

in the homepage because we're no longer

just returning the posts. We're

returning an object with the post

property inside it. So then let's go

back to the homepage where we currently

invoke this action and we're storing the

return value in this constant called

posts. But like I just said, this return

value is now an object with two

properties on it, posts and page info.

So, we just need to dstructure the posts

from the response using curly braces

instead. And later, we're also going to

be destructuring the page info as well.

But for now, this is all we need. And

since to begin with, we're not passing a

cursor value into this function call, it

defaults to null in the query, which

means we're just going to get that first

batch of posts. Okay, then. So, we're

still passing in the same posts array

into the post list component as the

initial post prop. That doesn't need to

change. But we do need to update the

post list component in just one place.

So let's open that file up from within

the components folder.

And inside this file, we need to make

just one simple change where we map

through the posts array and output some

template for each post because each item

inside that post array is no longer just

a post object directly, but it's an edge

object. Remember we talked about edges

and nodes before, right? Well, this post

array right here is an array of edges.

And edges contain the node itself, the

post, and the other cursor information

as well. So, all we need to do is

dstructure the post property from the

edge object inside this map function.

And now this will work exactly the same

way. So, let's just quickly recap. We've

updated the query to get the posts by

accessing the posts connection this time

which includes extra page information

for pageionation. We also said just get

the first four posts starting at the

given cursor value which to begin with

is null. So it defaults to the first

four. Then we updated the server

function in the actions file to extract

the post array and the page info from

the response and return both of them in

an object. In the homepage, we updated

how we access the posts because we

needed to dstructure them from the

returned object. And finally, in the

post list component, we updated how we

accessed each individual post from the

edges inside the array by dstructuring

the post value right here. So then we've

updated all that and everything

currently should work almost exactly the

same way except we're asking now only

for the first four posts. And in the

browser, we can see that everything does

still work and we're just getting those

first four posts. Awesome. So, we've set

the query up and we're fetching the

initial batch of posts, but we've not

yet implemented any kind of real

pageionation beyond this. So in the next

lesson, we'll be making it so that when

we click on this button, we trigger

another query using the end cursor as

the cursor variable value to fetch the

next four posts and then the next four

after that and so forth.