Join Glenn Block for an in-depth discussion in this video Create a mutation and verify the change, part of API Development in .NET with GraphQL.
- [Instructor] Let's go see the new mutations in action. So I'm going to run the project here, and this is going to take us into GraphiQL, and before we do anything, I want to show you the power of GraphQL related to schema. So we've just added this new thing. We've added this set of mutations. So if we go into the docs, we can see right there our GraphQL mutation type, and then we can drill in and can see each of the different mutations we've defined. Create order, start order, et cetera. This is just really, really nice and really handy to have this inspection tool over on the right, which will help you to figure out how you're going to craft things, and if you remember, we defined our order input type.
This is showing us that when we create an order, we're going to provide these parameters. Name, description, customer ID, created. We'll also see that as well right through the syntax completion, which we're going to see now. So next thing we're going to do is we're going to define a mutation. Now up until now, we just defined queries, but you can also define mutations, which you can see here, and one really nice thing when you're using GraphiQL is you can actually have multiple things that you define, multiple mutations and multiple queries, and it will give you a selective dropdown for choosing between them, and we're actually going to see that shortly.
So we're going to create our mutation called createOrder. Now what I'm doing right here is I'm actually defining the mutation with a variable. We haven't used variables up until now, but we're going to see them. So I'm naming a variable called dollar sign order, and that is of type order input, and now because I've defined mutation, it's going to give me syntax completion. So I'm going to have an order, and I'm going to map the order parameter of the mutation to that order variable that I just defined.
Now the next thing it's going to do is ask me what fields I want to pull back when that order gets created because the createOrder actually returns the order. We'll just pull all the fields back. We won't pull back customer, we don't care about that. We'll just pull back created. All right, so next, we're going to define our variables. And if you haven't really worked with GraphiQL before, you're going to see how to do that right now. And this is where the syntax completion is really nice. So you can see above that for create order, I defined this order variable, and here is where I'm actually going to put what the values are, so I've got my name.
So I'll call that test order. I've got my description. Customer ID, let's just use customer ID of one, which is one of the existing customers, and then for created, I can just put a date. So I'll just say one, one, 2018, five o'clock p.m.. Okay, so if everything works, I should be able to create my order, now when I go to execute, you can see here that it says it created for me an order, and I didn't supply it an ID, so I know that that ID got created, and I got back the order that was just created.
But let's verify another way, and I mentioned how we can do multiple things in GraphiQL. So what we'll do is we'll also define a query. We'll call that getOrders, and we'll tell it to query the orders and pull back let's say the ID, the name. We'll pull everything, description, customer, created. So now when I go to run...
Oh, yes, that's just an error, which I'm going to fix, but this is also the beauty of GraphiQL that you can see here is that it's actually going to help me and tell me that in this case, I have no parameter. Now I made another mistake. We're going to fix that as well. So I specified a customer, but I didn't specify the fields of the customer that I want. So we'll just pull the name because again this is a graph. So now when I go to click run, you can see that I actually get two options here, and this is showing what I just described to you, that we can actually have both a mutation and a query, and we can name them, and we can choose between them.
So I run getOrders, so now you can see that I have my test order, and I can see that that was created for KinetEco, and that was because I specified customer ID of one. Let's go look at our next mutation, which is going to update the order status. Now, in order to test it, we'd like to see what the order status is. So let's go over to our getOrders query and specify that, oh, there's no status here. That's because we've not defined the status on our order type.
Okay, that'll be really easy for us to fix. So let's go do that. So we'll close the browser, we'll come over to our order type, and we're going to add a new field. Now, enums are not magically handled. So the way we're going to do this is we're going to use a field overload that allows us to specify the order status' enum as the type similar to what we did for the customer, and we're going to call it status, and then what we're going to do is implement our resolve, and it's important to mention that even though we haven't been specifying resolve for everything, that's just a syntactic sugar.
Behind the scenes, every single field has to be resolved. So in this case off of the context, we're going to get access to the status. Now that we've done that, we can go back to GraphiQL, and we should see the status show up. So let's go down to getOrders, and we can see, there's status, so now if we run getOrders, we see that we're getting back the status. Okay, great, so let's go create our mutation.
So our mutation in this case is going to be called startOrder, and it is going to take an ID of type string. And then we will have startOrder, pass in the order ID, and we'll pull back the ID and the status, which will show us that the status was indeed changed. Then the only other thing we're going to need to do is to plug in an ID, which that mutation will use.
So I'm going to copy this ID over here, and I'm going to come down into my query variables, and I'm going to add a new query variable called ID. And this is really nice because you can create as many variables as you want, name them whatever you want them to be. This is one of the really cool things about GraphiQL. So now if everything has worked, I should be able to go here and start the order, and I can see now that it's showing me that the status is processing, but let's go verify that another way.
Let's just go look and query against all of the orders, and sure enough, we can see that it is now in a state of processing. So we've just seen how mutations can work and how we can have multiple mutations on our different types using GraphQL and graphql.net.
- Creating a new GraphQL project
- Exposing a new GraphQL API
- Enabling and creating mutations
- Updating and configuring the schema
- Enabling subscriptions
- New GraphQL.NET schema classes
- Creating the OrderEventType