Okay then gang, now we've got the

starter site up and running and we've

also created a new hygiaph project. So

now I want to start making content on

hygraph which we can then fetch from the

next JS site and show in the browser. In

our case we want to make some blog post

content and also some content for an

about page. So how do we do that then?

Well, if we click on the content link

over here, we're going to see a message

telling us we've not created any content

models yet. And there's a button here

that says go to the schema builder which

is where we can make a new content model

from. So before we add any content like

a blog post for example, we have to make

a model for that type of data. A blog

model and that model outlines what

fields that content type should have.

For example, a title field, a summary

field, a thumbnail field, etc. Once we

have that content model created, two

things are then going to happen. One,

we're allowed to add new entries for

that content model. two hygraph updates

the graphql schema so we can query that

content from the front end. So then we

can click on this button right here and

that just takes us to the schema page

which you can also reach by clicking on

the schema link in the sidebar. Then we

can click on this button to make a new

content model. So let's give this model

a display name which I'm going to call

post because it's going to be a blog

post model. The next two fields, the ID

for the GraphQL API and the plural of

that are automatically generated for us

based on the name we give it. And the

description field is optional. So I'm

just going to skip that for now and hit

the add model button. So then once that

model's created, we should see over here

on the left under models. And now we can

start adding new fields to it. Now

before we do that, I just want to toggle

this switch right here to show the

built-in system fields. And these fields

are automatically applied to every new

model that you create in Higgraph. So

they include things like the ID field,

uh the created at field, updated at and

so forth. And these fields are managed

by Higgraph and they get updated for us

automatically, but we can still query

them from the front end, which is nice.

Anyway, let's toggle that back off and

we're going to start adding some fields

of our own. So then, what fields do we

need for a new blog post? Well, I'm

thinking that we need a title field, a

one or twoline summary as well, a

content field for the actual post

content, and maybe a post thumbnail as

well. So, let's start by adding the

title field. Now, when we're adding new

fields to a model, we can choose from

the different field types listed on the

right hand side over here. And all of

these field types are organized into

data types, I guess, like strings,

integers floats booleans dates JSON

etc. So we can just drag and drop one of

these fields like the single line text

field over here to add it to the model.

And when we do that, a form is going to

slide right out for us to configure that

field. So we need a name for the field,

which is going to be title. And as we

type that, the API ID automatically

updates for us as well. We could add a

description, but we'll skip that because

the title is pretty self-explanatory.

Right now down here we've got some extra

field options and the first one is

autocheed for us which is use as title

field and that basically means look

shall we use this field as the main

identifying field of a content entry.

Does that make sense? So I'm going to

keep this checked. Next we can make the

field localized which enables different

values for different translations. We're

going to keep this unchecked because

we're not going to be working with

translations. But then down here we've

got some validation options. Now, we're

going to check the first one, which is

to make the field required. We'll also

check the second one to make the title

unique because we don't want multiple

blogs with the same title. The third

option is to limit the character length,

which I'm just going to leave. The

fourth one is to make it match a regular

expression pattern like an email, which

I'm also going to leave unchecked. And

the last one is to restrict reex

patterns, which again I'm going to just

leave unchecked. We don't want to do

that. then we can skip over these

advanced options as well and just click

on the add button to add the new text

field to the model. Okay, so now we can

see that first field in this post model.

And if we hover over that field, we

should see a little edit button in case

we ever want to edit or change anything

about that field. So then next I want to

add a slug field which is a URL friendly

identifier. So let me drag and drop that

below the title field. And same again,

we're going to see a form slide out so

that we can configure this field. So the

title of this is going to be slug and

the API ID autogenerates based on that

value. And down here this time we've got

a different option which is to generate

the slug from a template. And that means

we can have Higgraph autogenerate a

value for this slug field based on the

value of another field in this model.

And we can reference any other field in

curly braces right here. For example, I

want the slug to be generated based on

the title value, right? The title of the

