MERN Stack Tutorial for Beginners | Build a MERN App From Scratch | Full Stack Training | Edureka


hey everyone on behalf of Edureka I’m
gonna be bringing you a full stack application tutorial now many of you may
be familiar with what’s called the mean stack which is MongoDB angularjs Express
and nodejs we’re gonna be doing a couple twists on this very popular stack and
introducing graph QL which is a technology from Facebook that makes it
easy to query fields and send data between the server and client and we’re
also going to be replacing angular with react and this is called the MERN Stack
so what exactly is the merge stack well it’s the same thing as the mean stack
but replacing angular with react so here is what it looks like we’re
going to be using reactjs on the front end for the web application and the
middle is gonna sit our server which is gonna take requests from their web app
and this is going to be running nodejs with express and then we’re also going
to communicate between the web app and the server using graph QL and then in
the very back is our database we’re gonna store all the data and we’re gonna
be using MongoDB for this you guys may be wondering why might you want to use
this react yes over something like angular or just JavaScript itself well
this is a very popular framework right now it is currently what Facebook uses
on their very own website and it’s very nice to build applications with it has
somewhat of a steeper learning curve I would say than some of the other
frameworks but once you learn it you can be very productive and build very high
quality production ready web applications which is very cool and then
graphic you ELLs can help us optimize and send really good queries that’s
another thing that is used by Facebook and it’s a facebook technology and then
MongoDB is just really solid database for no sequel so that means it’s very
easy to store different types of data and as our database changes and our
application changes it’s very easy to change our schema or what our data looks
like in the database and then Express is very nice to make a server with very
fast so that’s our choice here so there’s really four main operations when
building an application like this and they’re known as crud
so what crud stands for is create read update and delete so we’re gonna be
using MongoDB and mongoose mongoose is a library to basically do operations on
the MongoDB database and nodejs and to create we’re going to basically add
something to our database and we’re gonna be using the save command then
there’s reading which is viewing objects or viewing data from our database which
is a fine command and then update which is change
some values in the database using update again and then finally delete removing
data from our database and this is going to be remove so the application that
we’re going to be building to try the stack out the myrn stack is a to-do list
app so without further ado let’s go ahead and get started so there are a few
prerequisites for this tutorial first off make sure you have a editor of some
sort I’m gonna be using Visual Studio code where I can edit files and then you
want to make sure you have a terminal I’m gonna be using the terminal built
into Visual Studio code and we’re just going to be doing some things with that
so make sure you have both of those and then we’re gonna be using MongoDB so
you’re gonna want to install that and the recommended way to install MongoDB
I’m using a Mac I would recommend something called Homer homebrew is a
package manager makes it really fast really nice to install dependencies if
you just copy this URL right here you can paste that into terminal and run it
I already have it so I’m not gonna do that right now but then you have
homebrew and then with homebrew I can and Peru install MongoDB and that’ll
just install MongoDB on my computer and then to verify that you have MongoDB you
can just type the Mongo and you can see here’s the version of my Mongo shell and
then you can achieve whether you connect it to it so the other thing is to make
sure you do start your Mongo database so I already have mine started so I was
able to connect to this fuse brew you can just do brew services and then
instead of restart we’re gonna start the brew services start MongoDB if you
installed this with homebrew the other thing we’re gonna need is no js’ so
again once you have homebrew you can do brew install node so you can see it’s
really nice to just install things with homebrew it makes it super easy and if
you type no – be in terminal you should see a value and here’s the version I’m
currently on node 9.11 and then with that you should get M p.m.
which is node package manager I’m using 5.8 so you just want to verify both of
those got installed now if you’re not running on a Mac you can’t use homebrew
I just recommend going to the official websites for
go DB and nodejs and downloading them that way all right so we’re ready to get
started we’re gonna be starting from a blank directory so I have just an empty
folder right here called server I do an LS there’s nothing in there right now
and I’m gonna start off the project with NPM on it and I’m just gonna do – why
this accepts all the defaults and just creates a package.json file so we have
one file now in our project and this is gonna hold basically where our
configuration stuff for the project so what dependencies we need mainly so
we’re gonna start off by adding a dependency called graph QL yoga this is
a really nice graph QL server that makes it super easy we’re going to install it
so we’re gonna copy this I’m just gonna say NPM install graph to Lu and you want
to make sure and run this command inside the server directory and it’s going to
go ahead and install this for us now here is a little QuickStart that we’re
going to use and we’re gonna copy the QuickStart and paste it into a file I’m
gonna create a new file called index dot JSON paste in here so let’s go through
exactly what all this stuff is doing first line is importing the package
we’re gonna use the require syntax because we’re just gonna use node so
here we are importing graphical yoga which is that library here is what’s
known as the schema so we’re using graph QL so with graph QL you have to set up a
schema and our schema right now has this thing called a query type and inside of
query type we have hello and hello takes one argument it kind of looks like a
function this argument is named name is the name of the argument and then string
is the datatype for it and then this is the return type which is a string as
well the exclamation mark at the end means this is a string that is mandatory
you have to pass it in and then here are what known as the resolvers for this
so the resolvers you’ll notice the kind of the shape of it matches so query and
then hello query then hello and here there’s argument called name so you can
see we’re destructuring this second parameter which is called just the argue
it’s and we getting the name and here we’re returning a string and we’re using
a string template here so we’re saying hello and then if they give us a name we
say hello that person’s name or we do just hello world if they didn’t give us
a name right and then here we’re specifying the type deaths and the river
solvers and we’re gonna do server dot start to start this server now we’re
gonna get more into what the type deaths and these resolvers are but I want to go
ahead and just run this on so you can see what happens so I’m going to say
node and then index J s to start it up and now we have a graph QL server
running on localhost 4000 and we’re not using Express directly but under the
hood graph QL yoga uses Express so alright let’s go to localhost 4000 and
see what’s going on there so we’ll get this thing that says loading graph QL
playground I’ve been here before so I have some junk just gonna clear that off
and so if I click on schema I can see on the right what things I can run or what
things I can do here this is a graph QL playground and what this is is you can
run your queries and queries are read so we talked about card operations before
queries are for reading things or finding or viewing the data you have
stored so last we want to query this hello thing so how would we do that
well we would do curly braces like that and then we say hello and I can either
pass an argument or I don’t have to pass an argument so we can pretty Phi this so
if I don’t pass an argument and I hit run I get data hello and then hello
world so by default the argument would be null or undefined two getting passed
in and then we saw that that would go to world but here I can specify an argument
if I want to and I could say then so hello Ben let me run that and we can see
it changes so you can notice this argument we can change and we get
different results out of it I can just a random string if I want and I get that
back so with graph QL we can pass different things in and get different
results back kind of like a function call and we’re just getting a string
back and you’ll notice the shape is very similar to the shape over here which is
nice that’s how graph QL works so we have this outer data and then after that
it matches so hello is the name of the query so that’s why those two match up
and then here’s the string that that equals and we’re gonna get more
complicated as we had to do and whatnot all right so this is the basics of how
the graph QL is working there’s those other things which are called mutations
so there’s two main things in graph QL queries and mutations queries are for
looking at the data which I already said and that’s what we ran right here we
could prefix this with the word query to be more explicit those are doing the
same things the other thing is called mutations these are when we add data we
update data or we delete data we’re gonna be running mutations and
we’ll get into those very shortly when we add art Mongo DB connection so our
servers good we’re going to move on to connecting to Mongo DB and to do this
we’re gonna be using something called Mongoose so first off we need to install
this so I’m gonna come over here to terminal stop my server do NPM install
Mongoose so Mongoose is gonna allow us to connect to our MongoDB database and
then run queries create data or whatnot and we’re just going to follow the
getting started so here is how we make a connection so I’m just gonna add this at
the very top and I’m gonna changes the cost so I am first grabbing this from
the package or importing it so here I have the Mongoose object and I’m first
connecting to the database so on that localhost and I’m going to connect to
the test and I’m just going to call this test five because I don’t know if I
already have a test database or not I’d like to connect to a fresh database so
this is the name of your database at the very end here and then after that we
want to do is first connect to the database and then start the server so it
doesn’t immediately connect when this it actually runs in the background
and we can use a callback so DB dot once and wait for it to open or a get
connected now we are they to get this DB variable they did Mongoose connection
and then inside of that they’re gonna pass the server dot start so once we
connect to the MongoDB database we then start our graph QL server all right so
next thing we want to do is create a schema which is then going to be our
basically our database model or what we’re in a store in the database so
we’re gonna grab this mongoose model and we’re gonna change it up a little bit so
they are doing a kitten for us we are going to do a to do so the model is
going to be to do and we’re gonna have a few things so the first is text and here
we spat we put on a pass the datatype so the text is going to be a string so we
say string and then we want to have a complete just going to be not a string
but a boolean okay so we have two fields text and complete on this to do object
so we can save this in our database if we want to and we can pass two fields in
the text and whether the to do is complete or not so I’m first going to
add a type called mutation and I’m gonna say create to do and I’m gonna have two
arguments I want to get passed in the text and that’s actually it by default I
want to say complete is false because when you first created to do it is not
complete so text here is going to be a string and I’m gonna say you have to
pass in a parameter and to force them to pass in an argument you do the dabangg
sign there and what we’re going to do is return a to do instead of just like a
string or a boolean we’re gonna return a type called to do so I can create this
type to do and it’s gonna have text which is
a string which is required and complete which is a boolean which are required so
two required fields text and complete and in our mutation we’re gonna create a
to do and assuming you gave us a good text will pass you back to do the other
field this is gonna have and this is a field at Mongo adds by default which is
an ID and there’s a special type for this in graphic ul called ID so let’s
require it as well so we don’t have to pass the ID here it’s gonna be
automatically generated for us so now we can try creating this to do so I’m gonna
say mutation and create to do and we don’t care about the first argument to
this graph QL function so these are called resolver functions right here the
first thing they’re passed through the parent which you don’t have to worry
about for this the second argument is the argument so for this we expect an
argument called text so I’m going to say text here and from this what we’re going
to do and I’m gonna make this an async function we’re going to first create a
to do so I’m gonna say cost to do this equal to new to do and here I pass in
the text and complete so pass in text and complete and by default I’m going to
say complete is false that the to do is not complete and then we’re gonna return
it to do but before we return it we have to save it to the database with dot save
and dot save returns a promise so we want to await that and we await
this to do from being saved into the database so we’re creating an instance
of it saving it to the database and then returning it so I can start my server
and we can see if this code works and if it does what we should do is be able to
create a to-do in our database so we’re gonna say node and next is
alright so it started up so it looks like it was able to connect to the
MongoDB and since okay and bring the playground over here and I’m gonna say
mutation so for queries we could say the word query there or leave it off for
mutations we have to say the word mutation here and then I’m going to say
create and we can see it in our schema over here whether it’s there or not and
it’s not that usually just means you have to refresh whenever we restart the
server so now under mutations we can see the crate to do and this is kind of like
our own documentation that was automatically generated for us so that’s
really cool and a nice feature of graph QL so great to do we now have text so
create to-do text and I’m gonna say my first item now you can see it’s kind of
mad at us but this is the exact same thing that we did with the hello right
well it expects a little bit different return type to do which is an object so
we have to actually specify which fields that we want back so there’s text
there’s ID and there’s complete right so if I specify all three here I’m gonna
get all three fields back so when I run this we can see hey look our item was
created we can see an ID and it’s false I can run this again you’ll notice we
should get a different ID there looks like the bees incrementing at the end
and here you’ll see what the power of graph QL is if I only want a single
field back so maybe I only care about the ID I only have to select the ID here
and I’ll only get the ID back here so I only get one field back or maybe I only
care about the name or not the name text so you don’t get extra fields back which
is really nice graph kill you just get exactly the data that you want but all
right cool we just added a bunch of to-do items to our database let’s go
ahead and fetch them or read them or query them so to do this we’re gonna add
a query we first update the schema and then you add the implementation of how
the data is getting fish so here I want to get all the taboos so I’m gonna call
it – dues it just returns an array of to dues now
to return an array you do brackets like that so to do so this means we return an
array of to do of the type to do so then and my query over here I’m gonna say to
deuce and I don’t really care about any arguments because I’m just returning all
of them I’m just gonna say to do dot find and this will find all the seduce
and it’ll return them and then we can see them all so that’s all we need to do
so I’m gonna ctrl C restart the server and now we can head back over to our
application and refresh we should now have a new query and we can see right
here called to Do’s and we should be able to see all the different – dues
that we created earlier some estate – dues and I don’t need to pass it any
arguments but I do need to select which attributes that I want to get back so
the ID text and then complete so if I run this I can see all the different
items that we created earlier I give them all the same name notice that’s why
it looks like this if we want to we could create a new one so mutation
create to do and I could give it a different text like item two for example
and maybe I only want to see the ID back and now if I clear that again you can
see at the very bottom our new item item two so perfect and again we don’t have
to query all the fields for example I could just do ID in text and then
complete would be removed from all these items just like that alright so that’s
perfect we now have two of the crud operations done creating to-do items
reading to-do items with this query right here the next thing we want to do
is updating an item so the way we’re going to do that is we’re going to
create a new mutation called update to do
this will have two arguments the ID and this is what we’ll use to know what to
do to update and then also complete and this is going to be a boolean we could
also specify the text but we don’t really need to update the text at least
in this application just weather this to do has been complete or not and then
we’re gonna return a boolean and this is going to be true or false whether we
were able to update me to do so now we’re going to add the implementation
for this update to do and async and this is going to have those two arguments ID
and complete and here we’re gonna do to do dot find by ID and update and here
we’re going to specify the ID as the first argument and the second we specify
what changed so the thing that changed is complete and we’re going to pass that
in and this is the new value for what complete is and this returns back I
believe I guess a document query is looks like what it comes back I was
thinking this might be a promise as well that we might have to await it we’ll see
if this works I think it should and then lastly if that works we just return true
so if this doesn’t work we’ll get an error or something and that’ll be thrown
back and that’s fine so let’s go back over and see this in action and I need
to make sure to restart the server so anytime throughout this if you don’t see
something we’re looking right when you head over here just remember to refresh
and also restart your server so we see our mutations now an update to do get to
see the two arguments right here and we expect boolean back so why don’t we
change this one right here so I’m going to copy that ID and I’m gonna say
mutation and I’m gonna say update to do ID is going to be that string that I
copied and complete there’s going to be true and we can run that and we get true
back meaning it worked and
I can query all the to dues so we can go back and I can grab it and we need to
grab complete and this first value is now true so perfect so update works so
now we can update any item in our database based on the ID that we are
given the last thing we want to do is delete it so pretty much the same way we
did update to do we’re gonna do a remove to do and here we don’t need to know
whether it needs to be complete or not so we can just remove that part and have
only one argument which ID that we need to remove I’m and then boolean true or
false whether the operation was successful so we can copy this I’m going
to do remove to do being it rid of that argument and then here we’re gonna say
find by ID but now it’s going to be removed and now we don’t need this
second argument we just need to pass in the ID so I’m gonna restart the server
and we’re going to try this one last time it’s the last operation that we
need and let’s say I want to delete this item right here that is so we see I
remove to do there perfect and the other thing is you can create
tabs so I’m going to go ahead and pop tab open here that way we can do this in
a separate tab it and not have to redo this so remove to do ID pass the ID and
we get true which means it should be gone
so now when I rerun this query here we should not see this first one right
there and sure enough it is gone so delete
also works so that’s perfect we have all our credence that we want to do and
we’re done with our server now really what we want to do is create a client or
a web app using react that allows us to do these so we can view our to Do’s we
can click on it to cross it off we can add to Do’s
or we can just straight-up delete them if we’re no longer need them so let’s
get into doing that so I’m gonna keep this server running and open up a new
tab and what I’m going to do is I’m gonna go to a different folder
and I want to create a folder for my react application now we’re going to be
using something called create react app so this is a CLI tool and you can
download it using NPM so NPM install – JEE create react app if you go ahead and
run that that’ll download it for you and then what you can do is do create react
app and then the name that you want so I’m gonna call mine client now I’ve
already run this and when you run this you’re gonna get a folder and I can just
do LS right here a folder called client or whatever you named it and it’s gonna
download and this this operation also takes a little bit of time because it’s
gonna download all the dependencies and whatnot
this is a boilerplate for creating react applications that just gets you set up
really nicely so I have it open right here and we can check out what’s going
on here we can look at packaged up JSON we have dependencies react and we can
see we have some couple scripts that we’re going to be using so just right
off the bat if we wanted to I could CD into my folder and run NPM start and
what that will do is they’ll run the scripts start command which runs this
thing right here and what that does is it starts my server and this is a
different server so this is a development server and this is just
gonna be allow you to see your react application as you develop it so here’s
the basically the hello world and we can go in and change it so if you go to
source you should see a PS and you should see some stuff so instead of
welcome to react we could say welcome to graph QL save this and what’s gonna
happen is it’s gonna refresh and we see in our browser welcome to graphic QL
so that’s kind of cool so as we do this it’s gonna just automatically refresh as
we’re typing so already start adding some stuff to our application now I
guess I should go over the structure real quick so the important parts are
the source this is where all our JavaScript code is going and we’re all
the react there’s a folder called public which you can see has HTML in it and
this HTML file is what our job script a react application runs in or it
gets run plied to if you will so here we can see this div root this is where our
entire react application is going to be put so in index such is when I say react
Dom render app our application is being rendered in the element which is root
which we just saw and if we look at what app dot J s is we can see this is what’s
getting rendered so when I changed welcome to graft well that’s why we saw
it change over there and you can see this is just kind of similar to HTML
this is called JSX this allows you to mix pretty much JavaScript with HTML and
we’ll see more of this when we actually do some more coding with this but we can
go ahead and delete some of these extra files because we don’t need them first
off app dot test we don’t need we don’t need app dot CSS we don’t need index dot
CSS and we don’t need the logo to SVG those are just some extra files we don’t
need we can clear out all this code right here and simplify it a little bit
we can just say div hello and get rid of these things at the top things at the
top are just import statements using a fancier JavaScript syntax and we just
need to import react and index ah yes we can just remove the index less CSS so if
we come back over here it should now be blank just hello and we can start adding
our code so what we want to do is to run the same queries and whatnot that we ran
in graph QL playground so for example I would like to render these two dews in
my react application and to do that I want to run this query and to run graph
QL queries from react and to server we’re gonna be using something called
Apollo so Apollo graph QL allows us to do this it’s very easy to
get started we’re gonna be downloading a few things here to help us out so Apollo
boost which is a library they created react Apollo graph QL tag and graph QL
here’s some little descriptions about what each one does but basically graph
QL and graphical tag are for parsing the query so basically what we write here
parses this into an object that basically they can understand
and then react Paolo is the bindings to react gives you some react components
and we’ll see that and then Apollo boost is for actually just setting up and
making the queries so we’re gonna copy this NPM statement and I’m gonna control
see the server that started and add this in and the first thing that we need to
do is create what’s called a Apollo client so I’m gonna copy this and we’re
gonna add that to our index actually get an add to our yeah index fjs is fine
we’ve give to add it to either place but the reason why I want to do it here is
because we also need to get a Apollo provider from react Apollo and pass in
our client so Paolo provider and this is just gonna wrap our whole application
and we need to pass in our client so our client is this thing right here that we
create and basically the only thing we’re specifying here is the URL to our
server so our server is not running at this location it’s running at HTTP slash
local post 4000 so it knows where to make requests so it’s now going to send
graph QL requests all to the server which is perfect that’s where server is
running and we need to be able to access this client throughout our whole react
application and the way we do that is by using react Apollo’s Apollo provider so
this wraps our entire app and now we have access to this client and we can
make requests throughout our app and we’ll see that so let’s make sure adding
that didn’t break anything so I’m gonna do M p.m. start and we should still see
just the word hello and nothing different because this doesn’t actually
do anything yet we didn’t tell it what to query always said was this is where
we want you to make queries I added this client equal new Apollo client before
these import statements you need to make sure that comes afterwards so just like
that and cool so it refreshes and hello is there nice now we can start doing
some stuff so in app Dutchess why don’t we run a query and the query that I want
to run is that same one we have here in our playground so what I usually like to
do is run it here and then just copy it so
Const and we’ll say this to do is query and paste it in so this is just a string
of the query now we added a library to help us parse this called graph QL tag
so we’re gonna import gql from graph QL tag and this is actually gonna parse
this query right here and the way we do that is gql right there now you may be
thinking I might have mistyped this and I meant to do something like this in the
past and the function and that is not the case you actually call it just like
this where gql is right up against it this is a string template calling and it
will pass to this function okay and it will parse this out next thing is we
need to basically bind it with our component and the way we do that is with
higher-order component so import graph QL from react Apollo and this is coming
from the reactive power package so we say graph QL we specify what query we
want or what mutation we want in this case I want the to do is query and we
wrap our app and now inject it into the apps props are some stuff so now when I
say this stop drops I have a few things I have data and loading so loading and
why don’t we actually I’m just going to console dot log so we can take a look at
what actually the values are and if we come over here if you just right-click
and inspect you can see in the console what these are so and let’s do a before
and after so this is export default app so before we actually call this
higher-order component graph QL you’ll notice here the props just an empty
object but now when we add this thing back we have some stuff in our props
that are gonna help us out so first you’ll notice we have dot data and
inside of data there is loading so loading is true and there’s basically
nothing else there’s a bunch of functions we can call but those don’t
look helpful right on those earth for other things which is more complex but
once it’s done loading it’ll say loading false and it should
get some to deuce and we can see this to do this here and we can actually see Wow
look this looks like the data that we had over here right well it’s exactly
that so what we can do in our code now is we can say on data and we can get
loading and to deuce so this is just D structuring it from the props I’m
getting the loading that we saw in the two deuce and I’m saying if it’s loading
just return null and if it’s not what I want to do is just to do is dot map and
for each to do I want to just render it so I’m gonna render a div and I’m just
going to display the to do text and we can come back over here gonna load for a
second and we got to see all our items now we need to add a key and the reason
for this is we need to have every single one be unique and this helps for loading
purposes with react it’ll load faster and have less conflicts in your list so
I’m gonna say pass in the to do die ID to make this unique on a state to do ID
so this is a unique string that identifies each to do and in that air
goes well but we can see our items right here and now if I want to I can change
one of these items so for example I could remove it to do so we have one to
do down here called item two I could remove him and if we refresh it now
fetches it it’s gone so pretty cool so those are connected to the same database
same server all that stuff alright so this is a little teaser a little intro
into Apollo and how we’re going to do our queries but now what I want to do is
add some material UI to make this look pretty and then we’re gonna continue on
with some more mutations and whatnot so we’re gonna be adding this package this
is material UI from Google and it just makes everything look really nice and
it’s a nice utility so we’re gonna install go through the installation so
we need to install the core of it again just gonna control see
and add that and then we need to add some things to our header some links so
to import the Roboto font and that’s when we just go to public index out HTML
and we can put that right here and the reason this material I needs this font
so we’re just importing the font so it has access to it and then the other
thing is we also want to add some SVG icons so I’m going to go ahead and
install that package as well all right and the first thing I want to
do is render some paper and the reason why I want to render some paper this is
a component from material UI is so I can put a list on that paper so we’re gonna
come back over here and the nice thing about materialise they have great demos
so I can actually just take this and grab what I want from it so we’re gonna
import paper so to do that we have to import paper from at mature UI core
paper and then we can actually render this so I’m gonna have an outer div and
I want to Center this guy and the way I’m going to Center this is by creating
two divs and you can actually add styling to these using the style prop
and this is kind of like CSS but it’s all camel cased I’m gonna say display
flex and then the style here I’m gonna say margin Auto I’m also gonna give it a
width of 400 so now I’ve created this basically inner div and I’m gonna render
my paper here and then I’m gonna give it an elevation and let’s give an elevation
of one so let’s see that paper in action that we just added and once we get this
paper the way we like it we’re gonna then turn the list that we
have here and to an actual material I list that looks like this and looks more
like to do items or check items all right so I reran the server and we can
see it’s nicely centered and it’s on some paper perfect let’s go ahead and
now add a list so this is the list that I want to add and we’re going to just
copy this and I’m actually just going to copy this entire example here and we’re
gonna take the bits and pieces that I want from that
so let’s grab that and we’re gonna paste it in I’m just gonna paste it in below
first thing that I want to do is remove some of these things that I don’t care
about so the first 3 imports we don’t need but I do need list all this list
associate things and I do want the icons so I want to copy those and just move
them to the top where my other imports are and then I basically just want to
merge these two I don’t care about this style we’re gonna add our own style so
when we’re he was adding styles here I just want to move their outer div and
I’m gonna replace it with my stuff so this is what we added and I want to just
add the stuff in there I guess the best way is we’re gonna copy these two and
we’re just gonna go through what this code does in just one second I first
want to make sure it renders okay so we’re gonna add these to state is
kind of interesting and this is just another function we’ll talk about state
in a second you don’t care about the props this is our list and we don’t care
about these things either okay so we’re gonna take our list and plop it down
here and they’re going over their mapping and they’re doing this thing
right so that’s exact same thing we did here so we want to just replace that map
with two do’s and instead of value this is going to be to do and here’s our key
I’m just gonna call it to do the ID we could just pass ID or we could do it
like this since our applications not too big I’m just gonna pass in the ID now
anywhere we see a value we’re gonna have to change this stuff I’m not gonna worry
about the class name stuff I’m gonna remove that so handle toggle we’re gonna
pass in our to-do item and then here then pass and
to do I guess this is a separate thing checked I’m gonna say to do dot complete
so if the to do is complete I would like the checkbox to be checked
value I want this to be the line item I think that’s what
they’re rendering we can come back over here yep lion I don’t once this is the
text that’s getting rendered the text that I would like to get rendered is to
do dot text and mirror that alright let’s go ahead and see if this actually
shows up okay and then we’re gonna walk through the code all right so this looks
pretty good and I can see my items and nothing happens when I clicked but we’re
gonna go over how we can get stuff to happen okay so let’s go over the code so
starting at the top we have this thing called state so this is where we store
information about our application that could change so for example they are
keeping something called checked and this changes so depending on what is
checked in the application they are keeping track of here now we don’t
really need state so I’m gonna go ahead and get rid of it because we’re storing
everything and the MongoDB is our state if you will and we’re fetching
everything with graph QL this handle toggle thing this I believe is okay yes
so when we click on a list item for us what we want to do is actually just mark
it off right when I click on this it should be oops we crashed it because
we’re not supposed to click on things but when I click on this we should
complete it and we don’t need any more right it should check off or whatnot so
here I’m gonna just add a to-do basically we’re gonna remove all this
stuff here it’s gonna be update to do and it’s just gonna toggle whether it’s
a complete or not and this is gonna be it to do okay so next bit we can just go
down the code right here so we have a list item I don’t know why they have a
row of undefined this stuff is probably a specific to material UI and how the
styling looks check box disable ripple I guess that’s when you check so these are
some CSS things that you can take on off depending on what you want to look
checked this is a value of whether or not the check boxes are checked
so for example if I say true all the checkboxes are going to be checked here
they were all false because all of them to do dot complete are false but if I
were to say update one of them so let’s say the first one and just remove this
update to do ID complete is true all right so it’s now been updated in the
database if i refresh you can now see the checkbox checks there so all we need
to do is update our database and this stuff changes
we can see our primary this text is just going to take whatever the text is for
the to do and then this second part here is this this whole right side this is
how we get this thing on the right now for us we don’t really like this comment
icon really what we want is instead of a comment like an X to delete it right and
I’m just gonna remove I guess I’m gonna remove this aria-label we don’t need it
so let’s go ahead and do that replace this icon with a new one so we did all
of these and what we want next is to pick out an icon so here is the website
for mature UI that you can actually search and find all of icons that are
available in which one you want to pick this is the one I want to do this close
right here which is an X and it’s under navigation so to add this we’re going to
scroll up to the top instead of a common icon on this a close icon and I’m just
gonna replace comment with close and we’ll see if that works close icon
refresh and sure enough icon shows up as an ex
perfect so now I just want to hook this up
so this icon button should have an on click and we’re just going to pass in
and here what we’re going to do is delete this to do right so we can create
one so this is called handle toggle I’m gonna call this and I want to just do
this in a slightly different way I’m just gonna create the lambda like this
so it’s a little bit simpler alright so I’m gonna call this function update to
do and this is a function that is gonna update the two and I also want to do
remove to do which takes it to do and we’re going to remove to do so those are
our two things we need to do so here I made a little lambda that’s gonna call
this dot remove to do passing in R to do so it should remove it whenever that
gets clicked and then whenever you click this we’re gonna call this dot update to
do and the reason why we want to do the functions like this you may have seen
stuff like this and we want to access something called this and we can
actually not access this in functions like that unless we do an extra thing
called binding but this automatically binds so that’s the reason why I like
using a function like this and general I would just recommend writing your
functions like this if you add functions alright so let’s get into the logic of
how update and remove work so I guess let’s do update first so to actually
update we come to our playground we have the code right here so I’m gonna copy
this and I’m gonna say aunts update mutation
so what I want to do is pass in a variable ID in a variable complete or
not and the way you do this with graph QL is I’m gonna say dollar sign ID and
dollar sign complete so these are variables and I have to specify my
variables up here so I’m gonna have an ID and specify the type the ID is gonna
be an ID and complete this variable is going to be a balloon
both of these are mandatory and you need to make sure the types here match the
types in your schema so if we come here we expect an ID required and boolean
required so I need to put those here as well so now I need to inject my app with
this mutation now I could do this in a very ugly way by doing this and then I
could wrap that entire application like so mutation oops not mutation of it but
our update mutation but you can see this will slowly grow and get super ugly
there’s a function that react Apollo gives us called compose that’s going to
help us out so I just leave the whole application accident there we go welcome
back so compose what we’re gonna do is have graph QL like that so now we pass
graph QL all our graph QL ZAR all our higher-order functions to the compose
function which basically squishes them together and then we wrap our app this
is just a little bit nicer way to write it they’re equivalent a java script
though alright so now what we can do is we’ve added a new thing to our props and
we can give it a name I’m gonna call it update to do so now in my update to do
function I can say this doc props that update to do and this function is
available in my props because I specified it here and the name I
specified matches alright so what I need to do to pass this is those variables
and this is a asynchronous function so I’m going to await it and the variables
that I need to pass in are an ID and complete so the ID I’m gonna say to do
ID and then complete I’m gonna do the opposite so to do complete so I’m going
to do the opposite of the current value of complete so if it is complete right
now I uncomplete it if it hasn’t been completed I now complete it so yep my
server started if I come over here and I click on this
it’ll look like it’s not working right I clicked on every single one of these
nothing happened right you may be Oh an error occurred or
something right it actually worked if we refresh we’ll see all the items are
there and if I click those to refresh I see those items changed
so why didn’t update right away right why did we have to refresh the page for
this to happen well Apollo caches all your stuff by
default which is really nice because it saves you requests and basically
optimizes things but it doesn’t reach the data whenever we update it so what
we need to do is we need to tell Apollo to update so there is something called
update that we can pass our mutation or our function on that looks like this and
this allows us to update the cache so let’s copy this in and how this works is
the store is where the cache so you could think of this is the Apollo cache
and right here this is us getting the data and then this is the name of our
mutation so the name of this mutation is update to do and this name should match
what we have right here which it does so this data is what I get back from the to
do update to do so this should be true or false
boolean of other and I worked so we actually don’t even need this if we
don’t want to because we don’t need the response to update the cache we could
just do that so first thing we do is read the data from the cache and the
thing that we need to update is this to do is query so I’m going to say to do is
clear so we now have read this into the cache and if we look down here what we
were doing we’re saying data to deuce so here I want to do data doc to deuce and
what I want to do is update one of the items so I want to
look through the two dues and update the one that has an ID that matches and
change whether it’s complete or not so to do this what I’m going to do is I’m
gonna say data dot two dudes dot map and I’m gonna search for the correct to do
and I’m gonna say if X the ID matches to do to ID then I want to create a new to
do or update the completion value of to do otherwise I just want to turn X so
basically what this mapping is doing is it’s looping off through all the two
dues until it finds the one we needed to update and what we want to do is keep
all the same values that to do has so this variable is coming from up here
that to do has but change complete equal to to do complete so just updating the
value of to do so we’re saying data dot two dues so
we’re updating what this value is looping through we’re changing this one
so it now is equal to the opposite of complete and then we’re just writing it
back to the store and then we just have to say our query here is to do is query
and our data that we’re writing back is right here
so now if we come back here when I click on this item it actually updates the
cache which then propagates and renders so I now get real-time updating of my
items and these are actually persisting – right if I refreshed they’re still
there so it actually is in fact updating the database – so nice so I want to do
the same thing with deleting items so we’re gonna come back up here and do
delete mutation and we have basically the code for that – so remove to do and
we just pass it an ID so you can copy that remove mutation pass that in and here we
want to pass in a variable call ID similar told we did with update and it’s
gonna be an ID and we’re just gonna call that and I want to basically pass the
same do the same function so I’m gonna copy it and paste it so there’s gonna be
a few differences the name of our function is going to be different so I’m
going to scroll down here and I’m gonna say graph QL this is going to be removed
mutation and the name I’m gonna call it remove to do and come back up here I’m gonna say
remove to do and variables we want to pass in we only care about the ID and
then the update this store instead of this mapping stuff we want to remove an
item from the list so to remove an item from the list we’re gonna filter so
we’re going to look for the ID that is not equal to do that ID so we’re going
to filter through the items and only remove the item where these two match up
so in other words if the IDS don’t match we want to keep that so we’re comparing
it against the one we need to remove another important thing I did not
mention about this update function is you want to make sure to when updating
this not mutate and create a new instance of it so with filter we create
a new instance of that array so let’s see this and oh we need to just make
this an async function just like we did update and let’s go ahead and delete
this so when I delete it we should see these two Reds match up and sure enough
we do can do another one and our delete function looks like it’s working
properly i refresh we should see those items gone and nice so there’s one last
thing that I want to do and that is creating two Deuce and so we want to
create just like an input field at the top where I can type stuff and submit so
I’m going to create a new file called form is and this is going to store our
form and keep track of the value as the person types it out so I’m going to
import react from react whenever you create a component in react you always
start off like this and we’re going to export defaults
and we export this like that so you can import it in our app so I’m going to say
form extends react component and we’re gonna render and what we want to render
is an input field an input field that we want to render is the nice material UI
one so this one looks really nice we’re just gonna do the basic one we can just
grab the import statement and we can grab this just his first one okay so we’re gonna talk about on change
in value in a second I’m gonna remove those three fields and the ID the label
I’m gonna call this to do dot dot dot and I’m now just gonna render in our a
platform so first I guess we should import it so import form from dot slash
form capitalization is important there and we’re gonna render it and we’re
under it between the paper and the list so now we should see an input field and
we do hey and I want to make this full width so it extends the whole thing and
I don’t know if so there’s a property called full width we can just pass on
that and now it should extend this whole
length perfect so now we can you can see this is where the helper text is I just
call that to do but you could call it whatever you want to type all that stuff
in and then hit enter and then add our item right so we need to add some more
stuff to a form so we need to keep track of what the user is typing and to keep
track of that we’re gonna use state so I talked about earlier that we wanted to
manage stuff in our state and data that changes so this is gonna be text if that
changes at first it is just an empty string and I can get that text from this
dot state I’m gonna pass that value in so the value of the text field is equal
to this text alright whenever someone types on changes called so there’s an
event called on change and when this is called and I’m gonna call this handle on
change or we can just call it a handle change
and I’m gonna pass in this function okay so I want this function to be called
whenever this one is it’s gonna be passed an event and if we do new text
it’s gonna be e dot target dot value so yah target dot value is gonna be have
the new text that the user just typed in so this new text do you want to now
store in the state and the way you update this state is with this dot set
state and then you pass in the new value so I’m gonna say text is equal to new
text so this is us updating the state with this new text value so whenever I’m
typing on change we’ll update the value in the state and the state will
propagate in the state now is going to change the text field value so now as
we’re typing this you can see the value and if I were to console dot log this
new text we can see the value each letter that we type you can see each
letter that I type it kind of makes a little pyramid here and it adds on the
new text value and then whenever the user hits enter what I’d like to do is
submit this if you will or create a new item here now I’m just going to defer to
whatever app dot J s wants to do so I’m gonna pass a prop I want to call it from
a pious so to do that what I’m going to do is create a function called handle
key down and here I’m going to say on key down
handle key down so now every time I press a letter both
key down and handle change you’re gonna get called now what I want to do is
listen for when the person hits the enter key so whenever they hit the enter
key we want to submit the form so to be able to know this we have access to what
key was pressed we get this by doing a key and we can check if it’s equal to
enter and if it’s equal to enter what we want to do is call the stop props dot
submit and I want to pass in the current value of text so this is something I
want to pass down from aptus so when I call this I want to say submit and give
it a function called this dot create to do so up here I’m going to say create to
do and we know it’s going to have one value
in here called text so this is the function that we’re passing to submit
and then our form or calling submit passing in a string which is text so
here’s where we want to great to do and we want to come over here to our
playground and do create to do and really there’s only one value for this
which is the text and then what stuff we want to get back so the ID the text
complete and we want to get it all back in this case and we’ll see why in a
second I’m gonna say Const create to do mutation pass that in and then we’re
gonna have one variable here I’m gonna call it dollar sign text and by the way
you do not have to call it the same name as what you have here just a good
convention that I like to follow so text string and that’s gonna be mandatory
come down here and actually all the way down because we want to add another one
so this is going to be create to do mutation and I’ll say create
so in here now I’m gonna say and we can I guess copy this because we’re gonna be
doing similar things I need to make this asynchronous I’m gonna say create to do
the variables that I’m gonna pass and it’s just the text and now I want to
update the store after we create that to do because I want to update the to-do
query and add my new to do but here I care about the second thing because the
second thing here data and then create to do this is gonna have three values
it’s gonna have the ID the text and complete which is what we need so I mean
just going to push it on so push and we’re gonna add this create so we read
what to do is we have cached we add the new item that we added and then we write
it back to the query so usually what I like to do is just add a console.log
statement to see if this is not getting called or what could possibly going
wrong yucky this might be an uppercase enter not a
lowercase yep and that was the case so watch out for that and you’ll notice
this did not clear so two things I noticed first off this is not clear at
the top we want to do that and secondly it added at the very bottom I want to
add it at the top so we know this was getting called and after we submit we’re
just going to say this does that state and set it to an empty string and that
will clear it and then our app j/s we’re pushing to the end there’s a function
called unshipped this adds it to the beginning so if i say first we now have
an item at the beginning and now I can just rapid-fire create items if I want
to can check them off and delete them if I want and we have a whole to-do list
created so that is it for this tutorial we did all the operations creating
reading updating and deleting to-do items I hope that was helpful and you
got a good grasp of how to do this and a little taste of how graph QL and react
works if you have any questions please leave a comment
oh I’d be happy to answer again thanks for watching guys and leave any
questions you have in the comments below I hope you have enjoyed listening to
this video please be kind enough to like it and you can comment any of your
doubts and queries and we will reply them at the earliest do look out for
more videos in our playlist and subscribe to any Rica channel to learn
more happy learning

35 Comments

Add a Comment

Your email address will not be published. Required fields are marked *