Angular GraphQL MEAN Apollo CRUD API

welcome to this video on graphql with the mean stack we are going to use node and express to create a graphql crud api that persists data to to a database with the help of mongoose and we will also connect the graphql api to an angular front end and perform the correct operations from the client so we'll just create our folder structure and i'll just make a new directory and i'll call it backend and we can cd into the back end and we can just create a node application by running npm init dash y and what this will do for us is it will create the package.json file and we can go ahead and install our dependencies so i'll run an npm install express express dash graph ql graph ql mongoose body parser and calls and i'll also in store as a developer dependency with the dash d flag nodemon so in our package.json file we can in the scripts we can create a start script using nodemon and we can just say nodemon on the app.js file which we will create so in the back end we can create a new file app.js and this is where we will create our server so we can go ahead and import our dependencies that we need so the first one we'll need is body parser as we'll be expecting json data and we'll need to pass that on the body so let's get that in and the next one we'll need will be express of course we'll need the framework for node lightweight express framework then we'll need mongoose mongoose from mongoose and we'll also need cores so because we're going to have an angular application on port 4200 and this is going to be served on port 3000 um just to a simple way to get past that we can just add a cause middleware and we will also need the graph ql http which comes from requiring from express dash graph ql so the first thing we want to do is we want to create our connection to mongoose um to to a database using mongoose and it should be noted that i'm using mongodb compass as my graphical user interface for the nosql database [Music] so we'll have to firstly create our app and that can be done just by instantiating express our application and we want to just quickly add some middleware here so we can pass our responses of the json format and we can also use cause to mitigate against cross origin resource sharing errors that may otherwise occur of course another middleware we'll need to implement is the graph ql and it's to be noted that there's only one point and it's a post request to slash graphql for graphql api so what this will be is it will be a middleware here where we have the endpoint slash graph ql and from the imported graphql http we can use that and it takes an object and it takes a schema and we haven't defined this yet it takes a root value and we need to define that as well and there's also a user interface graphical user interface called graphical and we can actually make queries from there so if you're familiar with postman where we can make api requests there's a tool especially for graphql apis in the browser so we'll come back to the schema and the root value which is a resolver but first what i'd like to do is i'd like to connect to using mongoose so i'm just going to comment this out for now but what we want is we want to have the name or username that you've created to get into your mongodb compass along with the password and the database name so i haven't actually created the database name but we can create it on the fly so for this in our back end i'm going to create a new folder called config and in that file i'm going i'm going to create a file in that folder called config.json and it's in this file here where i'm just going to create a few values here so i'm going to have a username and i'll put my username in here i'll put my password in here and this is likely to be generated um you know some sort of hash value and we can put our db name here and i'm just going to call this crud so we can go ahead and save that and we can close that config.json file and with that config.json file we can actually use that and import that so we can use those without being directly using the password in plain sight even though it's all protected it's just an extra layer of security there so just after the graphql http import i'm going to import config and that's going to be done by requiring it from the location which we've just put into the config folder into config.json here so now i am able to create our mongoose connection and mongoose actually has a dot connect method and this method it can take it takes a string of you know the server the username the password and all of that so what we can type in here is we can just type in db plus srv colon forward slash forward slash and i've used the backtick so i can use these template literals and we've imported the config file with the config json configurations and on that we have the username and the password so we can just do get the config.user colon and then we can get the config dot password and this is just going to be at the particular cluster um that you have for your mongoose so i've got this cluster here cluster 0 mv cmf so i can go ahead and put that in so cluster dash zero oh sorry cluster zero dash m b c cmf and that's coming from db.net and then we can have forward slash and this is where we're going to have our database name so we can use this template literal with the configuration so config dot the database name and then we can just have a few query parameters here i suppose so we can have retry rights equal to true and this is just the default um from the mongoose recommendations and w equals majority now on later versions of node there's a few there's an extra parameter which is an object of properties that we need to define here and namely what we'll need to include here is use unified topology set that to true use new url parser set that to true and use create index and set that to true so this actually returns a promise so we can chain on a dot then here and what we can actually do here is we can just say at dot listen and we can specify the port number here and we can also have this other parameter so we can just check that we are actually logging we are connecting so i'm just going to say connecting to port 3 000 i might change this to connected to port 3000 and then of course if we have any errors we can catch those and for an error we can just also console.log and log the error so we have our connection here and let's just test that we actually can connect with our database we don't have any methods or anything but if we run an npm start here from the back end folder we get connected to port 3000 which implies that we actually have connected to our database here so i'm just going to control c because i want to change quite a few things here so okay so now that we have our connection to the database from express or our node server we want to use the graphql middleware from the graphql http method that we imported so that takes a schema and i should spell it correctly and it also takes a um a resolver so the schema is similar to sort of a like the model and it's a graphql type um sort of definition of the input for the queries or mutations that we're going to do so a query is just like a regular query where you query a database except in graphql terms the query refers to retrieving or getting information and a mutation is modifying the data so you know if we edit it or delete the data in some way or create a new post or something like that that's all considered mutations so what i might do is i might actually create a graphql folder here to encapsulate that graphql in the back end here so i'll create this graphql folder and in this graphql folder i'm going to create our schema with a schema.js and i'm also going to create our resolvers with a resolvers.js folder here file here and in addition to the graphql folder i've created i might also create a models folder and our application is just going to be a simple crud application where we can create a quote and the quote will have you know the quote itself and an author and so i'm going to model a quote so in the models i'm going to have this file here called quote dot js and i might actually do this first just so we have some shape of where we're heading towards and we want to create a new database so we have well we're creating a new database in our app um well we're connecting to the database name and i just called that crud it's not created yet but allows us to do that on the fly if it's not already created and in our database we want a particular schema or a table from a relational database perspective so we can go ahead and we can get mongoose and we can just go ahead and require that from mongoose so then we have access to the mongoose properties and with that we can actually create a schema here and i might just put a separation here so our schema is from mongoose and there's a particular schema so that means we can now create the shape of our schema or our table and i'm going to have a quote schema so i'm just going to call this quote schema and i can create a new schema and we can pass in an object of objects essentially well property object pairs so the key well one of them that we can use so we're going to have a quote and an author so for a quote we need to actually specify the type so if i type in the type here we know that that's going to be a string and we'll also set it to be required and i might just copy this down because an author is going to be quite similar it's not also going to be a string and required i'll just change the word to author and what we can do is we can just export that so we're able to use it in our controllers or our resolvers which is the graphql equivalent for the controllers and if i just create use this mongoose.model what i can do here is i can use i can create a quote database and you know this will come up as quotes in the database but we specified as a singular here [Music] and then i can pass in the quote schema here so with that model there we sort of have the shape of our database and our schema or our table in particular so we've got that and i might actually i made another i keep doing this typo where i write scen so i might just quickly rename that and that is here so hopefully i haven't done that elsewhere schema okay so in our schema so this is mongoose and this is coming from so we have you know types from there from mongoose but then we have this graphql layer and we need to actually interact with the graphql database which is you know going through objects and stuff like that so we actually need to do a similar thing for the schema so we can just go ahead and we can get the build schema and that's going to be from just graphql and this is going to allow us to build a schema for graphql and we can just do a module.exports here and we can use that build schema that we've just imported and i can just put some back ticks here so we can actually create our schema and it's to be noted that our graphql schema it needs to have a query or it needs to have a root query and we're going to have query and mutations because we're going to have all the crowd operations so recall queries for getting and mutations are akin to um you know posting or putting or deleting from an api a restful api perspective so nevertheless we can create our schema and we'll initially just make it so we can get something so we'll just have a query here and we need some sort of root query so i'm going to create that root query and we can actually you um make that and it's going to be a certain type and this is where all of our queries all of our get requests are going to be so in the root query we're going to have a quote query and that's going to be of a particular type and we're actually going to create some type and we're going to have some quote data type so i'm just going to call this quote data and the exclamation mark signifies that it's actually required to be of that type so okay before i make the quote data what i might do is i might just create a type here for the quote by itself and it should be noted that when we create or we insert a new entry into our schema so into our quote schema we will need yeah mongoose it generates an id for us and by default it has this underscore here so the id to identify the document or the row um so it doesn't get confused with other rows so we can pinpoint that one so and there's actually this id type so we can signify that that id from mongoose is of the id type and is required and we can also just have a quote here which will just be our typical string and an author which will just be a string as we defined in the models for the quote so with that what we actually want to do is get all of our quotes not just one quote so we can go ahead and create that type there and we can call that quote data and you know this could be anything really but we're going to have quotes here plural and we can actually have an array and we can have an array of quotes that are all required and the array itself is required so when we have this root query here for quotes we can have an array of quotes which you know each quote has an id a quote and an author so that's the beginnings of the schema and now we can start to look at the resolvers and for this we can actually import this quote schema here because mongoose gives us some nice methods such as finding or finding by id and stuff like that that we can just use and we don't have to create those so we can just go ahead and get that and we'll get that model from requiring and we can go back to the models and we can get that quote model that we created and what we can do here is we can just use this module dot export syntax here and this is where we can actually this is sort of equivalent to the controllers um or so we and they're called resolvers so the schema defines the shape of the s um the graphql query and in particular we have a root query and the query is just forgetting so we have this quotes here this is um this is related to the function that we need to create of that type so we can create these quotes here and this is going to be an asynchronous function because we're going to need to use the await keyword and we can define it in the following way and what we can do to handle this is we can say okay we can create a constant variable here and we'll call it quotes and we can await and we can on the um quote we can actually use this fine method and if we don't pass anything in from mongoose this will actually refine everything from the quote um well this quote schema so the whole table so one thing to note here is we're expecting the shape of our schema to be like this so each row or entry will have an id of underscore id and we'll have a quote and an author and we're expecting an array of these to be returned to us from this fine method so to handle that and when we get that data back in to the client we need the um type of it to be lined up correctly so in you know there's no id type um in javascript there's strings and stuff like that so we have to actually make that conversion so we can pretty much just return that object that we have there so we can return everything here um but for our quotes so we just need to map through all the quotes that we have and for each quote we just need to go through them so i'll just have um q here for short and what we actually need to return for each of those is and we can use um some destructuring oh sorry the spread operator here in combination and for each document we can actually get the entire document so for each quote or each row in our table we can get all the properties on that with this q dot underscore doc so we're going to get for one iteration we're going to get one id some sort of quote some sort of author but we're mapping through all of those so we're going through each quote from the quotes array because we found a multiple potentially but we need the type to be consistent with what we're going to be using it with so in particular the id to get out of that id type we actually need to overwrite the id property so this gets the id the quote and author and this won't append another id this sees that it's the same key here as this so we'll take that and we'll override it and we pretty much want the same thing here so we want the id for that particular quote but we just want to make it a string just to ensure that the types are all right so okay so with that we can just go ahead and save that and what we can start to do now is we can actually open up a new um terminal and with angular i might just create a new project i'm just going to call this ng new i'm just going to call it front end because i've got a back end folder here so it seems appropriate and it's going to be very simple so i'm just going to say no and we don't even really need css or sas or anything like that so this will go ahead and install for us here and we'll just wait for that to load so while that's loading in the back end what i can do here is i can actually create well i can link to those schemas and resolvers so in our app we can link to those so just here just below this graphql http import we can have a graphql schema and that's going to be by requiring that schema we just created so from the graphql folder there's the schema and similarly we can get the resolver and if we just backspace that we can get some intelligence for the resolver or we call it resolvers fpl resolver so our schema we can do this to do here we can use the graphql schema comma and here we can use the graphql resolver so if we take a look at our basic setup here we have express we have mongoose we have body parser and we have graphql http we connect to mongoose we connect to the um you know the particular database and that we're interested in and we can bypass any cause issues with this cause method here and for our express application we can pass any adjacent body data and in in particular we have this schema and resolvers and we also have this schema here defined for us by mongoose which defines the type of our database or our particular table in the database for the quotes table and with that quotes table we're going to interact with that quotes table and we're going to interact with it on the front end so we're setting up a graphql api on the backend so we can interact with it on the front end so we need a layer there to interact with that graphql and this is where we set up the types for our queries and mutations so right now we just got a one query here and that's just to get the quote data and that's just going to be an array of quotes so potentially multiple quote authors and ids and that's handled for us in our asynchronous function here this quotes function so let's see how we can actually sort of interact with that and it should be noted that they actually so right now there's not going to be anything in our database but if we did a npm start here oh sorry i need to go to the first terminal if i do an npm start here okay we got an error and for some reason i've typed this word graphql here so let's save that and okay so we're connected to port 3000 which means this is run but if you go to slash graphql it actually brings up this um sort of gui for us to do some of these so there's not going to be any um anything in here at the moment but if we do this sort of query here for so for the quotes on the quotes get the id quite an author we can execute that and we're not really expecting anything back but we do have this shape here where we have you know the data is an array of quotes and the quotes contains an array of quotes so what we're going to build towards is you know creating some quotes here so a second thing we might like to create is the ability to create a quote so i'll do that before i get into the front end because we need some information there so we need to create that information so what we can do is we can go back to our schema and so recall that getting is just a query but to add on to that we need to have a different type so you know we need this mutation in our schema and we once again follow that similar format and we can have a root mutation so if i create this type here [Music] root mutation this is where i can sort of define our functions that are going to handle the creation process or also the update and delete process so we can have this create quote resolver here and this will take in a quote input and the quote input so imagine we're on the front end now we're just going to type in the quote and the author we're not going to type in the id of course so we'll actually create this quote input data type as well and this is going to return a quote and you know that's expected so there's another type so just here below the quote data there's actually an input type because we're expecting this to be an input so we can say okay for the quote input data what we can do here is for a particular quote we know this is going to be a string and there's no commas here by the way and for an author this will also be a string so this is our schema for creating a quote so now we need to handle that in our resolvers so we called this create quote resolver so we need to create a function here and just where this one ends here this is where i'm going to create create quote this is going to be an async function now it's going to take something in here now when we have an argument here we take in all of the args so in this case here we're actually taking in an object so because we've defined this quote input type as this quote input type here this quote input type is all of this so it's this object here quote and author so the arguments that we're expecting we can actually use some destructuring here for that quote input and that will allow us to um you know just save a few keystrokes by not having the prefix before it for the hugs so what we can do is we can for a quote we can create a quote by making a constant variable quote and this is where we can actually use our model so we can use this model and we can pass in an object there and you know what we need there is just what we have here the author and the quote so we can have the quote and now we can pass in data from the front end or from the client and we've used this sort of destructuring syntax so we can just say quote input and we can get the quote from there and we can also get the author so we can get the quote input by getting the quote author from the input so that's the shape of it that's the values there we can create that quote and they'll go to the database and if we save it so let's do that let's save it and we've got an asynchronous function here so we can just save the created quote we can go ahead and we can await something and we can await that quote and save so what we're doing is we're we're saving that quote to the database and we need to wait for that to happen before we can continue on and we might return some information to the user so we can return that object there and we can use spread operator here so we get everything from the created quote which is you know the id the author the quote so we can actually just use the mongoose way of doing that with this underscore doc to get all that but once again we need the id to be in the string format so we can say created quote dot underscore id and then we just need to make that two string so with that we're now in a position to actually connect to that and i'll show you that before we get into the front end so if i comment out this query here and i use this query here now this is an aquarium or this is a mutation so we just need a definite mutation here and if we go to docs here we can actually sort of see that we and i would need to refresh but we can actually see that we have the different types here so we can actually build up our queries by you know we can see okay we've got this mutation here let's create quote here it takes in this type here this type is this and we can just use the intellisense with control space to actually create this so i've already done this but if you just type in the word mutation and then you call it create quote and we're expecting the quote input which is an object of quote and i'm just saying new quote and i'm just going to say the authors jonos and you know we can actually just return the quote here as well we can fetch whatever data we like and that's one of the key benefits of graphql so if i go ahead and execute that i actually do indeed get this new quote return to us and if i refresh in mongodb compass we can see that this crud database has been created and within this we have quotes and within this we got our unique object id we got the quote and we got the author so that's awesome so what we want to do is we want to connect this to our front end and to do that we need to go into our front end so okay so let's just cd there so we're over here so a cd over here let's do a quick ls make sure we're here so okay i might just collapse this now and open the front end and we will just open this package.json file from the front end because i'll close the back end one what we're going to need to do is we're going to need to install something so what we need to install is oh well it's actually sort of embedded into the angular now so we can actually just do ng add and apollo apollo slash angular and this will be how we can sort of interface with our graphql api from the client so we use apollo here and this just might take a second to load but what it's going to do for us is it's going to in this source folder here in our app yeah it's actually created this graphql module and it's added it to the app module so we can take a look at that so let's just take a look at this it has a few things here it's the module and it's getting the apollo module and the apollo options and then we're going to be doing you know http requests so it's got some stuff there and in memory cache so what we need to do is we need to add in the uri here and the uri that's just simply the our port here so we're using all localhost in our port graphql so if we come back here we can type in localhost 3000 graphql so we're now able to connect to our graphql server that we just created in node and then you know there's some functionality here to create the apollo client link server in memory cache and you know some providers here in the module um but this all comes it's built in so that's all good now i'm going to do everything in the app component so feel free to sort of restructure this into different modules and components and services and all this but this is really just to demonstrate how to connect graphql from a node 8 um node graphql api to the angular and how to consume it for a better sort of structure on the front end i do have this login mvc styled project that i've built and that's with node angular and mysql and that actually has proper structure and everything like that so i'm just gonna you know do everything in here so i'm gonna have the app component and i'm mainly gonna be working with the html and the typescript files here so i'm just going to keep this nice and basic what i want to do is i want to have the ability to create a quote so i'll just have a header here or h2 here and we want two inputs here of type text and i'm just going to give this like a template variable so we can get access to that value and then we also want to get some author information here and once again you could use rapid forms or have more sophisticated ways of doing this but i just want to show off the and highlight the graphql so i'm just going to use this template variables here and i can make a button and you know this can have a quick event and if we click the button we can call a create function and now that i have access to the input elements i can get the values from those and i can get the author as well and i might just put some submit text in here and underneath this this is where we can have our quotes so i'll just have a page one here and what i'll do is i'll just cycle through all of our quotes and then i'll list them out so i'll have a ul here i'll have an ally there's going to be a for loop here um but i'm going to need to set up some typescript in order to be able to handle this so and at the end of the ally so there's going to be some sort of text here and i'll have another button oops i'll have a button here and this will also have a click event and this will just be a delete and at the moment it won't take anything in here um but i'll need to create that actually i might even comment that out just for now um and just have it like this just so i don't have to make the method just yet so i'll still need to create that on the server but what we can do in our app component.ts is okay we can get on a net here so we can implement on a net on the class which means we'll need a ng on init so ng on a new method and i'm also going to i'm also going to need a constructor because i need to inject a service here so just preempt that now what we can import here is from the apollo angular import that we've set up we can get polo and this is coming from the apollo dash angular location and we're also going to need something called a graphql tag and this allows us to write our query so we can just say graphql from graphql-tag and we're going to be dealing with observables so i'm just going to import an observable here from rxjs of course and i might just shift all down that line because i'm going to get map from rxjs operators and i can actually start to get quotes so we have one quote in our database so let's start to get the quotes and we can actually write this query here and i'm just doing everything on this app component page so you can structure it in a better way um but i will create this with uppercase as that's the convention here and then i can use that graphql sort of tag and i can use these back ticks here and this is where we can sort of write our query and this is going to be very similar to how we have it written here so you know we got our three mutations for create update delete but we just want to get something so we can use this sort of style here but this is going to be slightly different but it's based on the same sort of thing there so what we can do is we can go into our quotes and we're nested in there where we have the ability to have our quotes and we can get back our id our quote and our author so this is the query now to execute the query we need to get something in here and i mentioned it before we need to inject apollo so what we can do is we can also create a variable here and we call it quotes and it's going to be an observable because and there's going to be any here and because we're going to make a api request to our graphql server and we because it's a synchronous we need to um expect it to be of the type observable before it you know gets into the database gets it retrieves it for us and gives it back to us so that's quotes and when this app component is created this is where i'll set this quote so this quote this is going to be equal and this is where we can use the injected service here so apollo and what we can do here is we can actually just say watch query because there's a particular query that we're looking for here and that query is the one we just defined here so all uppercase get quotes and whenever there's any value changes on that we can actually just go ahead and we can pipe this observable and we can actually map it and we can take the result which can be of any type and we can sort of what we'll do we'll console log it just so we can see it so result and there's data in the result and there's quotes and recall that it's nested twice here so we need to go into it like this and this is exactly what we're going to return so we can return this and if we do that we have we can now go back into our html and we can cycle through that with the async pipe so we can just say ng4 and we can say let quote of quotes so quotes is that variable we just defined here we're expecting observable and we use this apollo service here so we can make the asynchronous request from this query here and because you know we're expecting the value can change and if it changes we can sort of watch for that and we can map the result back to us so that's why we need this async pipe on those quotes and that should be a pipe so now we have access to each quote we can actually just go ahead and we can just you know if we want here we can just say for that quote we can display the quote and we can even put it in quotes and we can also have the quote author as well so whoever wrote that quote so why don't i just go ahead and save that and i'll do an npm start here load up angular get iv compiling so this is the first time so i might just take a second here and there is a minor error and that's just because we haven't created this create function so just below this ng on init we can have this create function here and this create function it's going to take a quote and it's coming from the input field so it's definitely going to be a string and likewise the author's going to be a string and we want it to be a string anyway so that's all good and what we can do here is we can just console log um you know quote author save that now if we go back to our client and we open up localhost 4200 and we open google's developer tools here now you see that loaded there just have to take a second add a load this quote here is coming from our mongoose database our database using mongoose and what i want to do now that i've been able to fetch the quote right now we're just logging this to the console here but the idea is to get this get this and sort of append it to the list and update it in real time so there's actually a nice way we can do that in um in our database uh you know on the client here and we've already created on the back end the ability to create the post and we've seen that in our graphql here with this mutation here so i might just go ahead and comment over there but we can use that to create something here so okay so i might create another query so just up here at the top here i'm going to have this create quote query and i can use graphql and my query you know we do this nested object thing here oh no we need to first define that we're dealing with a mutation so this is different to a query so we need a mutation and i'm just going to call this create quote the same name as what the actual method is now one thing that we need to do here is we need to get the values and they're going to be a variable they're coming from the client and to specify variables we can just use this dollar sign here so there's going to be a dollar sign here for quote and this is of the type string and this is the string from defining graphql so capital s exclamation mark we need it and we need the author as well so we can have a dollar sign author here for the string now we have this sort of outer layer we can pass in the variables for that create quote mutation that we're after here and recall that in our schema we have this mutation where it's the quote input which is of an object quote an author so if we head back over here for our quote input we can actually just get that object's data in there like that so for the quote and this is where we can pass in our variable here for quote just like that and we do the same thing for author by getting that variable for author and what we can return here is whatever we like that's the good thing we can fetch what we like but we can let's just get everything may as well just get everything here and this is sort of what's really good about graphql is when you're not sure what the client is going to be doing or there's going to be lots of changes as long as we supply that data we can sort of show different data in different situations we might have a component that only shows the quote and then another one where we want to quote north and we can fetch that however we like but with that create quote mutation we can actually sort of extend the create function that we have here and what i can do is rather than log this i can just say this dot apollo use that service because on that service there's a mutate method and that mutate method takes in an object and the particular mutation we're after is that create quote mutation now we need to pass in some variables here and the variables we need to pass in well we're inside this create function here so we have access to this quote and the author so we can you know for the quote we can just use that quote input and for the author we can use the author input of course now what is going to happen is if we imagine our page loads up and we have this quote here but then we add something we want it to appear to the list so rather than reload the page we can actually have this other parameter here in our mutation in our mutate method and this is just simply for refresh refetch queries and this just takes you know whatever queries we want to refetch so we can list it out in an array and this array has this object here query and this will we want to refetch the queries get quotes so we want to get the quotes again and because we have this constantly watched query where the value changes are being piped asynchronous into the html that means it's going to re-fetch that so when the data something's created um it's going to update that for us there and then we can just have a comma there like that now of course like all of these we're going to have to subscribe to this so we can just go ahead and subscribe to this observable here and this isn't really necessarily but i'm just going to log this to the console just so i can confirm that something's been created here so with that now if i have a quote here and let's just say latest quote and this is going to be from mike submit that through we get this created here we also get the uh the refetching of that it shows up in our html here on the client in real time and if we refresh our database for our schema for quotes we get you know we get another unique id here and we get the corresponding information so quote an author so this is sort of the beginnings of the graphql i might just also make a update on the server and delete so we can just finish this off but we've essentially made it to a nice milestone we've done the both the query and the mutation so this can be refactored however we like but that's the core functionality out of the way so let's just finish off this example here we can go back to our schema and we can make another mutation here we can say update quote and always we well we need an id for this and this is going to have the id type in addition to the quote input so when we create we don't need id but when we update it we do need the id so we can get that quote input and that's going to be of the same type so we don't have to recreate that quote input data and that of course is going to return a quote or i can return whatever we like but we want to make it return a quote the updated quote of course so if i go to our resolvers what we can do well we can save this first but we can create this update quote so i'll do that and once again that's going to be an ace and cronius function here and it's going to take some destructured arguments so i can just get the id itself and the quote input and we can just um have this new quote first we need to find the quote to see if it's if the id can be found for that so we can just say the id we're looking for the quote we're looking for we can just await and on the quote we can use this mongoose method here find by id and we can just pass in that id there and we can have this if check so if there's no quote what we can do is we can just throw an error and we can just say no however it's expected you know that it will work because we're setting it up to work so we can actually on that particular row we found so let's say we get this one here for this entry here we you know we passed in this id and then we want the value of the quote and the author and we want to set it to the new input data of the new input and quote so on that quote that we got which contains all everything there we want to set the quote and we want to set that equal to whatever we typed in to the input field and we got that so we can get that from quote input in the same way that we did it on the create input and i'll just shift alt down this so i can change the word quote here to author author because you know author both could have changed in this you know made up situation here so what we want to do is actually we want to save that so we got the new input for the quote and the new author and that's done by finding the id and changing those values we just need to save that so we can save the updated quote and because we've got an asynchronous function we're going to wait for that database operation to happen so we can save that and after that's done we can return to the users and this is where we can use the structuring of the spread operator to get everything from the updated quote and we can do that by using underscore dock but then once again we need to convert the id type to a string so that's the update and i might as well just do the delete as well um but i'll i'll just check that i'll check it so if i just undo this comment in here now i have this particular id here so i'll just cancel that now i got latest quote and author is mike now if i um type in this id here and i can say i might just put this quote to twerty and the author is harry now if i execute this and it's just showing up here um hold on let me refresh this then execute created quote is not defined okay or created um okay i think i might have forgot to rename something here and i can close this now and this as well yes so this created quote i just copied before should be update quote or updated quote um okay so let me just refresh that once again and if i do a ctrl enter here yes now we get back our quote look in the database refresh it and we get the quote for that corresponding id and the author changed to qwerty and harry respectively great now there's only one more operation to define in our schema here and that's the delete operation and we don't need any input data to delete it so all we need here is the id of the type id and this will be of the quote type so i can save that now if i go to my resolvers here i can make a delete quote function or delete quote resolver and i'll just get some of these brackets gone it's gonna be an asynchronous function it's going to be called delete quote and what we'll do is we'll delete the quote but we just need to check that the id exists so we'll just try find a quote first and we can await quote and mongoose gives us fine by id and we can just get that id and we can just check if there's no quote i can just have that same error there now there's another method and we don't need to assign it to a variable because we don't need to do anything with it but we can just say find by id and remove for the id because we know it exists and we want to remove it and we can just return something here and what we'll do is we'll just do a similar thing as before we can just return the dock or the document that we're deleting just in case we need anything there on the front end and you know once again we can just say the id needs to be a string type so let's just convert that like that and of course have a comma here and that should finish up our graphql api here so all we need to do is just go into our front end and add the ability to delete something so let's just add this ability here like that so we've got this delete function here now for the quote um you know there's an id associated with that so we can just access that with the underscore id on that particular quote and i'll put the word delete in here and if we go to our app component typescript file this is where we can create our functionality here so i'll just create this delete constant so delete quote we can use the graphql tag and we can it's going to be a mutation it's going to be mutation we'll call it delete quote it's going to take in a variable for the id of the type id with graphql we have this delete quote mutation that we need to pass that variable into which takes the id and then we can pass that variable into it and once again we can get back our id quote and author so alls we really need to do now is just create the delete method and then we're done and you could imagine that we can just create it by having an id and in javascript it's going to be or typescript it's going to be a string type because it's been converted now if you want you could just console log the id as well but what i really want to do is i want to use the apollo client service and use the mutate method which takes an object and it's going to look similar to this here so i might just copy this in here but of course this is going to be delete quotes in uppercase characters now we can also refetch the queries if we delete something from it we don't want it to still show or linger around when it's actually deleted um and the variables we only have one variable here that we're passing in and that's the id so that id you know you have the id because you've got the id from all the quotes when you fetch them that corresponding id when you click on it is passed into this delete method this delete method takes that id and then it puts it into this delete quote graphql tag query and because it has a variable it has this variable syntax it takes the id as a variable and that's this variable here and that's how we pass it in just with these variables here so alls we need to do is we can just say you can just copy this subscribe here subscribe to that event and we can just say console.log deleted just to have confirmation that it's been executed so what we can do so let's check everything works go to our front end we refresh we can create a quote i am great why john submit that it loads here let's say i want to delete this quote new quote i can delete that okay we do have an error here so let's just fix that all right so i copied the shape up above but i don't think i need this so let's just check that i'll save that and we did get the right id here let's just reload this and we can see if it works so i can delete this okay it doesn't work now i did call this delete instead of delete quote so let's just get that going so delete quote and okay so that's now named correctly so this should work it's connecting to the database it connects i can delete this it deletes it shows us it it updates in real time and i can also submit something here and if we check our database we refresh it we see that we get the new and updated entries so thanks so much for watching this mean stack graphql api i hope it helped and please subscribe to my youtube channel for more videos related to javascript full stack javascript and web development in general okay cheers

Channel: Jon Peppinck

Views: 5,358

Keywords: graphql, MEAN, MEAN stack, MEAN graphql, GraphQL MEAN, GraphQL Angular, GraphQL Node, GraphQL Apollo, Apollo GraphQL, GraphQL API, GraphQL Angular Node, Mongo, MongoDB, MongoDB Compass, Mongo Compass, express-graphql, cors, server, graphiql, angular node, angular node express, angular node express mongo, query

Id: zCMNvnlDoVg

Length: 75min 45sec (4545 seconds)

Published: Mon Jul 20 2020