Build a GraphQL Server with Node.js and MongoDB

so I'm redoing a video that I did a little while ago that had some audio problems and what we're gonna be going over is how to set up a graph QL server that connects to a monka database so to do this we're gonna be starting from scratch and we're gonna be using three tools to help us out the first one is babbled this is going to allow us to use some different JavaScript syntax secondly we're going to be using Apollo this is going to be the server component that's gonna handle graph QL requests and thirdly we're going to be using Mongoose to connect to MongoDB and create objects and store stuff in the database so let's go ahead and get started with this so I have this code up and open over here and I have an empty folder open so the first thing that I'm going to do is say NPM an it - why so this should create a package of JSON file you can open that up should look like this and now we're ready to get get started and install some dependencies so the first thing we're going to do is get Babel set up so I noticed when I went to the set up of Babel and I was gonna do the no demon one that there was really the right steps but they have some outdated dependencies so we're gonna kind of follow these steps but do it in a better way so first off they are installing babel CLI and babel preset m which are right but these are all dependencies so we are going to use the one that it suggests down here that will preset m that looks like this so we're gonna start by saying yarn add as a dev dependency at babble slash preset - and when i say at babble slash CLI a babble slash node and i think that's all the babbles things actually i think we also need a papal core and then lastly we're going to be using this utility called no daemon which we're going to look at what that does in just a second so after that we're gonna basically just add this script copy this I actually don't know why I copied this to be honest we're gonna rename it to start and we're also just gonna clean this out here so maybe that's a bad thing we're gonna copy this one this is kind of closer to what we need so we're gonna run this thing called no demon we're gonna say - - exec this is basically just telling no demon what to run in this case Babel node and then we're gonna point to a file in our case source slash index dot JSP eight that source slash index table GS and here we have an empty file and I'm gonna add console.log hi just to make sure everything works you can say yarn start to see if it indeed was set up correctly now we see hi now let's talk about what this node daemon does so what's gonna do is it's gonna watch our files and then when we make a change to them automatically reload them slash rerun them so if I say hello and then save your notice it's going to reload it to restart and it's going to say hello so this allows us to have a nice development environment where we can disco and not have to worry about coming to command-line and stopping and restarting it it's just gonna keep running all right so let's set up the next thing so I think the last thing with babble is just to create a dot babble RC file so dot babble RC paste it in also may get some errors later with babble and we can fix them but I think this is a pretty solid setup alright so thing tube to setup is the Apollo server so my suggestion with this is to use the Apollo server express integration so this uses the Express server underneath the hood they all have some other integrations as well those are all good as well I would recommend using one of the integrations we're using the Express one just gives you more flexibility with the server I would say all right so I am under essentials building a server and the hashtag integrations under here if you want to copy this code or just write it as I paste it in here this is the getting started of a server alright so this is basically you know very beginnings of things now I mentioned with babel that allows us to do some different so what that syntax is is I can say import like this instead of require I can say import from all right so we can do that secondly we need to install it entities so let's do that we're gonna say yarn add Apollo server we're also going to install Express and graph QL and you'll notice we did not install these as dev dependencies because these are our main core logic I guess components or basically there's just not development tooling like babel is okay so here we're creating an instance of Apollo server we also need to create an instance of Express so let's do that I'm gonna start by importing it import and I'm gonna create instance of Express called app then we're creating an instance of Apollo server now we don't really have these type tips and resolvers yet we're gonna add those in a second then you'll notice here we are saying server to apply middleware so what that does is it basically Apollo server add some middleware to our Express server that allows it to handle graph QL requests and then we just say here app dot listen to start their server up and then of course there's console logging and this is opening on port 4,000 so to do graph QL there's basically two main things type definitions which are called type deaths usually and you'll notice I said gql here we I don't think you really even need this right now but you can import it from Apollo server express and what allows you to do is inside of here you notice I did back ticks there so uql back ticks and inside this is going to be a string and these are going to be basically our graph QL schema so here's where we're going to define all the graph QL types so I'm gonna say type query and we're gonna do a very basic one called hello which is gonna return a string and this exclamation point means it cannot be null so this is we're gonna put all your information about what your graphic ul schema what types they return what operations you support so in this case we support a single hello operation that's under it's a query and it the string so now we need to figure out how we return the data for this operation and that's what our resolvers do some say resolvers they're gonna notice we're gonna pretty much match the nesting here so we're gonna say query hello and then we said we have to return a string here so we're gonna say hello and if we didn't return the string it would get mad at us so now let's go ahead and start our up our server and we can just leave it running now and you can see it says server ready at this URL I'm gonna copy this and we can open it and we can come see our server I have some old stuff in here but yours probably looks like this and if we click on schema we can see all the things that our graphical server supports so what you're looking at here is called graphical playground this allows you to basically test out your graph QL API so on the right we can see all the things our schema supports we can see we have a single query call hello we can run this by saying hello here and run it and we can see we got the data back which is hello and again if I were to make it change to this like hi save it your notice is gonna restart server restarts and then if I come run this again it's gonna say hi here cool so this is the basic introduction to setting up a palo server and graph QL the last piece is how do we integrate MongoDB with this so let's copy and paste the just getting started for a mongoose and let's paste them at the top here so i'm going to just stop the server real click and add mongoose and i'm gonna add this import to the top and i don't know if i mentioned but babel is totally optional you could just use the older syntax if you like so we're gonna keep this connection here's where we put the name of our database so i'm just gonna say test like 3 I feel like I probably have a database called test already alright so we'll save that so we connect I look at this I just wanted to see if this like return to promise yeah it does return a promise it probably good to like wait for this promise to finish before I did anything else so what I'm going to do is I think what I want to do is split things up into their own files right now I have everything in a single index file and I think we can clean this up and make it a lot more easier to grok if we split things up so I'm going to create a folder called models let's spell that correctly and this is where I might put like my Mongoose models and then I'm going to create a type def dot J s and this is where I'm going to say export kant's typedefs and we're just going to copy over our code that we used all right and let's create a resolvers file and this should be jeaious I'm so used to Jane type scripts that I keep doing dot TS and we're just gonna explore our resolvers all right so we don't need them here anymore and now we can import these and port I guess I'm gonna have to do it myself import from dosh resolvers and type toughs reason I'm doing this is just to simplify what we have here so it's not getting all mangled together because what I want to do is I want to do a function here just simplify things so the other part is moving this kiddie model sorry not kitty it's called cat model we just create an instance of it here called kitty so we're gonna call it cat is I'm going to say export Const every sailor a context port Const our model here excellent and then we're gonna move this logic to our resolvers to actually create an instance of it we're gonna come back to that so we simplified this file quite a bit that's what I wanted to do the reason why is I want to just create a function called start server and I'm gonna put everything we have here inside of it all right and I'm just going to make this a sink and the reason why I'm doing this is before we connect or start our server I want to make sure our connection to MongoDB is done with so to do that I can say a wait tier and I can wait for the promise to finish before starting syrup so we're just gonna call start server down here and I'm just going to say start and see if I introduce any bugs or anything we our server didn't change any we did now just connect to but we're not doing anything which returning hi so how do we integrate in mom go now so in our resolvers we're going to create a new resolver say mutation and this resolver I want to basically create a cat so I'm going to say create cat is what I'm going to name it and actually I usually like to do is create the type definition before I create the resolver for it so let's do that so this is going to go under mutation because this is creating something a database so we're gonna say create cat it's gonna take a string as a parameter which is gonna be the name and it's going to return a cat so now I'm going to create the type for this cat it's going to have an ID which is a string actually when you're using Apollo it's good to say ID so this is a special Apollo type and basically if you're using Apollo on the front end it gives you some advantages basically underneath the hood this is a string so you can still think of it like that but that's usually the type I like to give it alright so we said ID give it a name as well and again you can add more properties to this you can create more types more models but this is to get started all right so let's create our resolver now so I'm gonna say create cat I'm gonna make this asynchronous actually I don't even think we need to make this asynchronous I think we can just get the argument so we want to get whatever name that the person passed in here or to our create cat mutation and create a cat for it alright so Kant's cat I guess we're gonna say new I think we can just copy we have here actually I call it kitty so we don't care about the first parameter that's the parent which we don't really need here our second parameter is the argument so in this case we can D structure D name and that's what we're gonna use here and then we're just gonna return kitty save now let's go ahead and run this and we're going to notice a err so if we say mutation create cat and to show the error I'm gonna do this you know wait that you're going to log the kitty and then we're gonna return the kitty so I want to see if we actually get a cat and then we're gonna look at it and you just usually need to reload the page to get auto completion here so we're gonna say name and I'm gonna say this is cats gonna be called Bob get the ID and the name back now if those of you that are familiar with you're probably aware that this ID here is usually has an underscore so if we run this no catch is not defined I forgot to import our cat so we created our cat model over here but I never imported it so let's do that import from model slash cat Mongoose is not defined let's go ahead and copy our imports and index and paste it at the top of this models file art cat model file all right so our server's back up to running go ahead and run it wow it just straight worked I was really not expecting this to work but I'm really happy it did see notice how this underscore ID is an object ID I thought we were gonna get an error because of that but it looks like Apollo actually handles it for us now or something I'm really surprised that they did so it's really nice that they had out of that at some point maybe it's because we have this ID here or maybe Mongoose is doing something to be awesome not quite sure who handles it but either way it worked so I'm happy so let's just see what I don't know it saver turns I think we may be able to simplify this we get at least simplify it to just that but either way that's how we create a cat I want to just do one last query which is how to fetch all your cats so let's add that I'm gonna say cats it's gonna return an array of cats to say an array and graph QL you do brackets around the type and I'm gonna say cat cannot be undefined or null and the array it cannot be undefined either okay or null so now we're gonna say all cats I'm sorry just cats and keep calling all cats and we're just going to return cat find all right and you'll notice find if you are familiar with how this works I was expecting it to return a promise but it doesn't look like it may not either way graph Gale is gonna handle that for us I believe so if we refresh this so we create a bob we can create a new tab here let's see if we can find our bob cat ID name and let's run that you can see our cat can add another cat run this again and now we have two cats awesome but there you go this is the basic setup of how I would get started and this is where you'd go from here you can add more type definitions add more to your resolvers create more models add more fields and so on and so forth you

Channel: Ben Awad

Views: 67,299

Keywords: build a graphql sever with node.js, graphql, graphql server with nodejs tutorial, learn grapql node.js, graphql server with node, graphql server with node.js, code a graphql server with node.js, node, node.js, graphql server, build a graphql server with node.js and mongodb, mongodb, node.js and mongodb, graphql mongodb, graphql nodejs mongodb, graphql node.js mongodb, code a mongodb graphql server, mongodb graphql server, javascript, graphql server mongodb, mongodb graphql node.js

Id: YFkJGEefgU8

Length: 18min 17sec (1097 seconds)

Published: Fri Apr 12 2019