The underlying AWS mobile CLI used in this course has changed it's API. If you're starting to learn AWS, you may want to try the latest course. We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "Creating Items with GraphQL in React" Lesson
[00:00:00]
>> Steve Kinney: We have a few more things that we probably wanna do. We probably wanna go ahead figure out how to create a grudge. I will leave removing and updating as exercises reader. But we'll get few more things done. We'll get how to actually create one. And then, we'll also figure out this real time part, like how do we subscribe?
[00:00:18] One of the things Amplify gives us out of the box is the ability to subscribe to changes to the database. So rather than having to repeatedly fetch, we can actually just get in them in place. And so, every time a new one comes in, we will be notified, we can update the UI appropriately.
[00:00:34] And I mean, who doesn't like real time? Cool, so we're gonna need a new GaphicUL query for this.
>> Steve Kinney: This one, we'll call it export const_CreateGrudge.
>> Steve Kinney: Again, you could theoretically name this and the next part whatever you want. This one
>> Steve Kinney: Is a mutation.
>> Steve Kinney: It's going to be CreateGrudge.
[00:01:01] And it's going to, before, when we were doing the playground, we were basically hardcoded in who had wronged us and what they did. This is obviously a dynamic web application where we want our users to tell us who hurt you. So we'll go ahead, and this will take in some arguments.
[00:01:16] And the way that arguments work in GraphQL is we basically say what we wanna call with the dollar sign. This is gonna be the kind of variable in this case. Person. If, from our application, we get something that does not meet this type, it will error before we even send the request.
[00:01:32] We'll know immediately. We'll say that the deed is a string.
>> Steve Kinney: And avenged. This Boolean. So we're expecting, before we go ahead and try to run the mutation, this is what we're expecting the React application to hand us. And if it doesn't, we're gonna have strong feelings and words about that.
[00:01:55] So when we get those three things in, then we'll call the actual createGrudge mutation
>> Steve Kinney: And we'll say we'll pass the person. Whatever they handed us is the person.
>> Steve Kinney: We'll say that deed is whatever they passed us in as the deed.
>> Steve Kinney: And then, avenged is whatever they passed us in as avenged.
[00:02:22]
>> Steve Kinney: Now, if you don't want your UI to do that, we can say this is false all the time. Later, we'll learn actually how to have default properties in GraphicQL as well, or at least in the version. All right, when that comes back, I want the ID, cuz that's gonna get generated by the server.
[00:02:36] The person, the deed, and whether or not they were avenged, right? So we'll take in two strings and a Boolean. We'll pass those off to GraphQL, and we'll get back the fully formed model with the ID in place.
>> Steve Kinney: All right, so let's go ahead and modify add grudge.
[00:02:57]
>> Steve Kinney: Right now, add grudge just puts stuff in state. We don't actually want to get rid of that, because we will eventually be doing that. We'll say api.graphql.
>> Steve Kinney: And see, that was added. Visual Studio Code did me a favor and figured I was using it. This is a great feature that works 50% of the time.
[00:03:18] I used it, so it added it to my imports automatically. But you notice I didn't trust it enough not to check. Cool, so we get the response, just like we did before.
>> Steve Kinney: And we'll get our new grudge, which will be response.data.createGrudge.
>> Steve Kinney: And this will be the new grudge this time.
[00:03:52]
>> Steve Kinney: Which we'll add to the top of the array.
>> Steve Kinney: All right, let's take it for a spin.
>> Steve Kinney: So we've got, we also didn't catch our promise.
>> Steve Kinney: Let's take a look at the data.
>> Steve Kinney: Of course, a null value.
>> Steve Kinney: Yeah, we need to pass in the grudge.
[00:04:24] All right, so here, we have the grudge. And we're saying hey, we're gonna make all these things in the database. But then, we never actually handed that object in. So we'll go ahead and we'll pass that in. The first argument is what query do you want to run.
[00:04:35] The second one is what is the object that we wanna pass in.
>> Steve Kinney: Thank god for autocomplete.
>> Steve Kinney: Cool, and it's been added. And just to verify that it's in the database, we will go ahead and refresh, and you see that it's persisted. So now, we get in there.
[00:04:54] We have the ability to fetch all of them. We have the ability to create one.