Is it Hype? Learn GraphQL by building an Express + GraphQL App (Part 2)

Key Takeaways

no engineer wants any more complexity you know the world of web applications servers front ends caches databases uh you know devops scaling all this junk is already complex enough right but you know the question is always does this tool provide more value than not all right what's up guys i'm here to talk about graphql once again today i want to continue exploring the question is graphql hype uh this is going to be part of a new series called is it hype where i try out existing and new technologies and see why they're picking up steam or see why they would pick up steam so this is the second time that i've used and tried to implement graphql today i want to take what i learned last week to the next level i've had some time to think about um you know what it's useful for and to think over the structures that the graphql engineers have set up so feel free to comment if i'm missing the point of graphql or if i'm you know misusing it you know love to hear your thoughts i'm going to be setting up a graphql express server so i'll be reading and writing newsletter subscriptions and adding new users um and i'll probably use something simple as a backend i'll probably just use like i'm thinking sqlite uh just kind of as a mock back end so let's dive in all right so first things first i have an empty repository here uh craftql2 so let's get started here i'm going to jump into the documentation and we're looking for [Music] an express server so let's look for that there we go express graphql awesome so i just want to get a basic example up and running so let's get to work so your underneath and then i'll do yarn add just copy these sweet okay and i'm just going to copy this example and i think i want to have a client and server here and the client can even just be like a node.js script i just need to make http requests um so let's see we'll just try to keep it as flat as possible so i'll just do server js paste that and let's hop into package and create basic script here um let's see do i have node mode installed i do um let me just use that let's see how that works change this to dev okay so it seems to be running let me try to just add a console log here cool so that is running so now i have a server auto restarting and we have a basic graphql server set up so let me um create a client script so um let's see client dot maybe i can just do this whole thing uh in js just to keep it simple okay so i just need to make a request so here's my endpoint and then we'll make a main and maybe i want to make this an mjs file but there we go yeah exactly what i wanted so i love that uh copilot just give me everything i need here let me just look over this always double check your copilot output sometimes it works great other times it is guessing completely wrong from the wrong code base the wrong context whatever it might be but this looks good so i'm going to go ahead and open up another terminal here and create another script so i'm going to change this to server and then i'll use my dev because i'll be running this more often to run my um client.js so let's see how that works no fetch because i don't have node fetch installed i believe yep so let me just go ahead and add node fetch fetch fetch and let's rerun um let's see what do we have all right i'm in uh basic js so um i guess i'll just acquire right all right let me try a mjs file okay okay so a couple minutes later here i've got um just got this basic client mjs files so we can use modern imports here and i have a basic fetch so we're just running the query uh we're grabbing hello and then we have this post uh business so that's great so we're just console logging so our clients very simple uh it's just gonna be hitting our server all the details will really be in the server so first things first i want to create a structure that allows me to read and write newsletter subscriptions so say you know you have a personal blog personal website and you know you need to keep track of all of your uh subscribers right all of your all the people that want to see your content on a regular basis so you'll store an email and maybe like an arbitrary id with that um so i will do that here and let me just start with a basic like object to store this as like a temporary database so let's do db equals this and then i'll have uh subscribers and this will just turn into a [Music] sure we'll use that as the default and we'll just change the name to email all right so this will be john gmail.com all right something simple like that we'll add two more actually let me see if i can get a autocomplete okay yeah tim gmail.com and they will do um you know nathan gmail.com whatever cool so now we have subscribers and now i need to update the query to obtain these subscribers right so i'll write the list method to get first um so let me do that and let me hop back over to the doc so i can refresh myself on how exactly this works i believe it's just this right so i set up a new type subscriber and in there we have the id which is a string and then we have the email which is also a string and then inside the query we remove hello and actually i'll leave that for now but i'll add yeah exactly subscribers then we have this list of subscribers and then in the resolver i'm really gonna change this uh i don't like that name they just call it root this is a resolvers and then i'll add yep subscribers and it will return db subscribers exactly copilot is amazing yeah i really believe that engineers who have co-pilot versus engineers without are going to be uh substantially faster in the long run so if you don't have co-pilot if you don't know what it is definitely check it out github co-pilot it's an amazing tool when it works it's amazing when it doesn't work not so bad okay so let's continue so i should give you my subscribers let me go ahead and hop over to my client and just try to uh run this so query i'm going to run subscribers um and what fields do i want i want all of them so id string or sorry id email yep so let's see what we get there cool so we get object here i'm going to change my output to uh i want to stringify my results so yep and i want to format it let me get rid of some of these parentheses well let me see how that looks great so you can see here on the client um in this you know example node script i'm running my client.mjs i have all my subscribers back so that's fantastic and i'm going to change this query to um let's see what i want to call this i guess we just keep the name query um let's see let me do a little bit of formatting here on the client so that i can make this more dynamic so this is going to be um you know i'm going to call a graphql request cool i'm going to lift this in and then as an example exactly graphql requests and this is going to be i want this to be the params as a whole so describe your query all right and all right then i can do this and then i can replace the request content so let me run this make sure that works okay great so now i can separate on the client side each individual query um and you know i think in the long run you would store this somewhere on your client so that you could have these individual you know like a whole list of these different types of requests probably an object so you can map uh these requests or at least have them stored as like constants and some file on the client side but so let's just go from there so that's great so now i can um read a list of subscribers so next thing i need to be able to add a new subscriber right someone hits your page they like your content they like your blog um now they need to subscribe and so now i need a mutation that will actually add a new email to the database so let's do that i'm going to do a couple things here i'm going to add this like temporary id field and it's going to start at 1 and then i'm going to increment my subscribers so i want to get a new one i can just do id plus plus um so that's great and then i'm going to add a new resolver add subscriber let's see how it handles this okay so add subscriber [Music] now basically we're just going to look for the email i'm going to use db subscribers push and then i'm going to return all existing uh subscribers after the mutation has occurred so next i will add the mutation type as we learned in the previous video we need to have a query and a mutation top level on the schema um cool so i'll do this and i'll return all subscribers i'm just not just going to return one so i'll do that there and now i need to create this make sure that this exists i'll switch the name and i'm just going to log to make sure that this is coming through sweet do id id plus and that's a const let me change that okay i think i think i'm good there let me double check to make sure i'm not missing anything yeah okay great and then let me write the client side query so this is going to be a um you know create subscriber query and let's see i'm going to write this one so we'll do mutation um let's see how does this look create subscriber okay now so i'm not all too familiar with this mutation syntax input or email and then i say dollar sign email because that's what i'm referencing and then i return these values so let's see if that works um is that something wrong on my server it totally is it's just my server i have this json stringify args and it's blowing everything up i'm just going gonna comment that out and then run create subscriber args email i'll bet that was it yup okay so of course it's always your fault when you're engineering especially when you're learning something new but um you know we knocked it out and we're moving on so uh now my email is coming in null uh so let me figure out what's going on there is this just a single object i'm not sure but it looks like the first is what i'm looking for so i'm just going to look at the first parameter is what i'm looking for so i'm going to pull the first parameter and then i'm just going to rerun cool great so it looks like my email got in there just fine and i'm going to rerun remember my server isn't updating so my database object here is still going to be alive right i haven't restarted my server yet so i'm just going to rerun this we should see two dans and id five on the second one perfect so that's the result here and that looks great so i am successfully reading and writing let me delete this hello cool and that'll restart the server okay so this makes sense so what else will we need i mean we could add a remove let's go ahead and add a remove subscriber say you know your subscriber unsubscribed from your newsletter um so you need to remove them from your database so i'm going to do that so i'll do remove remove subscriber query and then i'll do the kind of same thing and this structure i think is making a bit more sense the mutation on the top level is just passing in the variables to the actual uh mutation that's written on the server i believe so i could theoretically name this anything um maybe that's true maybe it's not uh let's see so mutation remove subscriber that looks right remove now let's get all the fields back cool let's create another query for this and i'm passing in id of the subscriber now so i'm going to remove id number one and change this to remove subscriber and then i'm going to copy this mutation and move it over to the back end and basically run the same thing it's going to be an id and then i need to implement it implement this method in my resolver um yeah copilot's doing a lot of work for me here let me remove my logs it's going to parse the id and then we're splicing yup that looks great all right remove subscriber cool so when this runs this will remove a subscriber from my database it'll remove the id number one so we should see tim not and the list getting returned so let's see if i made any mistakes here id sub not a valid value so id is a string so let me bump this as a string and i actually just i want to test this too i want to see if i can name this top level mutation anything so i'm just going to add my qyq and see what happens great so that works so really doesn't matter what this top level is called it's just it's basically just a wrapper to pass in my functions or sorry my variables for the query really great about that for a moment here weird they don't really talk about it they don't really talk about that top level at least not that i can see immediately anyway so okay so that's uh removing a subscriber um yeah this just makes sense the it's just all starting to fit together um i think this is the core graphql it's just this on on repeat after this so okay so let's see so let's say now i have these lists of subscribers i can add subscribers i can remove them i want to be able to search through my subscribers to look for someone specific i don't really know the real life use case for this but it certainly could be possible so let's add a graphql query and resolver for that so uh i'm going to add a query called find subscriber and okay so we get an id yeah that looks good um i'm going to do this by id sure why not and then i'll add this method here i'll just go ahead and do basic args and then [Music] um id args that id let me try to type this out before uh okay get up co-pilot's too fast um okay but i need this to be subscriber i wonder how this handle is undefined i guess by not having the bang right maybe okay so let me just hop over to the client let's copy this move this to id and then we'll add a new [Music] um find subscriber query and so this is going to be a query and it's just going to be find subscriber so i can pass a specific id in here i i do want to pass in a variable so i i'll need that i believe i'll need that top level you know find subscriber and then i'll do how's this done dollar sign id and then pass in the string so string must be present and then find subscriber right right and then i'll return the id email sure yeah okay so let's try that so this should just return uh john gmail.com let's see so we have an error here it looks like i'm misinterpreting this find functionality specifically when there's a query fine subscriber make sure that's the right oh and it changes to a string i'm still an error okay so did they would they really change the syntax between the query and the mutation oh no my syntax is just wrong okay unexpected do i have an extra here looks like a deal okay find subscriber null this is coming in as a number so the triple equalities is is breaking um i mean i can just cheese this right and um this is not recommended practice there we go so that works because i convert it to a string let me let me do this like the non stupid way let me just wrap it as a string all right just call string on it that should do the trick yeah and then i'll do it down here when i add so i'll just call string on my id that is a number and i'm converting okay great so okay yeah that's really cool okay so this is great so i have graphql running i have this like nice little temporary database um i want to do one more thing here with this graphql example i want to add sqlite so that we're kind of mocking out you know like our client database and then server so i'm going to add sql lite point it to a local file and then just run some queries and instead of updating this local database object i can look at the sqlite database file so let's just look for some documentation on that um let's see let's get uh express sql lite let me see what we have here by default um wait express when am i supposed to be searching here sql sure sqlite okay so let's get this installed um we'll do let's call light three and that's on a package and and now these functions here let me make a like local sqlite wrapper class so um sql i'll actually just still call it database um but i'll have methods here right so i'll have async methods here you know fetch subscribers and then we'll have create subscriber delete and i have find all right this passes in an id great um and let's see let's get so i have sqlite now installed let me go ahead and reference it sqldb cool so there's a database file um [Music] probably needs an actual reference imagine right so let's do dot slash what's going on here can i find modulus kill light let's kill light 3. great so that works fine and first things first i need to initialize right so um i'll run a database.init yeah and exactly okay it's going to create table if not exist and of course we have an error access database well it doesn't exist yet so we'll wait get down to the bottom here cool let's see if we got that database file we did db.sql cool so that's the sqlite database is being created now let's see now let's just go ahead and create some methods here so fetch subscribers gonna do [Music] yeah this co-pilot is creepy good but this is exactly what i want um and then let me do a find let's see if gopala can not gotta find for me of course uh really cool um great and let's see if we can do a create if i pass in the email and then a delete with the id okay so first things first let me change the find method uh no let me change the subscriber method so i'll make this async i assume you can just make your resolvers async i hope so and i'll do a weight database fetch subscribers so let me just test this first and i'll run this first method here and then great so empty list of subscribers it looks like uh the query worked just fine so let me go ahead and add some items so let me um update the create method to grab the email and then i'll i'll run await database database dot create subscriber and i'll pass an email and then what i'll do is i'll to return i'll await database dot fetch subscribers right because i need to return all the subscribers after that method completes um what happened here oh yeah we need to make this async great and let's run this cool so i think that worked id4 why is id4 database create subscriber oh i did give it an id okay i guess that's i guess that's fine well but i want this to auto increment text primary key hmm let me make this a uuid let me just make a random function here generate uid return and yeah we'll just get anything here okay can we be done there okay yeah i just need some random id i'm gonna use that instead so when i create we'll just place that in here great and i'm going to go ahead and get rid of my previous temporary database and what am i going to do here i'm going to go ahead and minimize my new sql database and make sure that the rest of my resolver functions have been updated so there's the id i'm going to get sub and sub equals now database dot find subscribers exactly and for my remove i'm going to run await database delete subscriber and then we're going to fetch um my new list of subscribers so that's that uh this should all be working um you know thanks to codepilot i was able to write this all really quickly without having to dig into all the sqlite documentation so that's great let's hop down to the bottom here i have an error of course i need async functions okay great so that fixed that um let me go ahead and test out my new id generation function we're going to create a couple more emails um gem id not defined let's see i missed id somewhere i just need to define my id before i use it so there i'll generate an id up there and then i'll run that there so okay let's run grades we have gym and then we have this automatically generated uid let me create a couple more users kim and we'll run that great and then i'll close this and or i'll comment that out and then i just want to read all of my subscribers so i'm running my you know subscriber query here cool so as you can see all my subs in there now i'm going to delete myself from this subscriber list i'm going to delete my id4 just pass in number four there and run okay looks like we've got a bug let me see what i did there on my remove sub see it wants the id delete subscriber id id um i just need to resolve true here nothing else special needs to happen so it's all true and that's it so let me rerun that cool so that worked looks like i removed myself and we can test that by running bliss so yeah looks like i am dana t-mobile.com is no longer in the list that's fantastic uh let's go ahead and run find so let me grab you know let me grab kim kim's id and pass that in the find subscriber query with the variable and let's run this great and it gives me back kim uh really cool one more thing i want to do here before i wrap up you know so i've created a database i've created a nice express server you can start to put the pieces together to see how this can be super useful but uh you know at this point it's just an api right i've written you know four different api endpoints and and i'm just querying them individually right the cool part is is that you know in a way you can say that they're all grouped together through the schema but really i had to write every single resolver right which again that's kind it's more or less like you're creating your individual you know api endpoints but the really cool part in my opinion here about graphql is that i can combine my queries right so let me just try this and show you exactly what i mean we'll call this compound query right so here's me fetching my subs i'm curious can i can i fetch my subs again so flattened it so so okay so that's cool so flattened it um can i can i do this i want to run multiple queries in the same statement right so find subscriber one and then yeah return all the information uh one does not exist let me grab kim's id it looks like this is gonna work okay so this does work so this is really interesting right it's a simple kind of contract example but to me this shows the power of graphql right you know i i have a single query with two requests right i'm basically making two requests in one right so you can imagine you're loading like a new page on your website and you have you know six different sections of your site right let's say it's like a complex web app you can run a single graphql query to fetch everything you need now i think that there is probably a debate around if that's fast like say you're fetching a lot of complex data and you know it bogs down your ui because you have to freeze everything until everything loads you know to me that seems like kind of the reverse of what you would want to do you would want to separate all of your quests into one which again with graphql you could still do right and it'd all be hitting a single endpoint so in that way it seems you know it's flexible but there is i think that there is always going to be an argument to just create your own api endpoint you know to create individual api endpoints um i don't know i really don't know i'm gonna play with this some more i'm gonna actually use graphql and some of my own personal applications um you know part of the reason i use this subscriber example is that i need to build something out like this or i have built something out like this and right now uh that's all sitting in a back end where it's essentially just an api request so i'm going to try converting that to a graphql endpoint and just see how it feels see if it's faster see if i can eliminate some code see if it's it's worse if it's slower i have heard some negative feedback that graphql is a lot more boilerplate there's a learning curve for all your engineers you know it's just kind of like another layer that you have to consider um and it just kind of adds additional complexity to your stack right which of course no engineer wants any more complexity you know the world of web applications servers front ends caches databases uh you know devops scaling all this junk is already complex enough right um but you know the question is always does this tool provide more value than not i need to do some more research but i'm going to go ahead and say graphql is hype it is as useful as people say it is this is why companies are picking it up um you know this is what companies have in picking it up i know i'm kind of late to the game here uh in terms of graphql but i'm going to go ahead and say graphql is hype um let me know what you guys think uh if you think graphql is cool if it does have value comment down below if you think it doesn't also comment i want to know why so i can you know go forward using this and more of my technologies versus not um so we'll see so far i like graphql there is a learning curve uh quite an annoying learning curve i would say that and combined with like docs not being super great um you know kind of a rough onboarding experience um surely if i was working with someone who knew graphql already it would be a lot smoother um but you know that's just how it goes when you're learning new technology on your own you just have to try it and see uh you know what happens but anyway thank you guys we appreciate your time hope you're having a fantastic day and i hope all your programming is going well and you're building really cool things i'll see you in the next one [Music]