The complete guide to building a GraphQL API | Xavier Decuyper | Skillshare

The complete guide to building a GraphQL API

Xavier Decuyper, Keep learning!

The complete guide to building a GraphQL API

Xavier Decuyper, Keep learning!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (1h 42m)
    • 1. Course overview

    • 2. What is GraphQL?

    • 3. GraphQL vs REST API's

    • 4. Fields & Arguments

    • 5. Aliases & Fragments

    • 6. Variables

    • 7. Mutations

    • 8. Setting up: Project structure

    • 9. Installing dependencies

    • 10. Configuring Babel

    • 11. Dummy database

    • 12. Object types

    • 13. Queries

    • 14. Input object types

    • 15. Creating mutations

    • 16. Building a Schema

    • 17. Testing our GraphQL API

    • 18. Introduction to GraphiQL

    • 19. Install & Configure GraphiQL

    • 20. Using GraphiQL

    • 21. Conclusions

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

GraphQL is a query language developed by Facebook to power their mobile applications. It's a replacement for traditional REST API's and is far more flexible and faster. With GraphQL you can query multiple resources with a single request to the server. Making it ideal for web applications and mobile apps.

It's very easy to write your own GraphQL API. It's compatible with any database and can even work across different database engines if required. Start now and have your GraphQL API running in no time!


Meet Your Teacher

Teacher Profile Image

Xavier Decuyper

Keep learning!