blog post. So I can use curly braces and

then the name of that title field, which

is just title. And now higgraph should

autopop populate the slug field for any

new posts based on whatever title we

give to the post, replacing spaces with

hyphens. I also want to keep this next

option checked, which is to make the

slug field all lowercase. Then I'm going

to scroll all the way down to the

validations and make sure that the field

is required. Make sure it's unique

because we don't want two slugs the

same. And also keep this pattern match

checked as well, which means only these

characters can be used to start the slug

followed by this repeating pattern of

either dashes, slashes, or the same

subset of characters. Basically, this

limits the field to being a URL friendly

slugike string. All right. So then I'm

going to come right down here and click

on add to add this second field to the

model. All right. So let's add the next

fields. Next up, we're going to want a

summary. And rather than this be a

single line of text, we want it to be a

multi-line text because there might be

two or three sentences. So let's add

that in below the slug right here. And

for a display name, we'll say summary.

This gets autopop populated. And then

down here, we can allow multiple values.

Can we? No. Localized field. No. Um,

we're going to make this required

because we do want every post to have a

summary. It doesn't need to be unique.

Let's limit the character count. Let's

say that the min is going to be 10

characters and the max is 200. So, it

can't be a huge summary, but there must

be a couple of sentences. All right. So

down here, we don't need the advanced

ones. Let's click add to add this field.

And then after the summary, we want a

rich text field. So let's add that over

here. This is for the page content

itself. So we will call this content.

And then down here, we don't want enable

embedding. Basically, that allows you to

reference other posts. We're not going

to do that. Um, if we keep scrolling

down, these are the formatting options.

So this is a rich text field, right? So

it allows us to format the text as we

type it. And these are the different

options available in that rich text

editor. So you can uncheck any of these

if you don't want them. For example, if

you don't want links, then I think there

is a link option right here. You can

deselect this and then users won't be

able to add links in that rich text. I'm

going to keep them all selected though.

This is required. Doesn't need to be

unique. And we'll add this.

All right. So there's one more and that

is the thumbnail field. So let's scroll

down here see what we've got and it is

this one right here asset picker. So if

we bring this at the bottom we can call

this thumbnail

like so. And now we can say we don't

want allow multiple assets to be checked

because it's only one thumbnail per

post. Um it's not going to be required

either because to begin with we're not

going to be using images. I'm adding

this image field now, but we're not

going to be using them until later on in

the course. But I still want to add

posts. So I don't want to make this

field required just yet. Maybe in the

future it would be required, but I think

that's all we need. So let's click on

add to add this final field.

Okay then. So I think now we've got

everything we need for the post model

and we could start adding some post

content right now. However, I also want

to make one more content model and that

is a page model. so that we can deliver

page content like for the about page in

the app from hierraph as well. So from

here let's go to the little add button

in the sidebar up here to where it says

models and click on that to make a new

one. And this time I want the name of

this model to be page. And as we type

that the following two fields they're

autopop populated again based on that

name. So we'll leave off the description

again for now and we're just going to

hit the add model button down here to

make that model. And then again, we just

need to add the different fields for

this model, which is going to be pretty

similar to the fields on a post, right?

We need a title for the page. We need a

slug and a content field for the actual

page content. The only things we don't

need really that a post have is the

thumbnail and also the summary. So then,

since we've already seen how to make

these fields before, I'm going to speed

this video up now while I add them. Then

once I'm done, I'm going to slow it down

again.

All right. So, I've done that now. And

now we have a post model for blog post

content. And we've added a page model

for page content. And now, if we tried

going to the content page by clicking

the link in the sidebar, we should see

if we open the custom views section on

the sidebar here, those two models. And

if we click on one of those models,

we're going to see a button to add a new

entry for that model over here. So,

we're not going to start adding content

in this lesson, but we will do that in

the next lesson. And we'll also have a

play around with the GraphQL API for the

content using this built-in playground

area as well.