Okay then gang in this lesson we're

going to be making a query to fetch the

about page content from Higgraph and

then we'll be rendering that content in

the about page component. So right now

I'm just on the high studio for the

project where I'm going to put this

query together first so we can test it

see the response and then copy the query

to use in our front end. All right so we

want to query a single page. So let's

click on that page option first of all

to add it into the query on the right

and we want to grab a specific page

based on the slug right. So we can do

that by adding the where filter to say

only fetch the page where a certain

condition is true. In our case that

should be when the slug field is equal

to about. So type that in and we should

see that that value is added to the

query on the right. All right. So then

from that page what fields do we want to

fetch? Well, we need the title field,

which is what will display in the page

headings. So, let's add that. We also

want the page content. So, we'll add

that in as well. And when it comes to

the content field, we can specify how we

want that rich content returned to us.

In our case, for now, I'm just going to

say I want the HTML version of that

content. And then I think that's about

it. So, now we can try this query by

hitting the play button up here just to

make sure it all works. And by the look

of things, it does. All right. So now

let's copy this query and then use it

from the front end. All right. So I'm

back in this hierraph file and we're

going to register this query inside the

queries object. So we'll make a new

property inside this object for the

query and we're going to call it about

page. And then for the value of that

property we're going to say hiraph

client which is the client instance that

we made in the last lesson. Then we'll

saygql which stands for graphql followed

by template string. So back ticks to put

the query inside. And this is all in the

graph docs by the way. the way we

register queries using this GQL tag

before the template string. Anyway, now

we can paste this query in and then just

format it a little bit to make it look

nicer. I'm also going to rename the

query from my query which is a little

bit generic to something like about

page. Okay, then. So now we've got this

query created, we can go ahead and use

it inside the actions file to send the

query off and fetch the data and then

we'll invoke that action from the about

page later. So let's export and make a

new server function inside the actions

file called get about page. And this

needs to be an async function because

we'll be awaiting the response of the

query inside it. All right. So we'll

need to now say const response is equal

to await followed by the queries object

that we imported and then we want the

about page query that we just added to

that object. Now all we're doing here is

referencing that query, right? But on

this query, Graffle exposes a said

method to send it off. So we're going to

invoke that method now to fire off the

query and it's going to send it then to

the high endpoint we registered in a

client instance in the last lesson and

return the page content back to us

hopefully and the page object will be

accessible on the response. So all we

need to do now then is return

response.page at the end of the

function. All right. So now we've got

this server function which sends the

about page query to hyigraph returns

then the page data at the end. All we

need to do now is invoke this function

from the about page. So let's head to

the about page which is inside the app

folder then inside the about folder and

then we want to import the server

function at the top which we can do by

saying import then curly braces and we

want the get about page action we just

created which comes from atward slashlib

slactions.

So once we've done that we can go ahead

and use the function inside this

component. So let's scroll down and

we'll say const right here and then we

could say page is equal to a weight and

then the name of the server function

which was get about page and invoke

this. Now we're using a weight here

because this server function is an async

function right but that means we also

need to make sure this component is an

asynchronous component so that we can

use a weight inside it. All right. So

now we have access to the page object in

this component. And we could access the

title and content properties from it,

which is what we asked for in the query,

the title and the content. And actually

instead of doing that, I'm just going to

dstructure those properties directly

from the returned page value by using

curly braces instead of this and then

grabbing the title and the content

fields. All right. So now we can output

those two things inside the template. So

the title is easy enough. We can just

use curly braces inside the H1 to output

that title directly which is just a

string value. The content field though

is a rich text field and we actually got

the HTML of that content back from high

because that's what we asked for in the

query. So for now we're going to

directly output that HTML in the

template here by using the dangerously

set in HTML prop on a new div tag inside

this section right here. Now, using this

prop is considered dangerous because it

opens your site up to a cross-sight

scripting attack where malicious code

can be injected. So, we have to be able

to trust the dynamic HTML that we're

trying to inject. For now, we're going

to use this approach, but I am going to

show you a better way in the next

lesson. Anyway, as a value to this prop,

we pass in an object. So, double curly

braces. And then on that object, we're

going to use the underscore HTML

property. And the value of that property

should be the content that we got back

and then the HTML property on that

content. So now we're outputting that

HTML content right here where the div

tag is and that's pretty much it. We've

made the query, sent the query, got the

content back, and we're outputting the

content in the template. So let's

preview this in a browser. All right,

then. So moment of truth. I'm going to

click on the about page and hopefully we

should see some content. Awesome. We do.

So we have the title up here and then

the content itself. And notice all of

this content is formatted as it was

inside the rich content editor. So we've

got bold text right here, which is a

strong tag. We've also got a heading

right here, which is an H3. A block

quote down here as well. There should be

a link in the content somewhere, but

it's not styled so that it stands out.

So, this is all fine, but I'm going to

show you a better way that we can render

all of this content in the next lesson.