Building AWS AppSync APIs using the AWS Amplify CLI

Instructor: [00:01] In addition to creating and managing our AppSync APIs from the AWS console, we can also do so using the aws-amplify CLI. The first thing we'll do is we'll install the CLI by running npm install -g @aws-amplify/cli.

[00:21] Once the CLI has been installed, we'll run amplify configure to configure the CLI with the user from our AWS account. This should open up the AWS console. Once the console is open, sign into your account and jump back to the command line.

[00:38] Next, we'll be asked to specify an AWS region, and then the username for the new user that we're about to create.

[00:54] Next, this should open up the IAM console on the AWS dashboard. Here, we can accept all of the defaults by clicking next permissions, next review, and then create user. Once the user's been created, we'll be given an access key ID and a secret access key.

[01:15] Copy the access key ID to the clipboard and jump back to the command line. Here, we'll paste in the access key ID to the prompt, go back to the AWS console, copy the secret access key, and paste it into the prompt as well.  Finally, we'll be prompted for a profile name for the new user.

[01:46] Now that the CLI has been installed and configured, let's go ahead and create a new React application that we'll use later on to interact with the new API.

[02:01] Once the React application has been created, we'll change into the new directory, and run amplify init to initialize a new Amplify project. Here, we'll be prompted for the default editor, the type of app that we're building, the framework that we're using, the directory path, the distribution directory path, the build command, and the start command.

[02:33] Next, we'll be asked if we'd like to use an AWS profile. We'll choose yes, and choose the profile that we just created. Once the project's been initialized, we can begin adding new services by running amplify add. The first service we'd like to add is the GraphQL API. We'll run amplify add api.

[02:58] For the type of service that we'd like to create, we'll choose GraphQL. For the API name, we'll call the API myRestaurantApp. For the authorization type, we'll choose APIP. When we're asked if we have an annotated GraphQL schema, we'll choose no.

[03:13] Next, we're asked if we'd like to have a guided schema creation. We'll choose yes, and for what best describes our project, we'll choose a single object with fields. Now, we're asked if we'd like to edit the schema. 

[03:25] We'll choose yes, and this should open up the schema into our editor of choice. For the schema, we'll create a schema with a type of restaurant, that has an ID, a name, a description, and a location field. Once you've updated the schema, click save and jump back to the command line.

[03:47] Now that the GraphQL configuration is complete, we can run amplify push to create the new AWS AppSync GraphQL API in our account.

[04:03] Now that the API has been created, let's jump back to the AWS console to view the API in our account. From within the AWS account, double-check to make sure you're in the same region in which you created your API.

[04:17] Next, click on AWS AppSync, or search for AWS AppSync in the AWS services search bar. In the AppSync dashboard, click on the name of the API that we just created. To test out the API, click on queries, so we can begin running queries and mutations against the API. The first operation we'd like to execute is a mutation to create a new restaurant.

[04:46] To view the API documentation, click on the docs link in the right corner of the screen. Here, we see that create restaurant takes an input with a name, a description and a location field. To execute an operation, click on the orange play button.

[05:31] Now that we've created a couple items in our API, let's go ahead and query for those items. The query that we're going to run is list restaurants. List restaurants returns an items array with an ID, a name, a description, and a location for every item in the array. We can also pass in a filter argument for filtering and searching.

[06:15] Now that the API has been created, let's jump back to the React app to begin querying for items within our React application. The first thing we'll need to do is install the aws-amplify library.

[06:33] Once Amplify has been installed, open source/index.js to configure the React application. Here, we'll import amplify from aws-amplify, some configuration that was created for us in aws-exports.js, and then call amplify.configure, passing in the config. In source/app.js, import API and graphqlOperation from aws-amplify.

[07:13] Next, we'll define a query of list restaurants that returns the items array. In the class definition, we'll first create an initial state, with an empty restaurants array. In componentDidMount, we'll query the data from our API, and then call this.setState, updating the restaurants array with the data that's returned from our API.

[08:22] Finally, in our render method, we'll map over the restaurants array, showing the restaurant name for every item in the array. To test everything out, we'll run npm start, and launch the application in our browser. If everything's working correctly, we should see the two restaurants show in our URL.