Adding a GraphQL API to a React Native App with AWS AppSync & AWS Amplify

Instructor: [00:01] To get started we'll first create a new React Native project using react native init. Once the project has been created, we'll change into the new directory and then install AWS Amplify. With our React Native project set up, we can now run amplify init to initialize a new AWS Amplify project.

[00:32] For the project name, either specify a name or take the default. Next you can choose a name for the current environment you're working in. Next choose the type of editor you'll be using, then you can use the defaults for the rest of the options.

[00:57] Next you'll be prompted for an AWS profile. Either choose an existing AWS profile that you already have configured or create a new AWS profile. Next we'll add the AWS App Sync GraphQL API by adding the amplify add API command.

[01:17] For the type of service, we'll choose GraphQL. For the API name, provide an API name or choose the default. For the authorization type, choose API key.

[01:27] Since we do not have an annotated GraphQL schema yet created, we'll choose no. When prompted if we'd like to have a guided schema creation, we'll choose yes. For the type of project, we'll choose single object with fields.

[01:44] When asked if we'd like to edit the schema, we'll choose yes to go ahead and edit the schema now. Here we're given the basic schema that is set to a type of to do with an ID, a name, and a description. The type of app we'll be creating is a books app that keeps up with different books that we'd like to read or have read. We'll update the schema to be a type of book and add a new field called completed that is set to a Boolean.

[02:10] Next we'll save the schema and jump back to the command line. Now that our GraphQL API is configured locally, we can run amplify push to create the resources in our account.

[02:28] Next we're prompted if we'd like to generate code for the new GraphQL API. If we choose yes then queries, mutations, and subscriptions will be created for us locally that we can then use in our React Native app. For the language I'll choose JavaScript and then choose the defaults for the rest of the options.

[02:55] Once the API has been created, we can visit console.aws.amazon.com and search for AWS App Sync. In the App Sync API console, we can then click on the API that we just created. In the API dashboard, click on the queries link in the left hand menu. Here we can test out queries and mutations against our API.

[03:32] The first operation that we'll create is a create book mutation. This will take in a name and return a name and an ID. We can also perform queries.

[04:09] Here I'll perform the list books query that returns an items array that will return an ID, a name, and a completed value for every item in the array. For documentation around what queries, mutations, and subscriptions are available, we can click the docs menu in the right hand side of the screen.

[04:49] Next we'll update the React Native app to perform queries against our API. In our text editor let's open up index.js and app.js. In index.js we'll configure our React Native application to recognize our Amplify credentials.

[05:09] We'll import the Amplify project from AWS Amplify, the configuration that was created for us in AWS exports by the CLI. Then we'll call amplify.configure, passing in the config. In app.js we'll import API and GraphQL operation from AWS Amplify.

[05:41] Next we'll import the list books query that was created for us by the CLI. In our class we'll create an initial state of books and set it to an empty array. In component did mount, we'll make the API call. We'll call API.GraphQL, passing in the list books GraphQL operation and set it to a variable called book data.

[06:27] We'll then call this.setState, setting the books array to the value of the book data.data.listbooks.itemsarray. Finally in our UI we'll delete the instructions variable and then map over the books array, returning the book name for every item in the array.

[07:12] To test everything out, we'll open our CLI and run React Native run iOS or React Native run Android. When the app loads, we'll see that the data from our API is being rendered to the screen. In this example we've only called API.GraphQL, passing in a query, but you can also pass in subscriptions and mutations as well. For more information, check out the AWS Amplify documentation.