Okay then my friends. So now we're

fetching a list of posts for the

homepage and we can click on a post to

go to the post details of that page.

Right? And because we added that slug to

the href of the link, we can see the

slug in the address bar up here after

the blog part. And because we can access

any route parameters like the slug from

within a page component using the params

prop, we're able to grab that slug and

show it on the page as well. So then now

I want to use that slug to query

Higgraph for a single post including all

of its actual content and show that on

the details page for each one. All

right. So let's head to the API

playground then in the studio to build

and test this query. And I'm going to

make a new tab in here to start with a

new blank query. And I'm going to call

this post by slug because we'll be

querying the um post by the slug, right?

will be using that slug to get a

particular post. All right. So now let's

select the single post option in the

explorer to query a single post and then

we want to select the where option to

outline which post that we want to

fetch. In our case we want to do that

where the slug matches a particular

value. So we can see the slug option

right here which we can select. And

right now it's asking us for a slug

value here to fetch a single post which

has that slug value. Now later when we

add this to the project code, we'll be

using a query variable to pass that slug

in dynamically to the query. But right

now I'm just going to paste in a single

slug value just so we can test this out.

All right then. So now it's only going

to query that single post with that

slug. And we just need to outline which

fields that we want back. Now this time

we still want the title, right, and the

summary because we're going to show that

at the top of the blog post. So I'm

going to select both of those. But we

don't need the thumbnail anymore because

that was only for the blog list on the

homepage. We do need the content field

though. So let's add that. And since

we'll be using the rich content

component to render this, we'll also

need to add the raw field to the content

as well. And on top of this, we also

want to display the author or the user

who wrote this post. So we can add that

by selecting the created by field which

is automatically added by hygraph to

content entries. And within that, we

want the name of the person who created

it. All right. So, I think that's

everything. And now we can hit the play

button up here to make sure it all

works, which it does. Awesome. We can

see the post object response right here.

So, now let's copy this query and use it

in our application. All right. So now I

want to add this query to the queries

object in the Higgraph file. So let's

first of all add a new property to that

and I'm going to call this post by slug.

And the value of this property like the

others should begin with hygiaph client

then.gql

followed by a template string where we

can paste in the new query. And I'm just

going to tidy this query up a little bit

as well so it's formatted correctly. Now

remember, we're currently hard coding a

slug right into this query. And we need

that slug value to be dynamic and passed

into the query when we run it. Because

depending on what post we land on, that

slug is going to be different. So to

allow this, we're going to use a query

variable. Now, when a query uses a

variable that's allowed to be passed

into the query, we have to specify that

after the query name inside parenthesis,

just like we would for a function. And

inside these parenthesis, we can give

this variable a name, which must start

with a dollar sign followed by whatever

we want to call it. for example, slug.

Then we add a colon and we say what type

of data this variable should be. And in

our case, this slug should be a string

with a capital S. So this type is not a

JavaScript type. It's a GraphQL type.

And the GraphQL server on Higgraph will

enforce this type rule before it returns

any data. And if we pass the wrong type,

well, it's not going to work. So we're

also going to add on an exclamation mark

at the end of this type which means the

variable is nonnullable and we must pass

a value for it. Okay. So now this query

can accept the slug variable and we can

now use that variable in the query

itself down here instead of hard coding

the slug value. So let's replace that

with dollar sign slug which is the

variable name. And now we have this

query in place. we can go ahead and make

a new server function inside the actions

file which uses this query to fetch the

post. So then inside this file we can

make now a new function which we also

need to export and I'm going to call

this get post by slug. Again it needs to

be an asynchronous function because

we'll be using a weight inside it to

make the query. And this time we're

going to take an argument into this

function called slug because we'll need

to pass that slug into the query when we

send it. All right. So now we can send

this query by saying const response is

equal to and then it's await and then

queries and we're going to use the post

by slug query. And then we need the send

method at the end of that. So how do we

then pass the slug variable into the

query? Well, this send method provided

by that graph package accepts an

argument which is an object. And on this

object, we can specify any variables as

properties that we want to pass into the

query. So I could just add the slug

property and set the value of that to be

slug, which is the argument that we take

into this server function. And because

these are both named the same, we can

just shorten this to be slug. And that

does the same thing. Okay, so now we're

making that query. We're passing the

slug in. And finally, we just need to

return the response. So let's do that

down here by saying return followed by

response.post

to return the post object on that

response.

All right. So we have this function

created now and we can use it inside the

blog details page which is in the app

folder then inside the blog folder then

inside the slug folder. So in Nex.js JS

we can register route parameters in the

route by using square brackets around

the folder name right and whatever the

value is in the URL it's captured by

nextjs and attached to a params prop

which automatically gets passed into the

page component so we can access whatever

the parameter is called in this case

slug because that's what we name the

folder right in square brackets from

that params ob uh prop like this all

right so now we can use that slug

parameter from the URL and we can pass

it into that new server function that we

just created. First of all, then I'm

going to paste this import at the top of

the file to get that server function

from the actions file. Then I'm going to

say const down here in the component

followed by some curly braces so we can

dstructure the properties that we want

from the post object response. And for

now we'll just set this equal to a

weight and then get post by slug. Then

we'll invoke this action and we need to

pass in the slug parameter. And remember

because we're using a weight here, this

page component must also be an async

one. So what properties do we want from

the post then? Well, we want the title,

we want the summary, and we want the

content itself.

Also, we want the created by property.

And remember, the content property will

have a raw field, which we'll use to

render the rich content. And the created

by property will have a name field,

which we'll use to output the author

name. All right then. So now we can

start using these properties in this

template. We're going to start with the

title field. So we can replace this here

with curly braces and then the title

value. Below that we can output the name

of the author by replacing this with

curly braces. And inside those we can

say created by name.

And then after that we've got a section

for the blog summary. So let's replace

that bit with curly braces and then the

summary field inside them. And next up

is the content itself, which we're going

to come back to in a moment. But before

we do that, I want to just scroll down

here to the sidebar, which is where

we'll eventually be outputting more

posts by this same author. So inside

this, all I'm going to do for now is

replace the generic by author text with

curly braces and then output the created

by.name value so that we're actually

showing the author name instead. Right?

It's a little less generic. All right.

So now we can go ahead and render the

content using that same rich text

component as before. So then to do that

first of all I'm just going to make a

quick import up here and that import is

going to be the rich text component from

this package we installed earlier on in

the course. And then down here we can

output this rich text component instead

of this. Now again I'm just going to

copy this and paste in because we saw

exactly how to use it before. We don't

need to write this out from scratch, but

we just use the rich text component. And

then we have the content prop and we

pass in the content. Property right

here. Remember, we grab the content up

here.

Then we specify the renderers. And all I

want to do is update how we're rendering

the H4s. So I say take in the children

to this function and then display an H4

like this with this class just to give

it some margin in the Y direction up and

down. and then the children inside that.

So that's all we're doing. And actually,

I've just tried this in a browser and

I'm getting an error saying this export

doesn't exist. Get post by slug. And

that's because I named it get posts. So

I'm just going to update that right now.

Press save and hopefully this will work.

All right. So let's try one of these

out. Let's click on read more. And yeah,

we're getting all the content. This is

the title. Bit of a typo there. We've

got the author name. We have the

summary. And then the content itself.

Also, the author name right here as

well. Let's try another one. Go down

here. Um, Elder Ring speedruns. Yep,

everything seems to be working. Awesome.