In this video, you're going to learn what GraphQL is, what problems it's trying to solve.
And by the end of this video, you will have your very own GraphQL API that you can build further on.
GraphQL was developed internally by Facebook in 2012 and was released publicly in 2015.
So why did Facebook create GraphQL?
Did they just want to create something new for fun, or was there a specific problem they were trying
to solve?
GraphQL is a data query language, which means it allows us to make specific queries and only get the
data we want.
No more and no less.
You can think of it pretty much as using SQL, but for the client side, such as on your mobile app
or on your web app.
This way you can make custom specific queries and get exactly the specific data you need for each client.
Let's try and see how you could make a blog app inside of a rest API versus a GraphQL API.
So let's say we want to build the profile page for our blog app.
Profile page could have, for example, a username, let's call it Bob in this example and a picture
of Bob, maybe a bio of Bob telling about his life and maybe the user's blog post, Bob's blog post,
his updates, and then we have Bob's followers.
Let's try and see how we could make this invest in rest.
You define specific endpoints for different resources like this users slash ID and maybe you will get
data such as this containing Bob's username, his profile picture URL, the bio of Bob and his followers.
If you also wanted all of Bob's blog post, maybe you would go to another endpoint like this user's
slash ID slash post, and this way you would get an array of all of Bob's blog post.
Now, remember that Bob has a list of followers as well, and we would like to display these followers
profile picture as well.
Unfortunately, if we're really trying to make this follow restful guidelines as much as possible,
we would have to go to a new endpoint on all the different users to get their profile pictures.
And now, even though we only wanted the profile picture and the username from each endpoint, we also
get each user's bio and even their followers also.
Yikes.
So this means we will be making a large amount of round trips to our API.
Round trips means the motion of getting data from our server and going back to our server again, making
new requests again based on the data we got last time.
We could also have a user's bio on another endpoint or have followers on another endpoint, but we would
still be making a lot of round trips every time we wanted to see a profile page.
Then we would need to go to our endpoint for the bio and the endpoint to get the followers and so on.
We'll still be making a lot of round trips.
Round trips can take a lot of time and it can be slow and difficult to make a lot of round trips for
the client, especially if the client has a bad network connection.
This is why Facebook created GraphQL so people would are not so good.
Internet connection could have a better chance of getting the data without making a lot of round trips.
Now you might be thinking, well, why don't we just create an endpoint which has all the data we need
for the profile page?
And you could do that.
The restful guidelines is saying basically you need to make an endpoint for every resource.
In this case, we're making a specific endpoint for a page or a view.
And the problem you have with that is this.
Now let's say we create this endpoint for profile page.
We can make one like slash pages, slash profile page, slash the user ID.
Now, when we go to this endpoint with Bob's user ID, we see this.
We see Bob's username, his followers, the bio, his profile picture, the post.
So basically we're getting all the data we need to show on this profile page.
Problem solved.
No round trips, right.
So unfortunately, we have a problem now.
What if you have a mobile client and you don't want to show as much data as you do on the web client?
Now you need to create a new endpoint or you'll be using the same endpoint and you'll be getting more
data than you need.
So either you make another endpoint for a mobile app, for a web app, maybe even a console client.
Who knows?
Or you follow the restful guidelines to the tick and you end up with a ton of round trips.
Now, what if there's a better way?
This is why Facebook built GraphQL.
They wanted to build a smart API, which could fetch the data exactly as the client wanted dynamically
for each different client.
Now let's see how GraphQL can solve this problem for us.
Let's see how our GraphQL query for this could look like.
So in this case, we have a query called Get User and we ask to get the field username profile, picture
bio and the post and the followers.
And inside each of these fields we have sub fields with the title and content for the post, and likewise
for the followers.
We have the username and profile picture.
And this is how the response would look like.
So as you can see, we get exactly the data we want.
But now let's see how it would look like if we have a mobile client and maybe we don't want to show
the content for each post.
So this is how our request would look like on the mobile client.
As you can see, we removed the content from the post field.
Now we just get the same response but without the post content.
This is the beauty of GraphQL.
You can get exactly the data you need, no more and no less.
And without making any round trips.
You can adapt your queries as much as you want on various different clients you may have.
Now, if you know rest well, you might also know that rest has something called query variables, which
means you can make a bit more custom requests to your endpoints.
For example, you could have a query variable saying Show post content to false or show byrow to false.
And that works well.
Maybe you could use that to change up things for your mobile client or change some things for your web
client.
The problem with these types of query parameters is that you can end up with URLs that looks like this.
I'm not even going to speak this out.
This is not even the worst I've seen.
I've seen much worse in production rest APIs where you basically have to read a manual to figure out
what you have to pass in of parameters and variables inside of your query.
Sometimes people even convert these types of get requests into a post request because there are so many
variables you need to pass in to get the content you want.
And what's worse is that rest is not self-documenting, which means that it's up to rest developer to
document how the API works, or you have to document how the rest API works.
And that can get pretty hairy sometimes.
Thankfully, GraphQL is self-documenting, which means that you can explore the API, look at what fields
you can request and what queries you can make, and you can see it very easily.
I hope you've gotten interested in the problems that GraphQL can solve by now, and maybe you want to
get started building your own GraphQL server right away.
Now in the next ten minutes, we're going to build our very own GraphQL server.
It's going to be a basic, simple movie library.
In this section, we are going to build a basic GraphQL API for a movie database.
It's going to be a GraphQL API containing info about movies, their actors, directors and so on.
In the final project we will be able to create movies.
Read our current list of movies, update info about the movies, and of course delete the movies.
So in the end of this project, we will have learned how to build a basic Crud app with GraphQL.
Later on, we will see how we can connect to a database like MongoDB and have our very own movie database.
But for now we will just create a basic GraphQL API to get a taste of how GraphQL is like.
To get you started, you will need to have NodeJS and Visual Studio code installed.
Please go to nodejs.org and install the latest version of Node.
If you do not have node or installed already that is.
In this course I will be using Visual Studio code, but if you prefer to use another editor, you are
of course free to do that.
First thing I will do is I will go into my integrated terminal in Visual Studio code and create a new
folder for our project.
Let's call it movies.
So I will type make Dear GraphQL movies and let's go into our newly created folder in Visual Studio
code.
Now let's create a index.js file where we will be creating our GraphQL API.
And let's go inside of our integrated terminal again.
And this time we will type npm init.
Dash dash.
Yes.
In this case we will be using Apollo server and GraphQL node packages.
Now let's get on to the coding part.
So let's first import Apollo Server and gql.
So const Curly Brace, Apollo Server.
Comma Chikuwa Curly brace.
And we require that from the Apollo server package.
Now Apollo Server lets us create a GraphQL API really fast, which is using Apollo server 2.0 and Gql
is to create our GraphQL type definitions.
I will explain soon what type definition is and how we create one and so on and what they mean.
But for now, let's just create our sample data collection which we will be exposing through this GraphQL
API.
It's going to be a really basic sample data.
We will be creating a we're going to be creating a array of movies.
So we have Const movies, Square bracket, and inside here we have an object, which is a movie containing
a title Terminator two Judgment Day.
The movie has a director, of course, which is James Cameron in this case, and an array of actors.
In this case, we just have one actor we put in Arnold Schwarzenegger.
Then we go on to the next movie, which is Alien, and it has director Ridley Scott and the actors.
In this case we put in Sigourney Weaver.
Okay, so that's our sample database we're going to exposing in through this GraphQL API.
Now let's create our type definitions for GraphQL.
So we put in const Typedefs.
Notice the capital D.
That's important later on.
And we put in Gql and Backticks.
Notice the Backticks.
That's important.
And inside the Backticks, we type our types in.
In this case, it's type of a movie.
And the movie has a title, a director and actress.
So title is a string.
In this case, it's a scalar type string.
So GraphQL is a strongly typed language, which means we can write the scalar types for each of these
int results we get.
And movie itself is a scalar object which we can define ourselves.
You can also define your own custom scalar types, but most of the time you can get along fine with
the core scalar types that GraphQL has.
The example of core scalar types that GraphQL has is int, float, string, boolean and ID.
But remember, if these are not enough for you, you can always create your own custom scalar types
or import even third party custom scalar types if you want to use other people's types.
Okay.
So and then we have a director which is also a string, and we have lastly the actors.
So the actors is a bit more special because that is an array of the object type actor.
So we need to write our own object type beneath, which is a type we call actor.
And it's going to be really simple because it just contains a name, which is the scalar type string,
and that's pretty much it.
Now we just need the final type, which is a special type in GraphQL.
It's called Query, and this is where we can have our root queries we can make in the GraphQL API,
which means it's the queries we can start out with.
So I will show you later on so you can see how this works.
But for now we will write in movies and it's going to return an array of the object type movie, just
like we did in the movie where we have actors that returns an object type array of actor.
We have the root query called movies, which returns an object type array of movie.
So that was our type definition.
That was pretty simple for now.
It's a lot of new concepts you have to take in, but hopefully as we keep building on this project and
you keep practicing, you will get it.
Um, that's all there is to that.
Now, um, let's see.
We need to write our solvers.
Now, we basically did 80% of our GraphQL API now.
Now we need to write our servers.
So resolvers define how we get our data in the queries while the type definitions define what is our
data, how is it related to each other?
So we write const resolvers and this is an object which contains lots of properties.
In this case we write query property, which is the root query we can make, and that again has a different
properties, which is the queries we can make.
In this case we have the movies and this is basically a function which returns our data.
Now in a normal API, we will of course have calls to, for example, a database here or even other
rest APIs or other APIs you have, and you would make the calls and fetch the data in here.
But in our case we have just a simple movies array, so we just return that movies array and GraphQL
is automatically going to do all the filtering we need to do for getting the specific fields.
And you will see later on when we fetch with the when we, uh, fiddle around with the client how this
works.
So we have the movies, which is just a basic function that returns the movies array.
Now let's get on to actually creating our server and starting it.
Const server, new Apollo Server.
We pass in our type definitions and our resolvers.
Now we can start the server, we write server listened and then we can do a console log where we show
our URL that the server is starting on.
Okay, great.
Now let's start the server.
We can now run Node Index.js inside of the console and we will see the server running.
Now, when the server is starting, you can see inside of the console the URL that the server is on.
In this case, for me it's localhost port 4000 and we can go inside here.
Now when you click on the address in here, you will be taken to something which is called the GraphQL
Playground.
It's a newer version of the GraphQL exploration client.
You can say before we had something called GraphQL, its older version, but it still is being used
a lot.
But GraphQL Playground, for example, has Http headers and built in that you can set, which is going
to be useful, useful later on for projects you're doing.
So and you can say GraphQL Playground is what Postman is to rest.
So if you mess around with rest, you probably use Postman before to explore an API to find out what
kind of queries you need to make to get the data you want inside of your clients, such as your React
client or your mobile client and so on.
So let's see how our data looks inside of GraphQL playground.
Okay, so inside of GraphQL Playground, you can make the queries.
You can explore the API that you have.
And you can even explore the schema.
We have the type definition schema we defined before.
So if I click schema over here on the right side, I can explore the queries, I can make the root queries
we see here, which is movies that's returning an array of movie.
And we click here, we can see the type of movie it has a title, director and actress.
And again, if we click on actors, we can see what type is an actor.
So actor is a type containing a name, which is a string.
So that's how you can explore the API one way.
Another way is to simply type in here and you can get auto completion running.
So if I type the curly braces in here, we can see there's auto completion coming up with the root queries
I can make.
In this case, we have the movies query I can make and if I type enter, select it and make a space
and then I type control space, I can have another root query, but that's not what I want.
I want to get the subfields of movies so I press a curly brace again and now I can select the sub fields
of the movies.
So in this case, title director and actors.
So let's select the title.
And we see there's no red squiggly lines.
So I can make the query.
Now I can press the play button over here or press control, enter as the shortcut.
And now we get the data we want or we want.
In this case, for example, if we have a mobile API or a mobile client and we just want to get the
title of each movie.
So here we have the data which contains the movies array with the title.
You can also press Prettify over here to format the query you want more nicely so we can build further
on it.
And let's say we also have a web client and on this web client we also want to display the director
so we can press just show us the director by pressing control space and you can get the auto completion
press enter and then you can press control Enter.
And now you also see the director inside of the results here.
So let's say we also want to see the actors so we press enter again and press control space and select
the actors.
Now, since actors is an object type and it can't be shown as it is just like that, you also need to
have a selection of sub fields.
So you need to make another curly bracket in here and you need to pass in another sub field.
So in this case we only have one sub field, which is the name of the type string like so.
And now we can fire off this query again and we see all of the actors inside of the movies, or at least
one of them.
Um, and again, we can press prettify over here to prettify our query.
So that was pretty much it.
That is how you make a GraphQL API in ten minutes or so and you start exploring it in four minutes.
So in the next sections, I would like to show how we can connect to a real database such as MongoDB
or create movies.
You can also create objects, of course, through GraphQL, just like you can create objects in rest
or delete movies or get a longer list or add more data to the movies.
Basically build further on to this API that we built in just these ten minutes ago.