The initial GraphQL setup - GraphQL Tutorial

- [Instructor] Now that we have a base server set up, let's add GraphQL to it. So the first thing we're going to do is install a few more things. So, let's stop the server, so Control C to stop it. I'm going to clear this, and what you need to install next is GraphQL itself, so graphql. And there's a nice express package that integrates GraphQL with express very well. So, let's go ahead and install this one. And with those two packages, we'll be able to keep working on our server. So, let me just close this for now. And what I'm going to do now is create a data folder where we're going to have our resolvers, our database connections, and our schema as well. I'll explain all of those as we work with them. But let's create the folder first, and then we'll create the files that we need. So, I'm going to call this data. And then, inside of that folder, I'm going to create our schema. So, I'm going to call this schema.js. So basically, a schema is a blueprint for the data that GraphQL is accepting, and what are the types for each of these elements. And what I'm going to do is explain this as I build the schema. So, let's go ahead first and import buildSchema from graphql, I'm using shortcuts here, but it's buildSchema from graphql, like so. And then, we're going to create our first schema. So, let's go ahead and create schema, and we're going to use buildSchema, like so. And then, inside of our schema, we have to define a type for a Query. So, we have to define a type for whatever types of data that you're going to receive, but you also need to define a type for your queries, a type for your mutations, we'll get back to that in a video or two. But in the meantime, we're going to just go ahead and create our first time, which will be of query. So, whenever somebody is asking for the query hello, we expect a string. So basically, the response should be a string. So, what's going to happen with that, we're going to export it, and then we we'll, and as we build the rest, it'll make a bit more sense. So, let's just finish this here, export schema, save this, and then let's go into our server. So here on our server, let me close this to have a bit more screen estate. I'm going to import graphql HTTP from express-graphql. And now, what I'm going to do is after the get here, I'm going to define a root. So, the root will be used basically to define the responses that are available from the GraphQL server. So in this case, we have a type that we called hello, right? which should be basically a query. And what we're going to do is sort of create a very quick resolver here. So, the resolver is basically the function that resolves the data from the database. So, GraphQL has a function that is calling it to the database, and then returns data into GraphQL. So in this case, because we don't have a database, we don't have anything right now, we're just going to create this function, which basically what you're looking at right now, is a resolver that will resolve a message which should be a strength. So in this case, we're going to say, well, "Hi, I'm Manny!" Like so. So, once we call into this resolver, which is a type of query, we should get a response, "Hi, I'm Manny!" Okay? So now, we're going to basically define the GraphQL server. So, let's use this endpoint. So, we're going to use the endpoint GraphQL, which as you remember here, we should have an endpoint called GraphQL, so this is where we're going to define it, GraphQL. And this endpoint will use the express-GraphQL package to create a GraphQL server, like so. And we have a few things that we're going to define here. So, what are we using is a schema that we just defined, so we need to import it here, import our schema from our data scheme, right? So, it's auto completes for me. So basically, what we're doing is we're importing the schema from the data folder and the schema, so basically what we exported here. So, let's go ahead and import this here, and then we're going to use it here. So, we're telling GraphQL, FYI, the schema that I'm expecting is from the schema here. And you can also do something like this if you want to use the latest and greatest JavaScript. But I like to be a bit more declarative, so you guys see the thinking here, but you can also do the shorter version. So, the root value is going to be the root. So basically, the resolver is this function here that will return the value. And basically, we're going to use graphiql, which is basically a front end interface that the GraphQL team has built. So, we can actually see when we make requests to the server as supposed to go through an endpoint, we're going to use graphiQL just to represent what we're working on right now. Okay? So, save all this, and now let's go into our terminal. And I keep creating new terminals, I shouldn't do that. Just bring the old terminal and do an npm start. Everything is running. So, we're going to go to this address on our browser, and you're going to see graphiQL as we do this window, paste that address, and we have GraphiQL here! So basically, to show you that what we've built works, what we're going to need to do is basically run the query that we've created. So, let's go ahead and erase all of this gibberish here. And if you don't know what's available in your GraphQL server, there are docs here. If you click on docs, you're going to see that right now, we have a root type of Query. Okay, so what is that Query? Click on here. And you see the type that we've defined is of hello, and it's expecting as a response string. So if a resolver is coded properly, it's going to return whatever our resolver is supposed to return. So, the resolver, if it was connected to a database, it would return whatever is available from that specific resolver. So, let's go ahead and do this, so query. And if I just type hello like this, I don't need anything else because there's no input, there's nothing else that I could do on this specific query type. And I run it, I have this message, "hello," "I'm Manny!" That is resolved by the function that we wrote inside of our server. So, you have coded your first GraphQL server! Got it started and made your first query. So, this is how you get started with GraphQL. There's a lot more to it, and we'll explore this in the rest of the course.