Create & Interact with an AWS AppSync GraphQL API with AWS Amplify
In this lesson we’ll create a new GraphQL API using the Amplify CLI and use the Amplify GraphQL API to query data from the new API & render it in our app. We’ll also look at how to perform mutations from the client
Instructor: [00:01] To create an AWS AppSync API, we can run the command amplify add api. For the type of service, choose GraphQL. Next, we're prompted to give the API a name. I'll give mine a name of amplifyTodoApp.
[00:18] For the authorization type, we'll choose API key. When we're asked if we have an annotated GraphQL schema, we'll choose No. If we'd like to have a guided schema creation, we'll choose Yes.
[00:32] For what best describes our project, we're going to choose a single object with fields. Next, we're given an option to go ahead and edit the schema. Choose Yes. We're given an example todo GraphQL schema. We'll take the existing schema and add a new property of completed and then save the file.
[00:53] Once the file's been saved, jump back to the command line and press Enter. Now the resources have been saved locally and we can run amplify push to create the resource in our account.
[01:13] Once amplify push has successfully completed, open the AWS console. From the AWS console, search for "AWS AppSync" so we can go ahead and take a look at the new API that we just created.
[01:34] In the API dashboard, you can click on Schema to take a look at the schema that's been auto-generated for us.
[01:48] Next, click on Query so we can begin executing queries and mutations against the API. The first thing we'd like to do is create a new todo. We'll create a mutation called create. To view the API documentation, you can click on the Docs link on the right side of the screen.
[02:03] When we click on Mutations, we see that we have three different types of mutations, createTodo, updateTodo, and deleteTodo. createTodo takes an input with a name, description and completed properties.
[02:34] To execute the mutation, we can click on the orange Play button.
[02:49] Now that we've created a couple of items, let's perform a query. We'll perform the listTodos query that returns an items array. We'll then return the ID, the name, the description, and the completed values for each todo in the array.
[03:27] Now that we've populated our API with a little bit of data, let's query for the data from our React app. The first thing we'll do is that we'll import API and graphqlOperation from AWS Amplify. Next, we'll define our listTodos query to return the ID, the name, the description, and the completed properties for every item in the todos array.
[04:03] In the class, we'll create some initial state to hold the todos array and set it as an empty array. We'll create a componentDidMount life cycle method where we'll call API.graphql, passing in the listTodos graphqlOperation.
[04:37] Once the data's returned from our API, we'll call this.setState, updating the todos array with the data returned from the API. In the render method, we'll map over the todos array, showing the todo name and the todo description.
[05:14] Now we're ready to run the app. I'll go ahead and open the terminal and run npm start. If everything is working correctly, we should see the todos on our screen.