GraphQL Tutorial #18 - Mutations
Skills:
API Design90%
Hey ninjas, in this GraphQL tutorial I'll explain what mutations are, and how we can use them to add, change or delete our data.
DONATE :) - https://www.paypal.me/thenetninja
----- COURSE LINKS:
+ Course files - https://github.com/iamshaunjp/graphql-playlist
+ Atom editor - https://atom.io/a
+ CMDER - http://cmder.net/
+ Node Download - https://nodejs.org/en/
======== Other Tutorials =========
----- NODE.JS TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp
----- MONGODB TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9jpvoYriLI0bY8DOgWZfi6u
----- REACT TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-WhtRIfIJ1lXlTZR
----- SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1
======== Social Links ==========
Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Patreon - https://www.patreon.com/thenetninja
What You'll Learn
Explains what mutations are in GraphQL and how to use them
Full Transcript
alright then so now we have our Mongoose models already and set up for action the book and the author so we can use both of those two to communicate with our MongoDB instance on M lab now that previously in our root queries what we were doing is resolving data locally from a race right now we'll be resolving our data in future from our database on n lab however currently there's no data in there there's no author stored in there no books so we cannot really resolve any data yet it needs to be present in the database first first to do them so I think this is a perfect opportunity to introduce mutations in graph QL so what are mutations well essentially mutations are what allow us to mutate or change our data so having data deleting data editing data these are all mutations now in graph QL we need to explicitly define our mutations to say what data can be changed added deleted etc so let's go about doing that now underneath the requiere what I'm going to do is create now another constant and this is going to be called mutations so setting up our mutations essentially in the same kind of way we set up our root query up here all right so let us set this equal to a new graph QL object type which is right there then inside we need to pass through an object and this is going to have a name property the name it's just going to be mutation like so and then the next property is going to be the fields property now we also have the fields property up here remember we do exactly the same thing in our mutation down here and this is going to kind of let us store the different kinds of mutations that we want to make to for example add and author or delete an author or update an author so we'll create a field called add author so when someone uses this add author mutation then it's going to allow us to add an author to the database that's the whole idea here so this ad author property is going to be an object and the first property inside this object is going to be the type much like everything else and you'll find with graph QL it's just kind of the same code over and over and over so once you know how to do one thing you pretty much know how to do the rest of the things that graph QL can do as well so this time is going to be an author type because this is what we're trying to add right here and author so that's the type defined the next property is going to be the arcs now when a user makes a mutation query from the front-end then we'd expect them to send some kind of data or arguments right because if they want to add an author they're going to need to send along that author name and the age because they're the two different things we want to store in our database for each author right so they're going to pass these through to the graph QL server as arguments so the first argument that we expect is going to be a named argument and the type of this argument is going to be a graph QL string so much like when we had in our require ease over here when we made a query for a book we're saying we're querying a book type and we want the user to pass an argument which is an ID so we know which books a query and that's going to be of type graph QL ID we're doing the same kind of thing down here when they're making a mutation they're going to send back several arguments the different properties of that data type and each argument is going to have a different type so the type of the name is going to be a string that we're expecting and also we need an age and that is going to be a type graph QL int all right because that's the number not string so they're the only two arguments really were expecting from the user when they try to make this add author mutation so again much like everything else we do all the kind of legwork in the resolve function this is where we take the arguments that they've sent along with the query we'll say okay we'll take them and we'll make a new instance of an author and store it in the database right so this is where we do that so again we're taking the parent on the arcs and we're going to use those args in a minute inside here what we're going to do to begin with is just create a new kind of local variable so I use Lett and then it's going to be called author and I'll set this equal to a new author now this author right here this is our model we imported that right at the top of the file over here Const author equals require this thing so we're using this author now to create a new instance of that datatype just locally to begin with this is how Mongoose works right so this author is gonna have some different properties inside it it needs a name which is going to be arks name so that's the thing that the user sent along with this kind of mutation query they sent along the name of the author they want to add so when we create a new author locally using Mongoose we're saying okay well set the name property equal to Alex name that the user sent along also the age is gonna be equal to args dot H all right so now what we've done is created this local little variable called author and set it to a new local instance of this author data type so now what we need to do is take this instance of the author data type and save it to our database and we can do that really really easily by just saying author don't save this again is the power of Mongoose connects into our database when we create a new instance of a data type we have access to different properties on that data type one of them is the save method so we can just say well okay we've got this instance now we want to save it to the database a mongoose knows how to save it to our particular collection and database because we've already defined the model collection in here when we said this is the model name so this is going to be the collection name it's gonna PluralEyes that and store it in a collection called authors and it knows the database because we're connected to the database right here so it's going to do all of the work for us behind the scenes that's all we need to do to save it to the database awesome right ok then so now we have this mutation defined right here but we need to do one more thing down here where we export the graphic you schemer we're seeing that the root query is this thing right here this query we also need to pass through a property called mutation and this is going to be mutation which is what we just created right here so right here when we're exporting our graph to our schema were saying that a user can query using these require ease right here and it can perform mutations using this mutation thing right here okay so now from the front end I mean crush your fingers and hope this works we hopefully should be able to make a mutation so let's give this a whirl going to pop over to a graphical right now and try to make a mutation now normally when we make a query we do it in curly braces like this we're saying okay we want to query a book or you know an author etc when we're making a mutation we need to place mutation in front of this because no longer is this just a simple query we're making a change we're mutating data we need to tell graph QL that we're making a mutation so what mutation are we making well in the code we define this mutation as add author so that's how we make the mutation from the front end so we'll say add author and they remember it expects some arguments the first argument is the name and that's of type string so let's place that in double quotes and I'm going to call this I don't know Shawn for the hell of it all right the age will pass through as well we'll just say 30 and then inside we want to say okay well when we've created this author when we've handled this mutation what data about it do you want to receive back well I'll take the name and age back as well so let's give this a whirl or save it and not save it rather let's play it and see what comes back okay we get that author is null so why is that well if we take a look at M lab at the minute we can see and you might need to refresh your page by the way we can see this author's collection has now been made so in the code when we've saved this author is saved it to a new authors collection and if we take a look inside there we should see that record name Shawn age 30 so it's been stored and it's given it this ID as well randomly generated so that's all working so why are we not receiving the data back well the reason is if we go to this resolve function where we're actually saving the data we're not returning anything now fortunately when we use this method or not save what Mongoose does is return that give us that object back okay that we saved so all we need to do is return the results of this method right here and that will work for us ok so if we save this and give this a world one more time I'm just gonna create a new author right here and I'm gonna call it Steven age 38 and let's press play this time we're going to save that also then we get these things back as well okay so the author we just saved we get back and we can do something with that in our code on the front end if we wish all right so there we go that's how we make a mutation and all that it's just a refresh over here to see if we have that different record yet now we have Steven as well so yeah that is mutations in a nutshell so far we've just created one to add an author so in the next tutorial what we'll do is create another mutation called add book or something like that to add a book
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Net Ninja · Net Ninja · 21 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
▶
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
GraphQL Tutorial #5 - Express App Setup
Net Ninja
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
GraphQL Tutorial #8 - Root Query
Net Ninja
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
GraphQL Tutorial #12 - Author Type
Net Ninja
GraphQL Tutorial #13 - Type Relations
Net Ninja
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
GraphQL Tutorial #18 - Mutations
Net Ninja
GraphQL Tutorial #19 - More on Mutations
Net Ninja
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
GraphQL Tutorial #23 - Create React App
Net Ninja
GraphQL Tutorial #24 - Book List Component
Net Ninja
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
GraphQL Tutorial #28 - Add Book Component
Net Ninja
GraphQL Tutorial #29 - External Query File
Net Ninja
GraphQL Tutorial #30 - Updating Component State
Net Ninja
GraphQL Tutorial #31 - Composing Queries
Net Ninja
GraphQL Tutorial #32 - query variables
Net Ninja
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
GraphQL Tutorial #34 - Book Details Component
Net Ninja
GraphQL Tutorial #36 - Styling the App
Net Ninja
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
Updated Vue & Firebase Course (Udemy)
Net Ninja
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja
More on: API Design
View skill →Related AI Lessons
⚡
⚡
⚡
⚡
Connecting Frontend to Backend: A Backend Engineer’s Reality Check
Medium · Programming
Build Secure Authentication System Using Access and Refresh Tokens
Medium · Python
5 PHP Features You're Probably Not Using (But Should)
Dev.to · Mahdyar
How to Use the any Type and When to Avoid It
Dev.to · Krunal Kanojiya
🎓
Tutor Explanation
DeepCamp AI