In this video, Emmanuel Henri adds mutations to the backend or Apollo server. He updates the resolvers and schema, then goes to GraphQL to test mutations.
- [Narrator] Now that we have our queries completed, what about when we need to update or send new items or contacts in our case to our server? This is where mutations come into play. So let's go ahead and add mutations to our application and then, when we're done with our mutations, we'll test our queries and mutations and explore GraphiQL. So the first thing I want you to do is go inside of our schemas on the server. So click on Server, click on Source if it's not open and then first get to Schema. And what we'll do, we'll add a simple mutation to our type depths.
So let's go in and Enter. Type Mutation and make sure it's capital M, capital Q and capital C when you define your types. Then we'll have our Add Contact mutation which takes the first name and it needs to be a string. And again, when you use the exclamation point, it requires that and the server will give you an error if you don't have a string passed to that particular value.
Last name, same thing, a string, exclamation point. And we'll return with Contact from that new mutation. So a mutation in short, in the GraphQL server is kind of a host or adding new things to your server. So if you're familiar with REST, then this is the part where you add new things to your server, okay? Save that and then let's open our resolvers. So go inside of your Source Folder and we'll do the function that will return our mutations.
So let's make sure we use this one here so Enter there and Mutation, which is the function Add Contact and we need to pass the root and the arguments inside of that specific function and we'll do a few things here. So, the first thing I want to do when I create a new contact, I want to have a unique ID. So if you look up here, there's one, two, three, these are simple ones but I want to create something that will prevent having any repeats in my ID.
So let's first create a new variable, which will be called new ID and furthest one will require Crypto so I've used this in previous courses if you've watched my GraphQL course you'll recognize this specific function so basically what we'll do is create a random series of five characters and that will be passed to the new ID. So we need to use random bytes and five characters, this is the number of characters that we're going to create and then pass it to string and use x for new dull.
Okay, and we'll create a new contact and the new contact will have the ID, which will be the new ID that we just created with Crypto. And we'll receive to the first name the arguments that we're passing inside of GraphQL when we do our mutation and the same for last name so let's copy and paste that. And make sure you change this and I'm using Option click in VS code to do that and do last name instead.
So once we have our new contact, we are pushing it to our array with the new contact value. So we're simply doing a function for an array called push, we're pushing the new contact and returning it. So this will allow us to create a new contact inside of our GraphQL server. Okay, so we are good, let's make sure we don't have any issues here in our code, create a new Crypto, run them by string, new contact, just make sure we have the right values, last name, sometimes there's a capital N that's missed somewhere and then it creates an issue when you run the server.
Okay, so let's make sure we save first. All right, so if we open the client right now, and we'll do that in a second, it's going to show only Hello World and reason why it does that and if you go inside of our Schema file here, on our server we have an add mock functions to schema that we imported from GraphQL tools and this is where it actually does it. So for any places where it's calling for a string on GraphQL, it's going to add Hello World. So once we run our client, it's going to show Hello World on our client, for now.
Once we start working with the client a little bit further, then that's going to change. So let's go ahead and run it. So you go inside of our terminal, View, Integrated Terminal, let's run our server, npm start. So our server is running and now it says Your GraphSL server is running on port 4,000 and run a second window on whatever terminal you're using. So if you're using the local terminal, create a new window and then go inside of the client because we're going to run the client separately.
For people that are on VS code, you can simply do that by clicking on the Plus here and then making sure that you're on the right folder because right now we're on the General CRM folder here so we need to right click, Copy Path and then Paste so cd Paste, so we're in the client and then run npm start again. So our client is showing Hello World, Hello World so this is good, that means that it's pulling the mock data from the little function that I just showed you so this is running fine.
And let's go ahead and refresh our GraphQL and our GraphQL is working fine as well and we have our queries and we have our mutation right in here. So the first thing I want to do is run a query. So I want to see what are the contacts in my GraphQL server? So let's go ahead and do this and you run a query by doing query and by the way, whenever you start typing GraphQL, it's going to start suggesting what you can do and you can also, if you wonder what you can do, take a look at the Documentation Explorer here.
So for example, for query, if you click here, it's going to show you that you can call in to Contacts and once you click on Contacts, it's going to show you what are the fields that you can use when you're making your queries. So let's do exactly that. So this is how you do a query in GraphiQL or GraphQL in general. Let's do Contacts, and then for the contacts, I want the ID and the first name, I could call the last name as well so let's go ahead and do that and if you want to have a prettier query, you can click on Prettify and it's going to change your query to make it look better and run it.
And right now, we have two contacts created by our GraphQL add mock functions, which is the first name, last name, Hello World and this is kind of the ID that was generated by the system, so this is not the one that we actually just coded, which will be different, it's going to be five characters but this is automatically done with the mock functions. So let's go ahead and test our mutations now. So let's add something. So the way you do that, you do Mutation and again, let's go into Documentation to see what we can do.
Mutation, if you click here, it takes a value of Add Contact and then it requires a first name, which is a string and then it requires a last name, which is a string and then it returns a contact. So once you return the contact, you can call in whatever data to show if it was successful or not. So let's go ahead and do that. All right, so we'll do Add Contact, so Add Contact takes two values, one of which is first name and let's go ahead and call someone that I work repeatedly with and then last name, something so once this is done, what I can do after that is call the ID of that contact and the first name and the last name.
So what that will do is return the values that I passed along with the ID. It returns it after it has been passed to the GraphQL server. So that means that if we see the first name, the last name and the ID on the right here, it means that the actual mutation has been successful. So let's go ahead and click here and it has been successful. So right now, the only question that we have is, okay wait a minute, we did have something that occur and we still have the 20 digits ID and Hello World and last name Hello World.
That is normal because we haven't removed the Add Mock Functions yet but that will change in future videos. But that means it's successful. But this is how you would do a mutation with Add Contact and Add New Contacts. So now that we have mutations working on our server, we need to update our front end to give this wonderful power to our application.
- Initial setup for Apollo
- Tools required to work with Apollo
- Initial Apollo client setup
- Installing dependencies for Apollo server
- Finalizing Apollo server
- GraphQL mutations with Apollo
- Subscriptions with Apollo
- Updating resolvers and components for subscriptions