Oh, and by the end of the video, we're going to create this application that you see here, which is a fully functional graphic you'll server.

Let's get started.

Now let's get started by talking about what graphic you'll is.

You may be thinking that graphic you'll is this brand new, really big, complex thing.

But in actuality, all graphic ul is is a specific way to use tools that we already have.

Graphic.

You'll is just a specifications in built around Http, for how you get and received.

Resource is from a server.

Normally, you'll be using something like rest when you interact with a server and you're using rest ful end points and the http post get delete, update all that fun stuff for http requests using rest.

But Grafico gets rid of the whole idea of rest and all those different endpoints and gives you one single endpoint and the way you determine what data you get back from that end point is based on the query that you send to that end point instead of based on which end point you send the data to.

So let's look at an example of how a graph que el Khoury works versus arrest query to get a better idea of the difference between the two.

Imagine that you have the application that has books and authors as your to resource is in.

Each of these resources has maybe 15 fields in each one, so book could have name description, page count, I ESPN book cover et cetera, and same thing with author, and you're building a front and application where you want to access just the author name and all of the books and their name for that particular author.

So you want to get all the authors and their names and all of the books by all the authors and just get the name of those books, and you want to display that on your application as quickly as possible for your users.

Using a typical rest a p i n point as our first choice, we have to end points we can use, which is the authors, and point to get all the authors and then a separate and point to get all of the books for a particular author.

So the first thing that we need to do is we need to access that authors and point to get back a list of all authors and with that list of authors were going to be getting back the idea of authors and the name, which is what we want for application.

We're also going to be getting back a bunch of extra information, such as where that author lives and how old that author is, which we don't really want for this page that were displaying.

Then, once we have that list of authors, we can take the idea of each author.

So for each author we get back, we can call our server again to get the books for that particular author and then so if we have five authors, we get back, we're going to be having to call the AP I five more times to get the books for those authors, and each time we call that we're going to be getting all the information back for the books, not just the name, even though all we really want is the name.

So by using rest a p I in order to access our data like we're used to.

We have to call her a P I many more times than we really want to on.

We also have to get a bunch of extra information back from our server, which we don't actually need.

Now let's look at how graphic you'll will handle this situation with grafico.

Where you do is you compose a query of exactly the data that you want.

So you telegraph Cool that you want to get a list of all the authors.

You want their name and you want to get all the books for each of the authors and the books names you telegraphed fuel.

That single query, which is going to be very small.

You send it to the server and the server, which is your graph.

You'll server is going to parse that query and send you back exactly that information.

So with just one query to the server, you were going to be getting back a list of all the authors and their names and a list of all of their books and their names and no extra information.

You get only the information that you asked for it, and you can get as much information as you need or as little information as you need.

This is incredibly powerful and is the real reason that graphic you'll is so important and picking up so much speed.

The ability to be able to not only query specific information but also weary, nested information such as books inside those authors without having to call your server more than one time is absolutely amazing.

And this is really just the beginning of the power that graphic you'll has, since it's built just on the normal http protocol that we already used.

We don't have to use anything new or fancy in order to get started with graphical, which is amazing.

There's also plenty of different libraries out there for tons of different languages that implement all of the graphic you'll features for you in an easy to use way in our example.

Later, we're going to take a look at building a graphic you'll server using know Js and express another thing.

That graphic you'll does that's incredibly powerful is it allows you to mutate data on your server so it allows you to create, update and delete data just like you could do an arrest, a p I.

And the same thing applies to these.

Create deleting updates as with your actual get queries.

You can specify exactly what you want to be returned from those queries.

Let's say that you're going to be adding a book to a server.

You can say that you want to add a book, you give it the name you give it the author, you give it all the other information you need to.

But let's say all you really want back is the name of the book.

So you tell it.

I want you to add a book with all this information and then just returned back the name for me.

So then it will return you the name of that new book.

And maybe you want the ideas Well, sort of return you the name and the idea of that new the created book.

This is incredibly powerful.

It also has support for Ares, so you could do air handle inside a graph.

Cool.

And really it does everything that arrest a P I can do, except for it makes it so much easier for the front end of work with and it makes it so much lighter weight, since you only have to access the server one time each time you need something instead of multiple times to get all the information you need.

So now that we have a basic understanding of what Grafico is and why it's so powerful, let's get started by building out and no Js express application using graphic you Oh, where we're going to take that book and author example and fully implement the server side of it to get started.

The very first thing that we need to do is actually set up our express server, which is just going to be a very basic express service.

The first thing that we need to do is to run in P m in it.

In order to create our different package, Jason Files and we just hit enter a bunch of times here to get all of the default values.

And as you can see, we now have a package Jason file with all of our information inside of it.

Then in here, I'm just going to change our main file to be called server dot Js.

Because I prefer the name server over index for this instance next we need to install the dependencies that we're going to be using.

Just type in N.

P M.

I.

And then we need to put the different names of our dependencies.

In our case, we're going to be using express.

