Rapid Development on AWS: React, Node.js & GraphQL GraphQL Queries
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 "GraphQL Queries" Lesson
>> Speaker 1: I could go get all the Grudges out of the database. But you saw that I just created the database, so there's nothing in there yet. So let's actually start this little playground here. Let's start by putting some data into the database. So again, changing the data in a graphQL database is called a mutation.
[00:00:21] We're mutating the state. So we'll say mutation. And I have to give it some kind of name. This is, again, what we want to call this mutation. This will be useful when we have more than one on the page. This play button become a drop-down, but you can literally name it sandwich, it doesn't matter.
[00:00:38] The second one is the more important one. This is the mutation from that schema. And so yes, I've named them roughly the same thing, but that is mostly for my own sanity. And if we were to look at this schema, we can see that it takes an input, which is a type of grudge input, or create grudge input.
[00:00:57] Which is basically what are the things that we need in order to make a grudge? Well, we need a person.
>> Speaker 1: And we need a deed.
>> Speaker 1: And we need to say whether or not it's been avenged. And it kinda stinks that I have to put this in by hand right now.
[00:01:19] In a little bit, we'll look at how to actually have default values in AppSync by working with the resolvers. But we'll start with this for now. And so, this is how we go about creating one. And then, what do we want back? Well, we'll have an ID created for us.
[00:01:33] We'll have the person.
>> Speaker 1: We'll have the deed that they did.
>> Speaker 1: And we'll have whether or not it was avenged. We can get all of these back. We can get some of them back. This is just simply what you'll get back from GraphUL after you create the resource.
[00:01:49] So we'll go ahead and we'll hit Play. And you can see that it generated an ID for me. And then, there's all of the things we want in there. Now, if you don't need all of those back for some reason, if you only wanted the ID and you wanna keep the way you had client-side, you can just simply remove properties from here and you just won't get them back.
[00:02:04] They'll still be stored in the database, cuz you passed them in here, but you just won't get them back in the response. Because we wanna be able to get more than one, we'll also go ahead and create a few more.
>> Speaker 1: And so, for instance, I'll just take the data out in this case, just to verify that it works.
[00:02:33] It's still saved, we're just not getting it back in the response. Who else are we angry at?
>> Speaker 1: Someone who could actually run to second.
>> Speaker 1: That is a true story, I don't wanna talk about it right now, but it's a thing. So I back deed in this case, you'll see that's now returned.
[00:03:08] All right, so we've got three grudges in there. That feels like enough. I mean, I've got a lot more grudges, but these are enough to like test the database. Not to like, we don't need to air all this here. I can pay a therapist for that. All right, so we've got this idea of creating grudges.
[00:03:24] It'd be interesting if we could get a particular grudge. So here, we've got this ID. I'll just copy that real quick. I'm gonna treat myself to copying it with the quotes.
>> Speaker 1: And so, we can make another one, which is a query, right? That's how we get stuff from the database.
[00:03:40] We'll say, get grudge. And again, that is an arbitrary name. I could name it sandwich, I'm not going to. But then, what actual query do we wanna do? That is defined in our schema. See also the very helpful auto complete. And so, we need an ID, and we'll pass this one in.
>> Speaker 1: And from there, we'll say I want the ID back, I want the person, I want the deed, and I want whether or not it was avenged, right? So this is, again, a useful place to play around with if you wanna get comfortable and try stuff out. So now that I have two, I can choose which one I wanna do.
[00:04:15] Which is why I gave them useful names. Otherwise it'd be really difficult. If they're both called sandwich and taco, it's hard. All right, so we'll get back all of those properties. If we didn't need all of them, for whatever view, a lot of times when we have APIs, we basically get whatever the API gives us.
[00:04:31] A lot of the control of what an API gives us in that response is controlled by the person who made the API. In GraphQL, the scheme is defined, but then the consumer is the one that gets to choose what they need back from the APIs. If I don't need whether or not it was avenged for whatever list view, I can just take that off.
[00:04:48] And now, it's not included in the response. All right, so you can do really interesting stuff like that. So I can get a particular one if I know the ID. But if you think about Grudge Point app, there's no point where we're doing that. We're basically fetching that list of all of them.
[00:05:00] So let's talk a little bit about how to get a list of grudges.
>> Speaker 1: So we'll go ahead and take it for a spin. Let's make one called Query. And just to show that they don't have to match with the actual name of the query, we'll do GetAllOfTheGrudges.
>> Speaker 1: It's gonna to call the list Grudges query, but just to prove to you that they don't need to be the same.
>> Speaker 1: So listGrudges. And what that's going to do is it's going to get me an items array. And we'll just start with the person. Now again, this is the same as it is up here.
[00:05:38] If I want the person and the deed, I can add that, and we'll try it out.
>> Speaker 1: All right, so here is all of the people. If I just wanted all of the deeds.
>> Speaker 1: If I wanted the person and whether or not they've revenged, I can do that as well.
>> Speaker 1: Right, I get to choose what data I need for my UI, right? So there are a lot of ways to think about how to encharge GraphQLs. Look at your UI, figure out the properties that you need, and then go ahead and ask just for those properties. The other thing that we have in place, if we look at the schema real quick, go back.
>> Speaker 1: Is that grudge connection. So the grudge connection is how we get that items. That's where items is coming from, it's an array of grudges. And there's also this nextToken, right? And so, if we try it out,
>> Speaker 1: Great, I'm gonna retype. So we'll query_GetAllOfTheGrudges.
>> Speaker 1: And we'll say listGrudges again.
[00:06:53] The magic of autocomplete.
>> Speaker 1: And we say, nextToken. We're gonna be slightly underwhelmed at this point. We'll just give it a shot. It's null.
>> Speaker 1: nextToken is used for pagination. The reason it's null right now is that we have gotten all of them. So there is no next set of them, right?
[00:07:18] But if you were to get all of them, it gives you the place the dynamo left off in to go and pick up from where they went off. So you don't get page 1 of 20, but you can get a certain number, and then you can get a token and say hey, start where I left off and get me the next however many.
[00:07:34] So I can go ahead and I can pass an argument to this list view as well. And through the magic of autocomplete, we'll say limit, and we'll say start me out with two.
>> Speaker 1: So now, I get two, right? And plus this wonderfully unique nextToken. And so now, if I pass this in,
>> Speaker 1: I'll pick up where I left off, right? So out of the box here, you're gonna get pagination. There's ultra filtering, which we're not gonna go into right now. But we get a bunch of stuff for free out of this API. And again, it's all backed by Dino, it's all again like production grade infrastructure, right?
[00:08:24] So it's not like we have a toy app, but I don't know how to transition it off because my website got surprisingly popular. This is all the same AWS stuff that we use at work, or I use at work at SanGrid, and you just get it really quickly.
[00:08:35] So you can test out your ideas and get a working application done incredibly fast. All right, so we've played with it in the database, and even the stuff that I did here is for really reals stored inside of Dynamo. So we go here, we Refresh, we go to Items.
[00:08:54] You can see, I've got these three items. They have the avenged, the deed. These are in my actual database, right? And so, when I go to pull this into my app, I'll actually start out with some sample data in place. So what we'll do is we'll actually transition into a React app, and we'll learn how do we get this GraphQL out of the playground, and how do we get it into our React application?