GraphQL Tutorial #18 - Mutations

Net Ninja · Beginner ·🔧 Backend Engineering ·8y ago
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 Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
2 Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
3 Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
4 GraphQL Tutorial #1 - Introduction to GraphQL
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
5 GraphQL Tutorial #2 - A Birdseye View of GraphQL
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
6 GraphQL Tutorial #3 - Project (stack) Overview
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
7 GraphQL Tutorial #4 - Making Queries (front-end preview)
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
8 GraphQL Tutorial #5 - Express App Setup
GraphQL Tutorial #5 - Express App Setup
Net Ninja
9 GraphQL Tutorial #6 - Setting up GraphQL
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
10 GraphQL Tutorial #7 - GraphQL Schema
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
11 GraphQL Tutorial #8 - Root Query
GraphQL Tutorial #8 - Root Query
Net Ninja
12 GraphQL Tutorial #9 - The Resolve Function
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
13 GraphQL Tutorial #10 - Testing Queries in Graphiql
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
14 GraphQL Tutorial #11 - GraphQL ID Type
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
15 GraphQL Tutorial #12 - Author Type
GraphQL Tutorial #12 - Author Type
Net Ninja
16 GraphQL Tutorial #13 - Type Relations
GraphQL Tutorial #13 - Type Relations
Net Ninja
17 GraphQL Tutorial #14 - GraphQL Lists
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
18 GraphQL Tutorial #15 - More on Root Queries
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
19 GraphQL Tutorial #16 - Connecting to mLab
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
20 GraphQL Tutorial #17 - Mongoose Models
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
GraphQL Tutorial #18 - Mutations
GraphQL Tutorial #18 - Mutations
Net Ninja
22 GraphQL Tutorial #19 - More on Mutations
GraphQL Tutorial #19 - More on Mutations
Net Ninja
23 GraphQL Tutorial #20 - Updating the Resolve Functions
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
24 GraphQL Tutorial #21 - GraphQL NonNull
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
25 GraphQL Tutorial #22 - Adding a Front-end
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
26 GraphQL Tutorial #23 - Create React App
GraphQL Tutorial #23 - Create React App
Net Ninja
27 GraphQL Tutorial #24 - Book List Component
GraphQL Tutorial #24 - Book List Component
Net Ninja
28 GraphQL Tutorial #25 - Apollo Client Setup
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
29 GraphQL Tutorial #26 - Making Queries from React
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
30 GraphQL Tutorial #27 - Rendering Data in a Component
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
31 GraphQL Tutorial #28 - Add Book Component
GraphQL Tutorial #28 - Add Book Component
Net Ninja
32 GraphQL Tutorial #29 - External Query File
GraphQL Tutorial #29 - External Query File
Net Ninja
33 GraphQL Tutorial #30 - Updating Component State
GraphQL Tutorial #30 - Updating Component State
Net Ninja
34 GraphQL Tutorial #31 - Composing Queries
GraphQL Tutorial #31 - Composing Queries
Net Ninja
35 GraphQL Tutorial #32 - query variables
GraphQL Tutorial #32 - query variables
Net Ninja
36 GraphQL Tutorial #33 - Re-fetching Queries
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
37 GraphQL Tutorial #34 - Book Details Component
GraphQL Tutorial #34 - Book Details Component
Net Ninja
38 GraphQL Tutorial #36 - Styling the App
GraphQL Tutorial #36 - Styling the App
Net Ninja
39 GraphQL Tutorial #35 - Making a Single Query
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
40 Build Apps with Vue & Firebase - Udemy Course
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
41 Updated Vue & Firebase Course (Udemy)
Updated Vue & Firebase Course (Udemy)
Net Ninja
42 Vue & Firebase Real-time Chat (Preview) #1 - Intro
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
43 Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
44 Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
45 Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
46 Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
47 Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
48 Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
49 Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
50 Object Oriented JavaScript Tutorial #1 - Introduction
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
51 Object Oriented JavaScript Tutorial #2 - Object Literals
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
52 Object Oriented JavaScript Tutorial #3 - Updating Properties
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
53 Object Oriented JavaScript Tutorial #4 - Classes
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
54 Object Oriented JavaScript Tutorial #5  - Class Constructors
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
55 Object Oriented JavaScript Tutorial #6 - Class Methods
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
56 Object Oriented JavaScript Tutorial #7 - Method Chaining
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
57 Object Oriented JavaScript Tutorial #8 - Class Inheritance
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
58 Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
59 Object Oriented JavaScript Tutorial #10 - Prototype
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
60 Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja

Related AI Lessons

Up next
This Cop Was Held Accountable For His Brutality! #police #lawyer
Hampton Law
Watch →