Hello, I'm Xavier, a passionate developer with a wide interest. I have worked on countless of projects and I'm always looking for new and exciting stuff. Through Skillshare I want to pass along some of my knowledge to you!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Course overview: Hi there. My name is Savvy and this is the Complete guide to building a graph Pirelli P I with JavaScript now graphic. You'll is gaining a lot of popularity right now because it is vastly superior to traditional rest. AP eyes. Big companies like get up Facebook and Yelp are all moving to Graft Ul because it's so much better during this course. I'll assure you how to build a graphic euro MP I with JavaScript Discourse is structured in five parts. I'll start by explaining the basic principles of crafty. Well, after that will make some preparations and start implementing our graphic you l a p i. Finally, we will take a look at graphical a great tool for testing your graphic you l a p i. To make this all a bit more realistic, we will create a graphic you l a p i for a block. I have a small database with block posts, authors and comments that we will use as the basis for our A p I. To follow along. You'll need some basic knowledge of javascript and no Js. You don't need to be a programming expert, though the code and examples that I used throughout this course are simple and self explanatory, so basic knowledge is just fine. After finishing the scores, you will be able to build your own graphic UNDP I with JavaScript. So what are you waiting for? And roll now and continue with next video where I'll explain in detail. What graphic you? Well, actually is. 2. What is GraphQL?: Hi, everyone. My name is severe and in this video will be taken. A look at what crafty Well, actually is graphic. UAL is a query language. That was the valve by Facebook in 2012 while they were working on their native IOS and Android applications. What they needed was an a p I. That was flexible, efficient and one that could work with the relational data that Facebook has. They ended up creating graft you well, because no other tool could solve their problem. Graphic UAL has many features that make it a great choice for building an A p I. So let's go over some of them. First of all, graphic ul is very efficient. It allows the client to ask for what information it needs, and the server will respond. Would only that data? It's also possible to run multiple queries in a single request, and you can navigate the relationships off entities as well. For example, you can ask graph que el for a list of your friends and the name of their friends. Graphic UL will return exactly that, and it wont include fuels that you haven't requested, such as date of birth or email. Secondly, graphic you well, it uses a type system. This creates a contract between the client and the server, and it allows the server to validate an incoming query and provide meaningful error messages should something be wrong with it. Now, as a user of an A P I, the type system gives you additional safety because you know what type of data the A P I will return. Thirdly, graphic UAL exposes just one end point for your entire AP I and it is constructed in a way that allows you to involve your A p i without breaking backwards compatibility. In fact, Facebook says that they have never version there. Graphic your A p I, and that all the versions of their applications still work with newer versions off their A P I. It said that graphic you will is the last AP I that you should deploy pretty awesome, right? And finally, graft. UAL is not tied to any specific database or storage engine. You can connect it up to your existing code base in your existing data basis. You can even use multiple databases together to power a single a p I so that was a quick overview off. What graphic you out? This In the next video, we will compare graphic you well to traditional rest AP Ice. 3. GraphQL vs REST API's: hi. Everyone mining misc severe and in this video will be taken. A look at the differences between graphic you well and rested be ice. Now I came up with a practical example for comparing the two. Let's assume that we haven't a P I for a block are bloggers writers simple, and it contains three types of objects. Block posts, authors and comments. The relationship between these are fairly obvious. Block boasts Air, written by a single author and block post might have one or more comments. Now let's take a look at how you can build on a P I. For this, using the rests principle, you would start by creating a single and point per entity. Want to get the details about a block post, and this would contain the title and the contents off the post. Another one to get the details over comments. And this would include the name of the poster and, of course, the content of the comment itself. I will also add one to get the details of an author which will return is the name and an email address, for example, and you should also be able to list all the block posts on the website. And so you add 1/4 and point that returns a list of block posts. I DS. Now this architecture seems fine, but let's actually use it. I want to render a list of block posts where we showed the title of each post and the name of the author. So we'll start by making a request for the latest block posts and the A P. I will answer with an airy containing the references to some of these posts. After that, I need to make one request per block post to get the title and the contents of each. But this response contains yet another reference this time a post references and author. So in order to know who wrote to post, I need to make another set of requests to get the name of each of the authors, and this is what the A P I would return now. This example is a bit exaggerated, but it demonstrates the pain. Point off rest AP eyes. In real life applications, you'll definitely come across situations where you have to make multiple requests to the server to get all the data that you need. This can be painfully slow because each strip to the server adds a lot of wait and see, and that is not great for mobile connections, for example. Now you might want to be tempted to add a few endpoints to solve this problem. You could add a post with authors and point to return a list of posts together with the details about the author. And then you can add another one to return common counts as well. But this is not a very scalable solution. This will cause an explosion of endpoints that will be hard to maintain and hard for new people to learn how to use. So let's now take a look at how graphic you'll solves thes issues with graft. You well, you can make a single request and ask for all the resource is that you want. So here I can say I want the latest post with the name off the authors. The graphical server will then look up the block post for you. It will follow the relationships to author, and it will factual the information about the author, and it will turn everything to you in a single requests. Now I'd like to point out here that the response autograph QL query has the exact same shape off your query that this is very useful because you'll know in advance how the A p I is going to respond and with the rest AP I that's just not the case. So here we can see on the left that we query for posts and on the right. We receive a object from graphic you'll, which contains a post Harry containing objects with all of the attributes that we want. So that's title content and then on author object with the name property. So to summarize, with graphic UL, you can get multiple resource is in a single request. The structure of your query defines the structure of the response graphic. You'll also understands the relationship between your objects and it can look them up if it's needed. And finally, you always get the data that you need never too much. Never too will. So that was it for this lesson In the upcoming videos, I will explain the main concepts of graft. You all thank you very much for watching, and I'll see you in the next video 4. Fields & Arguments: Hi, everyone. My name ISC savvier. And you're watching my course on graphic You? Well, in this video we'll take a look at what fields are and will also take a look at how you can use arguments with fields. So let's start with fields graphic You well is all about asking for data and you can be very specific as to what parts of the data that you want to receive. So let me show you what a basic query in graphic you out looks like. So I'm going to start by saying that we want to query something and that I'm going to say I want a query posts and I want to receive the title of each block posts. So this is a very simple query. And if I run this, we'll get a response from graphic you. Well, it just says posts gives us an area of objects, and each object contains just the title off our post because that's the only thing we've asked for. So in this case, query here is the name of the operation. While posts and title our both fields fields are very important in graphic UAL and they are unit of data that you can ask for. And it doesn't matter how deep in the query these fields appear. There are always called fields on. They always behave in the same way, even if you mess them now, you can also make a sub selection of fields. Let's say I also want to know who wrote these block posts while I have to do is I have to say, while I want the posts with the title. But I also want to know about the author and author is actually an object. So here I can define which fields of author that I want. And so if I hit control space graphical tells me that author has an idea, name and email in a post property, and I can pick any one of these. So I'm going to say, while I want the name often author And then if I execute this query, I get an author field inside my posts, and this is, of course, an object again, which contains the name off the author. Now, off course, you can nest these fields even further if your data structure allows it now. Asset in the previous video, the ability to query multiple resource is and the relationship in a single request may graphic. You will a lot more efficient than rest AP I So in this case, off current for the latest posts. I've grabbed their title and I've gone through their relationship with the author entity, and I've also grabbed the name off the author that is assigned to the Post. An arrest, a p I. This would have taken multiple requests to the server. Now let's move on to arguments. Fetching objects and fields are pretty easy in graphic. You well as we've just seen. But sometimes you need to give some arguments. For example, you might want to fetch a particularly block post based on its i. D. So it would clear out our existing Crary. And I'm going to say that I want a post and I'm going to give it in arguments. And I'm gonna say that the idea of the Post that I want to fetch is three, for example, and I'm gonna open the brackets and say, Give me the title off post with i d three. It's we If I run this, I get exactly the title off block posts with I d. Three Now, in a traditional rest system, you can Onley pass a single set of arguments to the server. In Graphic UL, however, every fields and nested object can have its own set of arguments. So let's say you want to fetch the comments off this block posts. Then I simply add comments to it. And I can say for each common and want the name and this will work. There we go. So there was one comment written by Peter. But now I can also pass an argument to comments. And I can say, for example, while give me the comments off the year 2017 for example. And so if I run this graphic, you will make it work just fine. It will fetch post with I d three. It will look up the comments of this post that might be in another database table, for example. It will filter them on year, using our second argument in an overturn all of the data that I requested. So that was it for this video. Those were fields and arguments. In the next video, we're going to take a look at Alia uses and fragments 5. Aliases & Fragments: Hi, everyone. My name is severe and this is my course on graphic. You out in this video, we're going to take a look at a leases and fragments. Let's start with aliases. You might have spotted an issue with the way queries are executed in graphic You Well, the output of a graph QL query has the same name as the query itself. So in this case, I've taken the example of the previous video and I asked for Post I D three and I asked its title and its contents. Now notice that I type in here Post and that I get posts back in the response. But what if I want to get the details of two specific posts? I cannot write something like this, boast i d two and then grab title and content off that post. Because if I do that graphic, yo will say that the feuds posts are conflicting with each other because again, they are the same name. So that is why aliases exists in graphic. You well, they allow you to rename the result of a field to anything else that you want. So you could query both of these posts by saying that the 1st 1 is first posed hopes and that the 2nd 1 is second post. And if I run it now, graph Carol will rename the output of this post and will name it first post, as you can see here in the response object. Now, aliases are ideal to query the same type of objects more than one time. But your queries also get very repetitive, as you can see here in this example. Now let's make this example a little bit more complete. Let's say that we want to fash the title the contents of each post along with the name off the author. So here I have to say, while I want the author and I want the name of the author and then a copy pasted also to our second post. There we go now. This is quite repetitive. All the code between the brackets is exactly the same for both of thes posts, and that brings us to fragments. By using fragments, we can remove the duplicated fields and put them inside a reusable block of coat so we can start by defining our fragment, and we start by giving you the names will save fragment, basic post details. And then we have to say what this fragment is compatible with. So this fragment is compatible with the post type. So I'm going to say that it works on the post type, and then I'm gonna copy the selected fields in our fragments. Now, afterwards, we can use this fragment inside of our queries so we can rewrite these two queries by removing all of our fields and simply saying dot a dot basic post details. And I would copy that peace that in there as well, and that's it. If I run this now, I get the exact same output. But I have not copy and pasted this piece of code endlessly. I could just reuse it by referencing its name. Now you might notice that the syntax looks a bit like the new spread operator in JavaScript . And as you can see, it greatly reduces the size off York reveries. So that was it for this video. In the next video, we're going to take a look at how you can use variables inside your graphic. You'll queries 6. Variables: Hi, everyone. My name ISC savvier. And you're watching my course on graphic You? Well, in this video, we'll take a look at how you can use variables in graphic You Well, so far we've been writing arguments directly inside our queries, and here is an example of one of the previous videos we re fetched to details off post with i d three. And as you can see, I passed the argument three directly in my query. Now, in most applications, however, the arguments are dynamic and usually depend on user input. For example, authors might have a form to create a new block post, so it's not a good idea to take the form data to serialize it. And to insert it into this query. Not only could it be a security issue, it also creates a completely new query that might have become invalid. Instead, we can use variables insider queries and then pass along the user input separately. And this is how it goes. So will start by saying that our query except a variable. So I'm going to say that our query accepts a variable called Post I D. And I'm going to say that it's a type integer, and I'm going to say that this post I d is required by adding an exclamation mark. So this means that the variable is mandatory and graphic ul will not continue executing this query if it's not present now, after declaring the variable, we can use it inside off our query. So he revenge details of post with i d three. But instead of three, I can now use our variable post i d. Just like this. Now off course, we also need to pass the value of this variable to the server. And to do that, we create a Jason object and send it along with this request to the server. And in graphical, there isn't a section here called query variables, and all I do here is I write a curly brace and graphical auto, completes me and says, Well, I need a post d variable and then I can give that variables to here. I can say that the value of post I d equals three, and then that's it. If I execute this query again, you will see it has the exact same response as my previous query. But right now I'm using query variables. Now these variables are send along with our requests as, for example, a post brown. Now, by using variables, we can keep the query the same for all requests. Again, this query here will never change. I would just send the user input along with the request, and this is considered a best practice. It's not recommended to use string interpolation to construct a new query, because again, this could be a potential security issue. So that wasn't for this video. In the next video, we'll take a look at what mutations are and what the differences are between inquiries and mutations. 7. Mutations: Hi, everyone. My name ISC savvier. And in this video, we're going to take a look at the differences between queries and mutations. In graphic, You all There are two types of operations queries and mutations. You've already seen many examples of queries in the previous videos, and they allow you to fetch data from the server. And this is typically read only queries should not change any data on your server, even though you technically couldn't make them do that. To change data on your server, you should instead use mutations. Just a scurries. Mutations can return objects, and you can define which fields you want to receive as a response. So in case of a block, the A P I might have a mutation to add new block posts. This mutation should accept a Jason object with the contents of the new post. So let's take a look at how you can do that in graphic. You Well, we'll start out by saying that we want to run a mutation, so I'm gonna type mutation, open curly brackets and justice with queries. I can now give it the name of a mutation. So I've already created a mutation at Post and this, except a post variable, which is adjacent object containing the details off my new posts. So this could be title. My new block posts my block. Post also has some contents and should be contents off my block posts. It also has an author, and this is a reference to the idea of the altar. And so in this case, it's just some random data that I've generated in a database. So this is the data that we pass along to this mutation. And then we can also say which data we want to receive back from graphic You well, and we can receive bag the title off our block boasts. And I can even ask for the author. And I can ask for the name of the author that is associated with this I. D. Right here. Now, in the previous video, I told you that putting this data straight in the query is not a great idea. Instead, we should use variables, and that is also possible with mutations. So just that's what queries will start by saying that our mutation takes a post variable as input. So I'm going to do not right here. I'm going to say that we're going to receive a variable post, and this should be off type post input. Now, boast input is a type that I have a defined on the graphic Ural server. And later on in the course, I'll show you how you can do that yourself. Now this variable is required. So I'm gonna add an exclamation mark to it. Now, afterwards, I can start using this variable insight or post field. So instead of giving it the objects straightaway here, I'm gonna cut that text away, and I'm gonna just reference the post variable. And now I can pass along our post as a variable too graphic. You? Well, and here I can pass along the object for our block. Both. So this was the object that I created, um, with title content and author. But we should wrap this inside another object just as graphical here, propose me. And the object contains a post field. This post field contains that object. Then I should close it. All right? And I should add some quotes here and there we go. That is what a mutation looks like. If I know executed, this will insert a new block post in my database. And as you can see, we received the title and the name of the author as a response, just as we've requested right here. So mutations look exactly like Clarice, and they also have a predictable response. So what's now the real difference between queries and mutations? Well, first of all, you can instantly see if a graphic UL operation will change something on the server or not . Now, this is for our own convenience. Queries will only read data from the server while mutations will change or add new data to it. The other big difference is that queries are being executed in parallel while mutations run in Siris one after the other. This is to prevent race conditions as one mutation might insert data that is required by the next mutation. So that was it for this video and also for this section. In the next section, we will get ready to write her own graphic your l a p I. I will show you how it is set of the project structure what dependencies we're going to use and much more 8. Setting up: Project structure: Hi, everyone. My name ISC Soviet. And in this video, we will set up the directory structure for our graphic you l a p I. So here I have opened up an empty directory in visual studio code, and we're going to start by creating a few directories that will make up our project. I'm going to start by creating a directory for all of our source code. I'm going to call. That s our C. Now, inside this directory, I will make another folder for our graphic you'll schema. What this is is something that we will discuss in later videos. Now, scheme, eyes made up off queries, types and mutations. So I'll create a subdirectory for each one of these. So one for queries, one for types and one for mutations. Now let's also create some placeholder files for our schema. Let's start with queries and mutations. I'm going to create one file per query and permutation. By doing that, we make sure that each file corresponds to just one query or one mutation and also keeps our files short and our code manageable. So, for mutations, I want clients to be able to create new block posts and to post comments through our a p I . So I'm going to create two mutations. The 1st 1 I'm going to call add comments dot Js and I'm gonna create a 2nd 1 which is gonna be add Post that Yes. Now I'm gonna leave these files empty for now. Will work on them later in this course for queries. I want users to be able to get all the posts on the block to get details about a specific post and to get the details about an author. So I will create three files inside queries. I'm gonna create a file posts I thought jazz, which will return all the posts in our blawg. I'm gonna create post that Js, which is going to return the details about a single post. And then I'm gonna create a file author digests, which is going to return some information about author and again, we will implement these files later on and also know that you can name these files However you would like. I'm just picking something that makes sense here. Next up is types. Now, if you're familiar with object or into programming than you can compare types in graphic UAL to interface is an object oriented programming languages. They define what fields a type has, for example, a type for block boast might have a title, a content and on author field. Now, in case for r E B I, we have three big types. We have block posts. We have authors and we have comments. I've detailed them in the first section of this course. So let's create a file for each and every one of those I'm gonna create author thought yes , create comments that Jess and I'm gonna create. Post that, Jess. All right, so now that we have the individual building blocks for schema, I'm going to create in in next RGs file inside the schema directory. And in this file, we will import all the other files and make the complete scheming. I'm also going to create an indexed file in the root of our source directory, and this fall will be responsible for loading the graphic you a library for loading our schema and for executing queries now to finish off. We're also gonna need a dist folder which I'm going to put in the roots off our project. Now, this folder will contain optimized versions off our source code and it will be generated by babble on This will ensure that our quote runs on any version off. No Js. So with that fool would created it's time to end this video. We've set up the structure for our project. In the next video, we are going to install the external dependencies that will need to bring our A P I to life . 9. Installing dependencies: Hi, everyone. In this video, we're going to install the dependencies that we're going to use to build our graphic you l a p I now to Bill r a p I. We're not going to reinvent the wheel. Instead, we're going to rely on third party libraries that have already been built and have been battle tested managing dependencies. And no, Jess, it's pretty easy because we have NPM now, In case you don't know, NPM stands for note package manager. And this tool allows us to list all the dependencies of our project in a single file now, afterwards and PM can take that file, read it out and install all of the dependencies into our projects. So the start, we're going to create a packaged up Jason file. This is the file that will tell in PM everything there is to know about our project now. You could create one manually, but we can also ask NPM to generate one for us in the root directory off our project. And I'm gonna do that. I'm gonna open up the terminal, and I'm going to run NPM in it. And this utility will walk us through some of the things that should be in our package. That Jason and we could just type him into our terminal. So it asked us what is their package name? Well, I'm going to say graphic UAL ap. I block would say, that's the name of our package. We're gonna keep it at that version number. We can give it a description, which I'm not going to do right now. You can give it an entry point. I'm gonna leave that by default as well. Leave the desk a man empty. Get repository keywords. Author. We're gonna leave that all empty. And then it asked This is this file okay? Gonna say yes. That's okay. And now the stool has created a package that Jason file Inside Art directory. So now that we have this file, we can start installing aren't dependencies. Now, we're not going to write our own graphic Ural library. That will be pointless. Instead, we're going to use the official graft ul implementation by Facebook so it to install it. I'm simply going to run npm, install dash, dash safe and then graphic you. Well, so here I ask NPM to install a package. The package name is graphic you well, And by saying that it should save this dependency, it will actually added the dependency to our package that Jason file. So if I execute this NPM will go out, it will Fatchett graphic you. Well, it will download all of the dependencies that graphic UAL has, and it will save graphic UAL as a dependency. Inside are packaged Jason Fall. So, as you can see here, it has added a new property to this object, which is called dependencies. And here it says that Graphic UL is now with the pendency of our project and that we require at least version $0.11.3. You can also see that NPM has created a new directory inside our project and this is called node modules. Now, this directory is the home toe. All the external dependencies off our project. We should never commit note modules to a version control system and we should never change files inside this directory. Now, if you look inside directory, we see that there is a graph corral folder in there as well as a folder for all the dependencies that craft your own needs. So in this case, graft you well needs it, roll and then it's right here. So needless to say, this directory can get quite big once you've added a few dependencies. But that is just fine. And we're going to close it up for now. And we're now going to install the next dependency that we're going to need. And that is Babel. Now, during this course, I'm going to use some of the new features in JavaScript, such as classes, arrow functions and spread operators. These features, however, might not be available in older Java script run times. So babble is a little tool that will take our code. But all of the new syntax and it will transpire. I'll it into code that every no jazz runtime can understand. This is very useful for when you want to deploy your code to, for example, a cloud service who uses an older runtime. I'm going to use the same command as last time. One small change. So I'm gonna say npm install dash dash safe. But I'm gonna say save death And this will tell NPM that babble is independency that is only needed during development. We don't need babble in our production environments so NPM safe dash deaf and dumb to say that it should install the battle cli tool. It should install the default preset for babble. This is default Bama configuration. And we're gonna need a babble plug in that will transform our spread operator into something that old job script runtime Kenner stand. So I will execute that and you will see that it takes a bit longer because Babel has a lot more dependencies than graphic. You. Well, so now that it is finished, we can see that it has added another section into our package that Jason filed these or did development dependencies again. These are the dependencies that you'd only need during development, not in production. And if I open up the note modules directory and hit refresh, you can see that there are a lot of new dependencies installed into our project. And that is the power of using a package manager. We don't have to manage this all ourselves with enough to go out and download each and every one of these projects. No, NPM will do this for us automatically. I'm gonna close this folder up. I said it could get quite big. That's no problem at all. And that was it for this video. We have installed all the dependencies that we're going to use to build our own graphic. You'll be I now in the next video, I will show you how it's a good figure babble. 10. Configuring Babel: Hi, everyone. And welcome back to my course on graphic you? Well, in the previous video, we installed a necessary dependencies in our project. And one of those dependencies is Babel. Now we're going to use babble to ensure that we can safely use all of the new features in the Java script language without having to worry about compatibility. So let's first take a look at why we need babble by writing some coat. I'm going to open up the index dot Js file here in the root off my source directory. And let's say that I want to import the graphic evil library and then do something with it . Well, they don't write import. I want to import graphic you well, and I want to import it from the graphic your package. After that, I'm just gonna run a consul log saying hi to prove that the code has executed successfully . Now let me try to run the script. I'm gonna open up the terminal and when you say nodes SRC in next that Yes, gonna hit enter. And as you can see, no GS returns and ever And it says that it found an unexpected token import so no one she has doesn't understand this new Syntex here to import modules. Now, we could fix it by using the old syntax, but that's not very efficient. In a lot of cases, the noose index is a lot shorter and has some nice additional features. So that is exactly what Babel is here to solve. Now, Babble relies on a conflict file to tell it how it should transplant. Your coat babble can load this configuration from the package that Jason file or from the Babel or C file. I'm gonna use the second option, and I'm going to create a new file in my root directory. And I'm gonna call this dot babble RC. In this file, we're gonna create a Jason object, and we're going to say what presets that are available. So in the previous video, we've installed the end preset, which is the default preset that is used by babble. So I'm gonna put that right there And then we can also say what plug ins are available and noticed that visual studio code helps is out here. It knows that this file is a Babel configuration file and gifts is all these nights hints. So I'm going to say that we're going to use some plug ins and we're going to use the transform objects. Rest spread, Blufgan. So that are spread. Operator will correctly be transpired. Okay, so now babble knows which presets are available and which plug ins are installed. And let's not check out if it correctly transpire. ALS are coat. So I'm going to open up the package that Jason file and in this file, I'm going to create a new script. Now, if you've never created the script and MPM before, all you have to do is given a name and then a command that it should execute. So here it already has a test script. Just gonna add one. I'm gonna call my script Built now. This should execute babbles woman attacked babble, and this accepts a bunch of parameters. Now, the 1st 1 tells Babel where our source code is. So in our case, it's just the source directory THSRC directory. Now, after that, we also need to specify where babble should store the transpired versions of our coat. In the previous videos, we've created that this folder just for this purpose. So I'm going to say that the output directory, The out there is this folder. All right, so now I'm going to save this file, and we're gonna run this script and would open up a terminal on the type NPM run built. I'm gonna hit enter. And as you can see, babble found all of our source files right here. And it has generated new files for them into this fuller. So let's open up our original in next dot Js file. You can see here in Port Graphic UL from the graphic UL package. But if I now go to the dest folder and I opened the index file there, then you can see that our import statement is gone and bam, A list is now using the traditional require syntax, something that is compatible with older versions of note. And let's desk that right now. So now I'm gonna run knowed again, and instead of running the next fall in our source directory, I'm going to run the next file in our DIS directory. And there you go. Our script works. There are no more errors. And it just prince high onto our consul. Now, if you're a bit like me, you will think that running these commands over and over again, it's very time consuming and you will be right. So let's change our build script so that it runs babble and then automatically runs our code are indexed on your ass for so I'm gonna go back. But I'm gonna go back to our packaged Jason file. And here we have babble, which generates the transplant versions. And after that, I'm gonna say that it should execute node this in next dot Js file. All right, so let's run it one more time. I'm going to say npm run built. And now the script transpire als everything with Babel and then runs it automatically as well. All in one go. So that was it for this video. We're almost done with the preparations. In the next video, we'll show you the dummy database that we're going to use as the basis for our graphic you l a P I 11. Dummy database: Hi, everyone. My name is X Avi, and in this video, we're going to take a look at the very simple database that will power are graphic you l A p i. Now I didn't want to bore you with a video of me showing how I created all this dummy data . So I've prepared a tiny database and I've put it in our source directory and it's called Fake database. So let's take a look inside. As you can see, it's just a simple class containing a bunch of property. So have properties that store authors that store block posts and that store all the comments. Now all the data is stored in a simple area. It's an area of objects you can compare. It is two tables in irregular database, a table for authors, a table for block posts at a table for comments. I've also made some methods to access this data, and here is a simple one. If I scroll down, you can see there is get block posts and this one is very simple. It just returns all of the block posts in the database. Now, in my example, it returns the our A off block posts. Which is Captain Memory, of course. But in reality, instead of just returning it here, you would go out to the database, you would make a connection, you would query the database and then you would return the data off database so you wouldn't just say return and then an area. You can think of these methods as a database access layer on Lee. One part of your application should be able to talk to your database. The rest should use methods that the database access layer exposed. So if you want to write your own graphical L a p I for a block, for example, that you can keep all of these methods, but you just have to re implement their bodies. So here you would again have to make a connection to the database. And so now I've also got some methods that filter out some of our data. So, for example, get block posts. This one fetches the details of a block post with a specific I D and have the same thing for fetching a particularly author or fetching the post of an author or fetching all the comments that have post has. I have a bunch of these methods now. I also implemented a method that is responsible for adding new data into our block. And so here there's Avenue Block Post, which takes a parameter posts, which is an object again with all the properties of the Post, and we just added to the area right here. It's all very, very, very simple, but it gets the point across. So again, in reality, you would re implement these methods and you would probably want to connect to a database like my sequel among Would You Be, or maybe a cloud version like Dynamodb. Now what about relationships? While each of these objects are completely self contained, there are no references from one object to the other. But if you look more closely and block post, for example, you can see that each block post has a property called author, and in it we store the idea of the author who wrote this particularly block posts. So if we want to fetch the name off the author of a block post that we should take the block post, we should take the author property and then we should query the database for author with this I d and then we can fetch his name. Now, you might think that creating code that navigates all these relationships will be very time consuming, and you would be right. But luckily, we don't need to do that, because graphic you all is very smart. You only have to teach it how to fetch each resource individually. And then you can tell it how the relationships are formed. So you don't have to use complex joint operations like in SQL. All right, so that was it for this section were done with all the preparations in the next section, we're going to start building our very own graphic You l A p i on top of this little database, I'll show you how to create a schema. So that graphic you will will be able to make sense of all of our data. 12. Object types: Hey, everyone mining MISC Soviet. And in this video we will implement the graphical object types for author comments and block posts. Now an object type and graphic UL. It's like a class and object oriented programming. It basically tells crafty, Well, what kind of objects that your A p I can return and what feuds they have. So here we have an example Graphic ul Query. All these fields are defined by object times. So in other words, if an object type for post does not contain a title, then you cannot ask for a title in your query. Pretty straightforward. However, the top fields are different. They are the entry points to your queries, and those are defined differently. We'll see that later on in this course. So in this video we will focus on implementing the object times. Okay, so here I am in visual studio code, and let's start by implementing an object type for author. Now, in the previous videos, we've created our directory structure and the object type for author is under the types directory under schema. So I'm gonna open up off of the Js and I'm going to start by creating or by exporting a new constant called author. And this is gonna be of new graf que el object type now in it's constructor rule, pass on object. And this object will contain all the details about our author entity. Now, before we continue, we need to import the necessary module. So in this case, were using graphic ul object type, but Java script doesn't know what that is. It's not the fine in our file, so we need to import it from the graft throughout package first. So I'm gonna write import graph que el object type from the graphic your package. All right, so next up, we can fill in this object right here. Every object type should have a name and description and some fields. I'm gonna create them. Now. I'm gonna call this object type author. I'm gonna give it a description. I'm going to say all details off author on the website, and I'm gonna give it some fields, which is gonna be a narrow function. Now, you might wonder why Graft ul needs to know all of this on. That's because when you're using graphical, it will use the name and description to guide people around your A P. I sew these pieces of strings. Here. These texts will appear two people using your A P I through graphical. It's very easy for them to familiarize themselves with your eight p I. So let's populate the fields. Now let's take a look in big database to see what Fields author has there. So here we can see that an author has an idea in name and an email address. Now also know the types of thes fields so ideas. A string name is a string, and also email is a strength now. Why is this important? Well, that's because graphic you will a statically typed. And that means that we have to specify what type each fearless. So let's go back to alter and let's at the fields Right now I'm going to start with I D. And I'm going to say that i d is of type graphic You well, strength again. These air special objects. These are special times that graphic usually uses to validate the query coming in from users, but also to know beforehand what type of data it will return to the user. So we're gonna add the name few as well, which is also a graphic UL string and the email fields, which is also type graph key. Well, strength now, just as before. Let's import Graphic ul String before we forget it. So I'm just gonna added import here, and I'm going to say we will also want to import Graphic UL string from the crafty little package. All right, so that's all we have to do to implement our author object. Let's continue with making a type for comments. Now, I'm going to start by copying a disc owed because a lot of it is just boilerplate code and we can reuse it for comment. Object type. So I'm gonna open up common that. Yes. I'm gonna paste in all of the coat right here. And I'm obviously gonna change some stuff, so I'm gonna export common variable. I'm going to change the name. I'm gonna change the description. I'm going to say details off comments. And now, obviously, we also need to change some of these fields. So let's take a look at fig database. What fields that a common has and here can see. Common has an idea posted the name and a content fields Now we're gonna ignore the Post I D . For now, because that field creates a relationship with the Post object. But we haven't created that yet, so we're going to implement this later on. So let's go back to the common type here. I'm going to remove these fields because we have to re implement them. I'm going to say that comment has an i D. And this time it's not of type string. It's actually type graphic you'll into particular. Look back here now it's an imager. It's not a string anymore, so we have to reflect that in our future here as well. A comment also has the name of the person who wrote it, which is obviously of typographical string. And it has the content off the boats itself, which is also off typographic UAL strength. Now, before we forget, let's at the necessary imports were using graphic you'll into here, but we're not importing it. So let's fix that right now. There we go. That is the implementation for comment. Object type. Now let's move on to the last time that we need, and that is the object type for block boasts. Now this one is a little more complicated because it has two relationships. Ah, Block Boast has an author and it might have some comments. And we definitely want to access both of these relationships through our craft. Your A p I. So again, I'm going to start by copying the code from our common type here, and I'm gonna paste it in our post Js file. I'll start again by changing some of these things right here. So we're gonna export valuable posts. We're going to give it the name posts and the description is gonna be all details off a block post. So let's take a look and fig database again to see what feuds a block post hats. And here we can see the block Post has an I D. Which is an inter jury. In this case, it also has a title content and an author. Now, again, this author field is a reference to an author. It's it creates a relationship. So we're gonna need to define that Aziz Well, so let's add our fields. Let's go back to posts s so we can keep i d. We're gonna change name to title and we're going to leave content as well, and it types are already correct. All right, so that's the basics done, but last Now implement the relationship that a Post has with an author. So we're gonna add a field author here, and this field is gonna be a bit special. So we're going to say that the type of this field is of type author, but that is not enough. We also need to tell graphic you. Well, how it can get the details about this author and that requires another call to our database . So we need to add a resolve function, and this result function. I'm going to use in an arrow function here as well, and it will receive a copy off our post object, and then we can do anything that we want with that post object. But we should return the information about the author that is linked to this block post. So in fig database, I have a method for this. It's called get Author, and we're just gonna return it here. We're gonna say return big database dot Get author, and we're gonna give it the idea of the author. And that is, of course, Stort. Insider Post in the author fields. So what we're essentially doing is this variable right here. This post it will get a full copy off one of these objects. And what do we need to get the author? What? We take the author field right here with take its value, and then we pass that along to to get author method to get the details about an author. All right, so let's not forget to do the necessary imports. So I'm gonna add an import for author. I'm gonna import author from the author type, which is in the same directory. And I also need to import fake database, which sits at the roots off our source directory. All right, like that. So now we can implement another, more complex relationship. Ah, Block. Boast can have one or more comments. So we say that the common field will be of type comment, but it will be a list of comments. So how do we do that? Well, that's add another field here. I'm gonna call this comments, and this is a time comments, but again, we need a list of comments, so we're gonna wrap or common type inside a new graf Cuba list object like that. And so now graphic You well knows that you will not return one comment but that you might return one arm or comments in with this field. So again, we're gonna add a result function. This result function will receive our post again. I'm going to use an arrow function here, and we want to return big database, not get comments for posts. And we're gonna pass along the i d off the post that we're using right now. And let's again not forget to do the necessary imports. Obvious, crafty. Well, list here. So we need to important from the graphic your package. So now we know how to do these relationships. Let's head back to the author type now. It would be interesting if people could request all the block posts that were written by a specific author. So let's add a post field to the object type for author, So I'm gonna call it Post. It's gonna be a type post, but it's gonna be a list of posts. So it's a new graphic Ural List object with our posts object type. And we also need a result function which is going to receive the current author. And what we want to do is we want to return fake database dot Get posts off, author, and we're gonna pass along the author I d. And again, let's not forget to do the necessary imports. I'm using graphic you'll list from the graphic UL package. I also need to import the posts object type from the current directory. And I need to import fig database, which again sits at the roots off our source directory. All right, so that was it for this video we've implemented all over graphical object types again, these telegraphic UAL, which feels want to expose to our users and how it should cope with the relationship between data. However, we also need to telegraph key well, how it can fetch the entities in the first place. So right now we told Graphic UL what fields a block post has, but we haven't told it how can actually fetch a block post from database. So in the next video, we will fix that. We will implement Aquarius 13. Queries: Hey, everyone. In the previous video, we implemented the object types that are used by crafts UAL to know what fields an entity has. It also helps graphic. You'll understand the relationship between objects. But there is a problem. Here is graphic your query that fetches details about a block posts and about the author who wrote them. Now, after the previous video graphic, UL is able to fetch the details about an author because we implemented a resolve function that handles the relationship between post and author. However graphic UL does not know how it can fetch the route field here. For that, we need to implement some queries. Now we're going to implement three queries. One to get all the block posts, want to get details about a specific post and want to get a specific author. Now the last two will require an argument. So let's get started. So I'm back in visual studio code and we're going to start by implementing the boasts query . So I'm gonna open up the post Js file inside off our query directory, and I'm going to start by exporting a default objects. I'm gonna export defaults, and inside this object I'm going to create a property cult posts. And this will also be the name of our query. So choose it wisely because people will be using it when they use your A P. I now posts again is an object which contains the details about our query. So first we have to talk graphic you Well, what type of data this will return in our case. It will return a list off block posts. So the type is new. Graphic UL lists off posts, and we also need to give it a description. So I'm going to say, get a list of recent block posts. That's a pretty nice description. Again, this description will show up when people are using graphical. So riding a good description will help your users adopt your A P I faster because they get a little bit of help. Now, we can also accept arguments if we want to or if we need to. But in this case, we don't need to accept any. So I'm going to leave this object empty Now. Finally, we need again a result function that will actually go out to the database and fetch the data that we need. So I'm gonna write resolve. I'm gonna give it a function. And this time I'm just gonna call fig database, and I'm just gonna get a list off block posts. So again, in our case, FIG database is a database abstraction It Hamels all the communication with on actual database. So in reality, you can use the same code as I do right here. But you just need to change the implementation off the gas block post method. Okay, so that's it for this query. It's pretty simple. The only thing I need to do is we need to make sure that we import the necessary dependencies. So we need graphic You A list from the graph curole package. We need the post object type from our types directory, and we need fig database, which sits at the root off our source directory. So let's move on now and implement the author query. So I'm going to copy and paste this code, because again, a lot of this code is similar for author, So I'm gonna open up the author dot Js file inside off our query directory. I'm gonna paste all of the code in here, and I'm going to start by changing the name of this field here. Call this author and I'm also gonna change the description. And I'm going to say that this query gets a specific author. There we go. We also need to change the type. So now we won't return a list of posts anymore. We will actually return details about author. And we also need some arguments now because if I want to get the details about a specific author than graphic, you will need to know which author I want to get the details about. So I'm going to say that this query, except on argument, called I d. And this argument should be of type graphic UAL strength. But we can do more here. This query cannot work without an argument. If you want the details about an author, you have to specify in a d if graphic evil does not have an i d. Then it cannot fetcher details about an author because it doesn't know what author it needs to fetch. Date on So we can wrap this graphic. You'll string inside a new graphic UAL non no object and this will tell graphic you. Well, that the argument is required and, in fact, graphic. You al validates queries before it executes them. And so if it sees that the idea argument it is missing, it won't even execute your query. And it won't interact with your database pretty handy. And finally, we need to implement what we need to change better the result function. So this function will now receive two parameters instead of one. First, it will receive the parents object, and secondly, it will receive all the arguments for this query. Now, I could write something like this. I could say parents arguments, and then I could call the big database and I can say get author. And then I'm gonna take the arguments, which is basically a copy of this object, but then filled in with actual values so I could say arguments thought I d. But I can also directly take the i D argument by using Atmos script six destructing assignments and what I can do is instead of using arguments, I can use Syntex like this, and what this will do is this will extract the I D field from the object that this function gets asked a second parameter and then I could just use I d like that. So it's a bit shorter syntax. It's also new syntax, so let's keep that for now. All right? So, again, to finish off this query, I need to fix our imports. We don't need graphic. You well list anymore. But we do, however, need Graphic ul string, and we do need graph que el non. No. And we also need to import author, and we don't need post anymore. So I'm gonna import author from the author post, and we can keep our import for the fake database. All right, so let's move on to the final query. I'm gonna copy this code again, and this time we're going to implement our posts. Query. So I'm gonna paste, uh, are coat in here. And this will allow users to fetch the details about a specific block post. So again, we need to change it a bit. I'm gonna call this curry, just post it's gonna return a post object, and we're gonna give it a better description as well. We're going to say, get details about a specific post. There we go. Now we're going to keep this idea argument right here because the user should pass it along if he wants to get information about specific post. However, the idea of a post is not a strength. It's a imager. So we need to change the type here, too. Graphic You will. And now the result function is almost identical as well. So we keep receiving the parents object, and we keep extracting the A D foods from the arguments. But we need to change the method that we use on our faith database, so we don't need to get the author we need to get block posts. So, as always, let's fix her imports. We don't need the author import anymore. Now we need to import posts and we don't need graphic. You'll string. But we need graph que Well, it's all right. I'm going to save the file and that's it. We've now implemented the queries for R A P I. In the next failure, we will implement some input object types, and this will form the basis off our mutations that we will make in video. After that one 14. Input object types: Hi, everyone. In this video, we will implement input object types. So just two videos ago, we created regular object types, and those are used by crafts. You all to know what fields it can expose to the user. Well, input object types are almost exactly the same, except that they are being used for when users send data to your A. P I input object types help craft you all to check if a user has given it all the necessary fields and if those fields are off the correct type. So to summarize, you can say that object types are used enquiries for when people are requesting data from your A P I inputs. Object types are Houston mutations where people are sending data to your A P I. So let's implement to input object types for our block a p I. I want authors to be able to create new block posts, and I want users to be able to post comments through our graphic your L a p I. So let's start with creating an input object type for the new block post. I'm going to store these input object types in the same file as the regular types. So I'm going to open up the posts dot Js file inside our types directory, and I'm going to export a new constant called post input type. And this will be a new graphic UAL input object type. And again, we're gonna pass on object in It's constructor. No one input object type is very similar to irregular input type in the sense that they also need a name, a description and some fields. So I'm just gonna give it a name. I'm gonna call it post input, and then I'm gonna give it some fields. Now, what field do we include here? Well, I'm going to say that when an author creates a new block post, we need to know the title, the contents and the author, I d. So I'm just gonna call that field author now. We also need to define the type of each field again. So the title will be of type Graphic UL string, and same goes for content. And for author because in the Fed database, we've implemented the author I d as a strength. But there is more there, not just strings. They are required strings. They cannot be empty because a block post without a title or without content or without an author should not exist. So we need to wrap our types inside a graphic UL non metal object. So I'm going to see that type is new. Graph que el non? No, and I'm gonna wrap graphic. You'll string inside of that. I'm gonna do the same thing for these three fields. Now, before we forget, let's also add imports for graphic euro input, object type and graphic. You'll now know at the top off our file So graphic you'll input object type and craft cura non. No, there we go. So let's now move on to the input object type for comments. I'm going to copy this code right here, and I'm gonna open up our common type and I'm gonna paste the code there. Now, of course, we're gonna change the name of this variable. We're gonna say comment, input type, and we're gonna give it a different name. Comments, input. I'm gonna call this and we need to change the fields. Aziz. Well, so when you post a comment, we need to know your name, the contents of your comment and the idea of the post on which you want to leave your comment. So I'm gonna do that right now. I'm gonna ask for your name content we can keep. And, of course, the idea of the post that you want to make your comment. Now let's check of the types are correct. Name and content should be off graphic. You'll strength but post i d. The idea of a post interfaith database is a type imager, so we will require a crafty well in here as well. So once more, let's fix her imports. We need to import graphic ul input object type. We need to import craft, you'll know, know and graft Cuba ins. And that was it for this video again, we've created the input object types that we will use in our mutations right now. Craft. You'll knows what fields to users should give if he wants to create a new block post or if he wants to create a new comments. However, graphic UL doesn't know how it should write them to the database. So in the next video we will implement mutations so that we can save this data to work database 15. Creating mutations: Hi, everyone. In the previous video, we created input object types and I told you that those were the basis for mutations. Well, in this video, we will implement two mutations for a graphic. You l A p i. Now, if you don't remember what mutations are, check out section two of the scores to refresh your memory. So the two mutations are one to allow authors to post new block posts in our database and another one to allow users to post comments on block posts. So let's start with the ads post mutations now, because mutations are very much like queries. All start by copying the code off our post query. So I'm gonna open on the post. Scary Here. I'm going to select all the code and copy it, and I'm gonna paste it into the ad postal Js file inside our mutations directory. Now again, we need to adapt this a bit. For starters, I'm gonna call this mutation at Post, and this mutation will write a new block post to the database. But it will also return the newly created block posts so the user can work with it if he wants. So I'm going to keep the type set to post here. We're also gonna give it a proper description. Were going to say that this creates a new block post and it should also accept an argument . Now, if User wants to create a new block boast he should pass along the data now, I could create an argument for each field for our post, so that would be an argument for the title. Another argument for content, Another one for the authors. I d. However, a more efficient way is to use the input object type that we created in the last video. So I'm just gonna create one argument and I'm going to remove the one that we have right now. And I'm going to create a single argument called Post, and I'm going to say that post should be if type of post input type. Now, we also need a result function to tell graphic you. Well, what it should do once it receives this data from a user. So this is a function that again it will receive our parent variable, and it will receive all the arguments that were passed to this mutation. So what we will do here is we will extract the post argument for our result function. And the only thing that we need to do is we need to make a call to fake database and we need to add a new block post. And I've already made that method at New Block Post. And of course, we're gonna pass our post argument that we received here. We're gonna pass that along to that method. Now, we also return this because in graphic, you a lot of mutations return the same object that you've just created. So in our case, if you run the mutation at post, it will actually return the data that it has actually submitted to the database. And that might be interesting. For example, if you create a new post and you given your author, I d you get that post back. But then you can ask, for example, for the name of the author, which again involves some relationships. Now, before we continue, we need to fix our imports once again so we can keep the post important here. But we need an import for our post input type. So I'm just going to say we import posts from the types post, and we also need post input type. All right, so I'm going to save the file and let's now do our second mutation, and that is add comment. Now, before we can do that, we need to make sure that our database obstruction can handle that. And right now, it has no method that allows you to create a new comments. So let's create that method. First, I'm gonna open a fig database here, and I'm gonna scroll down all the way to the bottom. And here I've got some right methods. And right now, I only have add new block boost here. So I'm gonna add a method called add new comments and this will receive a comment. Objects from our graphic you'll resolve function and all that this method should do is give comments a valid I d push it to the area right here. The area that contains all over contents comments on, and then it should return the newly created comment. So let's do that right now. We're going to start by giving comment in I d. So I could give it a unique idea here, but I'm just going to say this doc comments don't length plus one. So if they're five comments in the database than the idea of the new comment will be five plus one, and that will be six. Then afterwards, we're gonna push it onto the area. We're gonna say this or commented. Push. We're gonna push that comment on to it, and then we're going to return to comment as well. So that our graphic you elope. I can present it to the user. All right, so let's now implement mutation. I'm gonna open up the uncommon file, and I'm first going to copy everything from and posts. I'm gonna pace that in. They're gonna change the name. Gonna call it. Add comment. This will return a comment object. We're also gonna give it a more proper description. We're gonna say creates a new comment for a block post. This will receive an argument, but it won't receive a post. It will receive a comment. And that will be off comments, input type, and in a result, function. We need to grab our comment arguments, this one right here. And then we need to call fig database and we need to say have new comments and then we're gonna pass along to comment argument right there. So to finish up, let's fix our imports. So we need to import comments we need to import. We need to import comment, input type, and we import it from Are comments Types file, which is located in our types directory. All right, let's say the file and that was it for this video with implemented the mutations that will allow people to submit new data into a graphic. You l A p i. Now we're almost ready to test their graphic your l a p I. In the next video, we will throw everything together to create our schema. And then we're done. So let's continue with the next video. 16. Building a Schema: Hi, everyone. In the past few videos, we have created all the building blocks for our graphic UL implementation. We created object types, queries, input, object types and mutations. And now it's time to bring all of these together in our schema. Now, a schema basically tells graphic you Well, how it could expose your data to clients and how clients consent new data to the A p I. The scheme. It defines the shape off all that data. Now our schema will live in the in next RGs file inside our scheme a directory. So I'm gonna collapse thes Fuller's here. I'm gonna open up the next stop Js file. So let's start by creating a constant called schema. And this will be a new graphic UAL schema and again in it's Constructor. We're gonna pass on empty object inside this object, we're going to define two properties a property for query and a property, four mutations. So we're going to say crary, which is a new graphic ul object type again, initialize it with an empty object. And it will also have imputation, which is also a new graphic UAL object type. So let's implement the query because This is a graph Curiel object type. It requires a name and optionally a description, just as we did with the object types for post comment and author. So I'm gonna give query name. I'm going to say that this is our route query, and we also need to give it some fields fields that user can request. And these are the top level fields. These are the root fields that your user can work with. So I'm gonna add a property field here, and we're gonna use an arrow function, which returns an object. This will make sure that we keep our scope that we can access all the variables and methods that we have inside this file. Now, in our case, we've defined queries and mutations in other files, so we need to import them first before we can work with it. So we're gonna import posts from our Queries folder posts. We're gonna import our post query also from queries post, Jess. And then we're gonna import the author query from queries slash author. While we're at it, we're also going to import graphic ul schema and graft rail object type. So import graphic you'll schema and graph que el object type from the graphic you'll package. There we go. And now that we've important it our queries, we can just add them as fields here. And to do that, I'm going to use to spread operators. I'm going to say dot dot Not posts dot, dot, dot posts and dot, dot, dot Author. Now, the spread operator will take the contents off posts author and post. And it will please these contents inside this object right here. So it's almost like there right there, except that we import them from a different file to make our project easier to maintain and easier to understand. Now we can do the same thing for mutation, so we're gonna import them as well to say, import at posts from mutations, slash at post, and we're gonna import and comments from thought slash, mutation slash and comments. And now we can add them here a swell. So we're gonna give our mutation a name. It's gonna be the roots mutation, and it's going to receive some fields which again is an arrow function which returns an object. And we're gonna use the spread operator to add the contents for at post and add comment. All right, I'm going to save the file. And that was it for this video. We have taken all of our building blocks, our queries and our mutations, and we've put them inside our schema. And now graphic. You well can use it schema to handle our queries and our mutations. Now, in the next video, we are finally ready to test the FBI and to see it in action. 17. Testing our GraphQL API: Hi, everyone. In the last video, we created our graphic you'll schema. And that means that now we have everything we need to start using our MP I So, in this video, we will test if r p i works properly. Now I'm going to implement this in the next file inside our source directory. And this contains some Tesco that we used in one of the earlier section. So I'm going to keep the import too graphic you all. But I'm going to remove the consul log here now. Besides graphic, you Well, we also need to import are schema because graphic ul Needs are schema to know what object types we have in our ap eyes. What query? Sri allowing what mutations we have. So we're gonna import hope that scroll up. That's cruel. Back up again. So we're gonna import schema from the schema directory and with the stew loaded, we can now start writing a graphic. You well, Crary So I'm gonna create a constant called query and I'm gonna initialize it. And here I'm using a template literal because then I can use line breaks without having to worry about quotes. However, you can also use regular strength. It's all the same. So our query will be a very simple one. Let's assume that I want a list off all block, post and from each block boast I want the title. So in graphic, you value created objects. Then you say I want the post the block posts and fromage block post. I want that title Very simple. So now that we have our query weaken executed against our schema So I'm going to call graphic you Well, which we import it here and I'm gonna give graphic. You'll are schema, which we also imported here. And then we're gonna pass along our query now graphic UAL works a synchronously and that means that here it returns a promise. So we have to wait for the output if you want to work with it. So to do that would promises you have to add it, then method which will receive the results from graphic you Well, this will be an arrow function. And then in here we can work with the results. So all that I'm gonna do is I'm gonna consul lock the results so that we can see what's in it. However, note that the result data that we get back from graphic UL will be all JavaScript objects. And if you want to see what's inside an object, you need to string a fight first. So I will call Jason dot string of fine on our results. And I also want to result to be a bit pretty, it needs to be formatted. So I'm gonna give it to additional parameters. The 1st 1 I'm gonna set to know. That's because we want to string If I all the fields and then we're gonna pass along the number two. And this means that it will in dent our object here, a result object with two spaces, and that will make it easier to read. All right, one more thing that need to do here. We're handling the promise with it then, but we're not handling any error. So we're gonna add a catch method here. And if there should be an ever we're just gonna log in to the console so that we know about any potential Evers. So I'm going to save the file and I'm gonna test or graphic you l a p I I'm gonna open up the terminal here and I'm going to run our build script first. NPM Run Built again. We've defined this one of the previous videos. This will run babble, and apparently we have a little bit of an issue with See here duplicate declaration graphic you'll in. So it appears that we've imported graft UAL twice in our comment object. So let's take a look at comments and yep, there we go. Let's remove that. Let's run viable again. See there any more issues in our code days. They there are some stick look now Common is not defined in our post object types. Let's see. Yep, we using common here, but we haven't imported it, so let's import that right now. Import comments from our comment. Object type. There we go. Let's run it once more. And now it says schema must be an instance of graphic Ural Schema. So something is up with our schema. Let's open it up. And the problem is, I forgot to export our schema. So we're finding schema here, but we're not exporting it. So all we need to do is say, export defaults, scheming, and now everything should be fine. Let's run it again and There you go. Our graphic. Your Aly p. I works. So this is the response that we get to our query. So let's hope from the query. So we've asked for all the posts in our block posts, and we've asked for the title of each of those block posts. And so we get posts back, which is an area, and it contains one object per post in our database with the title off the Post. So let's finish up by testing a more advanced query that also uses relationships. Let's say that I want a list of all the block post with name of the author who wrote them. So we want the title. I'm going to say we also want the author and we want the name of the author. So let's save the file. Let's run or build script again. And sure enough, now we get a list of Block post with their title with an author field and with name off the author. So that was it for this video and afford this section are graphic you l a p I implementation is now complete and it actually works. In the next section. I will show you how you can set up graphical so that you contest your A p i with a very nice weapon or face and even get features like auto complete as your type in your query. 18. Introduction to GraphiQL: Hi, everyone in this section, we will test our A p I with graphical. In this video, I will explain what graphical ISS and why it might be a great idea to use it. After that, I'll show you how to install and set up graphical for only P I. And finally I will show you how to use graphical itself. So let's start by explaining what graphical is. I've used the stool in earlier videos to explain the core concepts off graphic You out now to test your a p I. You need to make requests to a Web server. You can do that by writing some small scripts, or you can use APS that are specifically designed for it in case of rest. AP eyes There are many tools to do this. I'm thinking of tools like Postmen Paw, the built in rest client of Jet Brain, ID's and so on. Graphical is just like those tools, except that it works with the graphic u l e p i instead of a rest a p i. But it doesn't stop there. Graphical is much smarter than any other AP I tool. It integrates with your graphic U L f b I, and it asks it about all the supported queries, mutations and types. Now, with that information, graphical is able to offer you syntax, highlighting intelligent, auto completing real time error, highlighting an automatic query completion. In fact, graphical is being described as an idee for graphic. You well, and best of all, it runs completely in your browser. So let's dive right in. In the next video, we will add graphical as a dependency and write a small bit of code to make it actually run . 19. Install & Configure GraphiQL: Hey, everyone. In this video, we will install and configure graphical so that you can start using it. Now we're going to use NPM to install graphical as a dependency for our project. Now, before we can use graphical, however, we need to make sure that our A p I is accessible within http call. So we need to run our Web server for that Now, with no G s world, a lot of people use express. It's a simple replication framework, and there's even a note package that sets of graphical to gather with express. So let's install that into our project. I'm going to open up a terminal and I'm going to run NPM install Dash, dash safe to telegraph que well, that it should save this dependency inner packaged Jason file. And then I'm going to say that it should install, express and express graphic you well, and this last one will provide the integration between graphic UAL and express so that we don't have to write that ourselves. So let's run that now. Now, with those installed, we need a small piece of Java script that starts an express server and links graphical to it for that I'm going to create a new file inside our source directory, and I'm going to call this surf dot jazz. I'm gonna close of the terminal, and I'm going to start by importing. Our dependencies will start by importing express from the express package. And we will also import graphic ul http from the express graphic you well, library. And again, this is a special package that makes graphic, ul and graphical compatible with express. Now, finally, because we want to execute queries we need to import are schema so that graphic evil knows what data we have and how we can access it. So I'm going to import the schema from this directory now, with that done, we can create a new Web server. And so I'm going to create a new constant called app, and I'm going to initialize a new express object here. So at this point, we have a web server, but it doesn't have any endpoints yet, so I'm going to add it by saying after use and this requires two parameters. The 1st 1 is the end point that you want to expose. And the 2nd 1 is a function that will respond to a request, so I'll expose the slash graphic you well and point. And now we need to specify which function will handle our request. And we will use graphic you al h to be from the package that we've just imported here. So I'm gonna call graphic ul http and inside its constructor, I'm going to pass an empty object, and here we can pass along the options for graphic. You out, Http? So first stop, we're going to pass or schema to it. So that so that it knows what queries we support and how it should talk to our database. And then we're going to enable graphical but just setting the graphical property to true. All right, we're almost done. Now, the last thing that we need to do is we need to start our web server by saying that our action listen on a specific port. So I'm going to say on the console, starting the server so that we have a bit of feedback and that I'm going to say, app dot Listen, and I'm going to make our hapless and on port for 1000 now, remember, if we want to run the script, we need to run babble first, and then we need to run our script. So let's automate that by creating a new script in our packaged of Jason file. So I'm gonna open up the package of Jason file here, and I'm going to create a new script here, and I'm gonna call the script serve. And the first thing that it should do is it actually should build our project. So I'm going to say babble source. And then the output directory is this and the second command that it should run is it should run. Are served at Js file with No Jess. So I'm gonna do that node. This served thought jazz. All right, so let's save the file and let's try it out. I'm going to open up terminal and I'm going to run NPM Run surf. And as you can see, this script now runs babble to transpire are Java script code, as you can see here and then it also runs her web server. This is the message from our served that Js file and you can also see that it keeps my eternal prompt busy because the Web server is actually running so right now I cannot type a new command in my terminal because the Web server is still running or no jazz process is waiting for incoming requests. So that was it for this video or Web server is up and running. It's ready to receive requests, So in the next video, we will use graphical. 20. Using GraphiQL: Hi, everyone. In this video we will take a look at how you can use graphical and you'll see why it is such a great tool. It's another advantage of graphic you L a p s half over traditional ap ice. So just to recap the last video, you have to run our serve script to start express Web application that will host graphical . So I'm gonna open up the terminal and inside our project right here. I'm just going to run npm run, sir. And again, this will start our express server and let's now open up chrome and let's go to local hosts 4000. That is the port that we configured express to run on slash graphic you well and we're now greeted by graphical. Now it's interface is pretty simple. On the left side, you can see the query and imitation that you're executing right now. Once they're executed graft, you always show them on the right side of the screen. Now at the top, you also have some tools you have play button which executes your code a pretty five button to properly format and invent your queries right here. And you have a history button, which opens up in our panel showing you recently made queries. So let's write a simple query that gets a list of block posts with the title for each. Now let's also assume that I'm a new user who hasn't used his FBI before and that there is no documentation now using arrested be I, without proper documentation can be a nightmare. But how will it go with graphic? You? Well well, let's start by saying that I want to write a query. I'm gonna open up the curly braces and as a new user, I don't know what route fields this ap I supports. So I'm just going to bring up the auto, complete by hidden control space. Now, this is the same shortcut that many I d Ys use as well. So here we get a list of supported route fields and we even get a nice description. So here we see posts and the description is get a list of recent block post. Now, remember, we define this description in the schema now it might have looked a bit reared to define them in the schema, but here they truly come to fruition. So let's get a list of block posts I'm going to hit, Enter, and I'm going to open up the curly braces again. And just as before, I can now ask graphical for the fields that I can request. And sure enough, there are all the fields that we can request. So I can pick title, for example, and hit Tab, and it will feel entitled in our query. So let's now test this query and let's executed by clicking on the play. But and as you can see, we get a list of block posts on the right hand side. Pretty simple. Now I can keep changing my query. Let's see what graphical does when I don't give it a complete query. Let's say that I also want the name of the author, but that I just ask for the author field here. Let's assume that I don't know that I have to sub select name often author. Now this shouldn't work because we have to specify which fields of author we want. But let's run it anyway. So when I click play and as you can see, graphical picked up on it and it has added the I D fields automatically before executing our query. So it handles are errors by trying to correct them beforehand, and in this case, it works pretty well. Now let's make it a bit harder instead of title, let's make a typo on Let's ask for title like this now. As you can see, graphic novel doesn't catch. This error doesn't prompt this. It isn't warn us that this is an invalid query, but if I run this, you'll see that Graphic UL does. And it says that we cannot ask for a field title because that's not available on our post type. And it also tries to be helpful. And it says, Did you mean title? And of course we did also pretty handy. Now, finally, I want to show you the documentation panel. So if you click on docks here in the right hand corner, a panel open up with the documentation that graphic UAL has extracted from our scheming. So I can see what choirs air possible, for example, So let's open up the root query here to see what Reed fields can request. And sure enough, here are three route fields. I can ask for posts for a single post or for details about an author, and it even shows what kind of data it returns. So post returns an area of post objects and our post fields, except an argument I d, which should be of type imager. And we didn't have to do anything for this again. It extracted this from the descriptions in her schema and from or return times. Now I can keep clicking on fields inside here. So if I want to know what a post object looks like, I just click it and then I can see that Opposed has all the details of a block posts, and I can see the fields that it has. So that was it for this video. Hopefully you realize how powerful graphic evil is. The next section will wrap up. This course will talk about the conclusion, and I will give you some interesting resource Is to continue your graphic your quest 21. Conclusions: Hey, everyone, thank you so much for buying the scores and watching it all the way to the end. I hope you enjoy these videos and that you've learned a lot from him. Graphic UAL is an amazing tool. And even though it is still very young, it's already being deployed in large companies like Facebook. Get up yelp and many more. And now you know how you can build your own graphic. You l e p I. Now, if you have any questions or suggestions for future courses, definitely let me know. I greatly appreciate any feedback you might have. I've also published the source code that was used during this course you condone emitted as a zip file and use it as a template to start building your own graphic. You, Aly p. I also make sure to check out my YouTube channel for more tutorials or to check out my website. That was it. Thanks again for watching the scores and I hope to see you on my next course