We're gonna be using express graphic you Well, which just let's issues Graff kill one express easily.

And we're also going to install dependency called grafico, which is going to give us all the different functionality that we need in order to use graphic You Well, And if we had enter what that run, it's going to install all these different dependencies and Adam to our package Dodge a sound file.

And now that we have all those installed, there's one last dependency that we're going to stall to make working locally easier.

And that's called no demon.

So npm install.

And we want to just do this as a deaf dependency.

So we just say, Save Dev and we can put in here nude Mon, which will allow us to reload our server whenever we save our files, instead of having to reload our server manually by stopping it and starting it.

And at once that all finishes installing.

We're going to create a single script here in order to run our node.

Been server.

So if we could just type in here, Dev, Start says this is what we're going to use when we do development.

We could just say death start and we just want to run Node mom server dot Js Now that we have that set up, we can create our server dot Jason file over here.

Now we have our servant I jazz file.

We could set up just the most basic express application.

So we're going to get expressed here from our packages and then we're going to get the app part of express.

So we just call that express function to get a wrap, and we just need to tell our app that we wanted to listen on Port 5000 and just so that we know that this is actually running.

Let's just put a simple function here.

It just says that the server is running and now if we save that and run the command that we created by coin npm run Deb start Since we called the death start and we hit enter, you should see that it says that our servers running and if we go to a local host 5000 you'll see this as cannot get index because we don't actually have any routes created.

But we do know that our server is now running.

So let's actually work on adding graft well into our server.

In order to do that, we need to require grafico.

So we need to require our express graphic you Oh, which we imported earlier with our package.

Jason.

So we just take that inn express craft.

You'll just like that And we can actually added root for application so we could just say after use.

And we want this to be at graphic you'll So when we go to slash graphic UL local host 5000 slash craft will, it's going to run the code in here.

We could just say express graphic you well, and in here we just leave empty object for now, since we don't have anything actually pass to it Other than the fact that we want to say graphic you'll graphical we want to pass true to this, which is going to give us an actual user interface toe access.

Our graph kill server without having to manually call it through something like postmen.

Now, if we save that and go to that euro graphic you Oh, you'll see that we get an air saying that we need a schema for our graphic you will and the way that graphic you'll knows which data access based on the query that you send it is you have to define a schema of how all of your data interacts together and that Seema is what we need to pass into our express graphic ul function so that our express craft Cole knows what are actual Graff kill data looks like.

So let's just create a dummy query here to see how this works.

So in order to create a query, we actually need to import a few things into our application.

So if we go up here, we can say that we want to import a few different things from the library of graphic you'll that we mentioned earlier, and we want to import our scheme of First of all.

So there's an object called graph que o schema, and we also want to import the object type because in graphic, you'll everything is actually strongly type.

So an object type just allows you to create a dynamic object full of a duffer and other different other types.

So in here we could just say graphic you Oh, object type.

And that will be an actual object type that we can import.

And now we need to create a new scheme of So we'll just call our scheme that here equal to a new graphic ul schema.

And here is where we define our actual schema.

So, like I said, we're just going to be creating a dummy scheme it here.

So the first thing we want to do is to find the query section, which is essentially the getting up data so well defined the query perimeter here.

And we want to set this query here equal to a new graphic.

You'll object type and inside of this object type, what is going to give it a name of hello world And in here we need to do spine.

The fields that held the world returns so we can save fields and we just set this to a function here.

So it is create a function and inside a dysfunction, we actually returned the different fields that we want to return.

So in our case, we're just going to be returning object, and this just going to have a message here, and this message is actually going to be an object which is going to define the type of our message.

So we just put an object in here and we know that we want the type of this to be a string.

So we need to actually import the graf cool string, object.

So here we could just say graphic you Oh, string, import that.

And then we can use that as our type down here for a message.

So now graphical knows that our hello world object has a message field and that message field is going to return a string.

And then lastly, we needed to telegraph cool.

Where to get this message from so anarchist.

We just want to give it a static message of hello world, And this is going to use the results section of this object, which is just going to be a function that tells graphic you'll where to get the information from.

So we just have a simple function here, and this function is just going to return.

Hello world.

Now if we actually pass that scheming into our function down here by saying schema and we call that object schema.

So now if we save that and refresh over here, you'll see that we get this graphical interface over here, and you notice immediately that we get in there saying that the name for a hello world does not actually work because it contains a space which is not valid.

So we'll just remove this space here and re save it.

And if we refresh this, you'll see that we no longer get any errors in our graphic you'll server.

And we can actually query our graphical server and we can look at the docks over here.

As you can see, it says that we have a single query called Hello World, which returns a message that's a strength.

So let's call that query.

We just have to say query inside of our brackets here we want to put what we wanted query.

In our case, we just want to query the message, and if we hit run, you'll see we get message Hello, world back.

And we can actually remove quarry here because by default.

Graf cool will use the query keyword instead of actually adding data.

So if we run this again, you'll see that we get our message back.

Even though we didn't specify, that's a query that is just the default.