All right then, gang. In this lesson,

we're going to start fetching post

content. So, we can list these posts on

the homepage. And for this, we're going

to need to make a new query. So, I'm

back on the Higraph Studio where you can

see we've got all of these blog posts

that I created before. I think I added

about 10 in total so that we've got some

good data to play with. And now, I'm

going to head to the API playground to

put this query together. So, then on

this page, we'll first of all make a new

tab up here for a new query. And I'm

also going to name this query posts so

that when we copy this query into the

project code later, we don't have to

rename it then. Anyway, in this query,

we want to tell high to send us a list

of posts. So let's click on the posts

option in the explorer first of all.

Then once we've done that, we can just

specify which fields we want from each

post. So we're going to be showing a

list of these posts on the homepage,

right? And we don't want to show the

entire thing, just a preview of each

one. So, for that, we'll select the

title of the post and the summary and

also the thumbnail because even though

we won't be using it yet and we've not

added any thumbnail images yet, we will

be doing that later. I also want to add

the slug of each post because we'll be

using that to link to the individual

post pages. And then finally, I want to

order these posts by the created at

date. So to do that we can use the order

by filter up here and we can select

published at descending for the value.

And notice when I do that it adds the

filter to the query. All right. So I

think that's all we need. Let's try this

out by hitting the play button up here

and making sure we get that list of

posts back as a response with those

fields which we do. Awesome. We can see

the post property which contains that

list. So let's copy this query now and

then head back to the code to set it up.

Okay then. So now let's head to the

hierigraph page which is where we

register these queries inside that

queries object and I'm going to add on a

new property for this query which can be

something like posts. So the value of

that property is going to start the same

way as the other one that we made with

hygiaph client which is that client we

made earlier with graffle. Then we can

saygql

followed by a template string. So back

ticks and then within those back ticks

I'm just going to paste this query in

that we copied and format it just a

little bit to make it look nicer. Right?

Then so now we have this second query

registered inside this object. Right?

And again you don't need to put all your

queries in an object like this. If you

don't want to you can write them

directly within your page components or

the actions file or some other file if

that's what you prefer to do. I'm just

doing it this way to stay organized for

this series because then I know where

all of my queries are going to be.

Anyway, now we have this. We can create

a new action in the actions file which

uses this query to go and fetch all the

posts. So, let's head to that file and

we'll export and make a new function

down here which I'm going to call get

posts, but you can call it whatever you

want. Doesn't really matter. It doesn't

have to be called this. And this

function needs to be asynchronous

because we'll be using a weight inside

it to fetch those posts. Okay. So now

inside we can say const response is

equal to await

and then we want the queries object and

then on that we need the posts query.

Now to send this query we need to use

that send method which graph attaches to

all the queries that we make using the

clients. So then this sends off the

query and hopefully it sends back all

those posts like we saw in the API

playground earlier and we just now need

to return those posts by saying return

down here and then response.posts.

Okay. So now all we need to do is invoke

this action from the homepage so we can

use all of those posts in the template.

So to do that I'm going to head to the

homepage file which is inside the app

folder. And inside this file, the first

thing I'm going to do is paste in the

action import at the top. So this is the

action we just created to query the

posts. And now down inside the component

itself, we're going to invoke this

action by saying const post posts is

equal to await and then the action

itself which is called get posts and we

can invoke that. Now again because we're

using a weight, we also need to make

sure this page component is an

asynchronous one by using this async

keyword up here. And once we have these

posts, we can then use them as the

initial pro uh the initial posts prop

value down here in the post list

component instead of just the empty

array. So now inside that post list

component, it's going to map through the

posts that we pass in and output a bit

of template for each one. Let's open

that file then which is inside the

components folder somewhere.

All right. So we already accept this

initial post prop which contains all

those posts now and we just need to go

through this template and output the

post detail. And by the way we store the

post in this state. So we'll be using

posts down here not initial posts. All

right because that's what we map

through. All right then. So for each

post what do we need to output? Well

first of all the key for the article. So

let's delete this value right here. And

we need something that's unique for each

post. And we know that the slug for each

post must be unique. So let's use that

post. slug. All right then. So what

else? Well, we don't have any images

uploaded to Higgraph yet. So we'll leave

that for now. But we can update the alt

tag right here. So instead of outputting

the post title, I will use dollar sign

curly braces and then say post dot title

for this. So this is the title of the

blog, right? So, we're just using that

for the alt text. All right. Same down

here. Post.title. Post.title.

And then we have the summary. So, post

dot summary

like so. And then we actually already

had this slug set up. So, this button at

the bottom to read more goes to

forward/blog. So, into the blog folder.

And then the slug is output after this.

All right. So, that's already done as

well. And I think that is pretty much

it. All right. So, now we can see all of

those posts on the homepage, including

the post title and the post summary. We

still see that default placeholder for

the thumbnail, but that's because we've

not added any post thumbnails yet, but

we will do later. Also, if we click on

one of these links, it takes us to the

post details page for that post, and we

should see the post slug in the address

bar, which we do. And that post slug is

also being output in the template as

well because I grabbed that from the

params prop in this page component. In

the next lesson then we'll fetch this

single post using the post slug and then

we'll show that post content on this

page.