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 "Adding AppSync to React" Lesson
[00:00:00]
>> Steve Kinney: So we played around with it a little bit in the playground. Now what we're gonna do is actually hook it up to a React application. So this is just branched off of Master. This is from where we started the day earlier. And we're gonna do a few things.
[00:00:13] We're gonna reinitialize Amplify, or AWS Mobile rather. And then we will have taken that absent config that we downloaded at the very beginning of the section and we'll learn how to take existing services, cuz we could spin up an absent database in Amplify. We already did that work, and I kinda wanna highlight that you don't need to create everything, you use Amplify in Amplify.
[00:00:35] You can actually be able to bring other services. So if you already have an S3 bucket, something along those lines, you can actually bring that in as well. So I think it would be a good opportunity to look at that. So do awsmobile init, and I'm gonna say yes to everything.
[00:00:54] Cool.
>> Steve Kinney: And then, real quick, we'll also add in, because this is branched off of a Master before we played with any of this, we'll bring in the AWS Amplifier library and the AWS Amplifier React library as well.
>> Steve Kinney: So say yarn add aws-amplify aws-amplify-react.
>> Steve Kinney: So you get those both in there as well.
[00:01:34] So now if we flip over to our project,
>> Steve Kinney: We'll go in to the index.js, and we've got this very plain starting of a React application. So we'll pull in Amplify from 'aws-amplify', and we'll pull in the configuration object.
>> Steve Kinney: From ./aws-exports, which was made for us by AWS Mobile ANET.
[00:02:12] Now, if we're just setting up a regular, why don't we do amplify.configure and,
>> Steve Kinney: This configuration. And I'm spreading it cuz we're going to add more stuff to it in a second. So what we'll do is, let's.
>> Steve Kinney: Turn off analytics for a second.
>> Steve Kinney: Now, even when we use appsync, you're gonna see it's not highlighted cuz we didn't pull it in from Amplify.
[00:02:53] We're actually gonna custom do that in our code. Let's just start the application up real quick.
>> Steve Kinney: And we've got our application, everything works. So this is just regular Amplify. We're still seeing that, I'll go ahead and turn that off. So we'll bring in,
>> Steve Kinney: Cool. So go ahead and that should be in place now.
[00:03:26] Now we wanna pull in that appsync file that we download earlier, so it's in my downloads folder. And this is what we got from AWSs' appsync webpage when we downloaded it. Now, this is almost good to go, the only big difference is because Amplify is in charge of a lot of things, we do need to name space it.
[00:03:46] So we can actually pull this in and what we'll do is we'll say, const appSyncConfiguration
>> Steve Kinney: I'll paste that. The only thing we need to do to get those working is just preface it with "aws appsync_, right. This way it's like this is not about the S3 bucket or anything this is configuring appsync in particular.
[00:04:14] So we'll save that, we'll verify that everything still works. It works but that nice helpful aslint error is also telling me that you made a thing but you're not using it. So.
>> Steve Kinney: Now could I have changed the .awsx course? Totally, but that file said very clear on the top when we saw it earlier this is auto generated, do not touch.
[00:04:40] So all this one does is combine those two objects. Great, so now we're ready to go into the application itself. And we're gonna pull in a few things. Before when we were working with a Dynamo database, we went ahead and we had an API, and it was api.get, api.push, or post rather.
[00:05:00] We're gonna do a very similar thing cuz there's a similar method that we didn't use. So we'll say import { API } from "aws-amplify';. And we'll also pull in this graphqlOperation. This will take a string of graphql, and it will go ahead and turn into an actual graphql query.
[00:05:27] Now, in a lot of courses you'll see that there's like a definite folder structure, to lay in all your graphql. You'll have your queries, your mutations, all separate. For the purposes of learning together, it can be tricky to figure out what file I'm in, so I'm going to put it all in one file called graphql.js, that sounds like a good name.
[00:05:48] Graphql.js, and in here we'll start with getting a list of all of them. So we'll say export const listGrudges.
>> Steve Kinney: And we'll say that equals, and make it a template string.
>> Steve Kinney: And that will be query listGrudges. We know from before that's items. Those items will be the id, person, the deed, and if they have been avenged or not.
[00:06:26] All right, and so this will service as our very basic graphql query. Let's see if I got it right. And I want to see how the data comes back. And I saw this on the playground but I kind of want to see it in the context of my application to figure out what I need to do to get it into the state.
[00:06:39] So we'll say when the component did mount,
>> Steve Kinney: We will go ahead and do API.graphql, and we'll give that the graphql operation with listGrudges, which we've got to pull in. So let's say import,
>> Steve Kinney: ListGrudges from ./graphql.
>> Steve Kinney: All right, when I come back, we'll get some kind of response and what we'll do for now is we'll simply console log that response.
[00:07:35]
>> Steve Kinney: All right, we'll save it.
>> Steve Kinney: We've got uncaught error.
>> Steve Kinney: So I've got an issue in my query. Let's go take a look at it.
>> Steve Kinney: We forgot that little middle section. So I'll say it's a query called listGrudges, and that will call one more layer of nesting.
[00:08:18]
>> Steve Kinney: Cool, and what I will probably do to better protect myself is be a good a JavaScript citizen and catch my own errors.
>> Steve Kinney: Now I'm not gonna do anything particularly special with it. I'm simply going to catch them and consoler error them. Cool, so now we got this response.
[00:08:38] And the response has data. The data has listGrudges. The listGrudges has items. And in there If we dig down far enough, it is all of the grudges that I made earlier in the playground. So what we'll do next, is we'll just kind of list them onto the page.
[00:08:55] And we know how to do this, at this point. We'll go ahead, and we'll say, const grudges =, this is gonna be response.data.listGrudge.items.
>> Steve Kinney: And we'll set that in state.
>> Steve Kinney: Boom and we can see that they show up instantly, I mean for with a network request. This is the real data in our database, and we have it ready to go.
[00:09:35] And getting it started in our React application was not that difficult with all the abstractions that amplify gives us.