Connect to AWS AppSync from a React Application
In this lesson, we’ll create a new React web application and connect to our new AWS AppSync GraphQL API, using the AWS AppSync GraphQLclient.
We will install packages from react-apollo, aws-appsync, and aws-appsync-react, and download an AppSync config file from our existing AWS AppSync project to wire up a create-react-app application to AppSync
Instructor: [00:01] Now that we've created our AWS AppSync API, let's go ahead and create a new React application that we'll use to interact with the API. Using create-react-app, we'll create a new React application called TodoApp.
[00:18] After the application has been created, let's go ahead and change into the new directory to install some dependencies. Using either yarn or npm, install aws-appsync, aws-appsync-react, graphql-tag, and react-apollo.
[00:44] After the dependencies have finished installing, go ahead and open up the application in your code editor. The first thing we'll do here is we'll create a new file in our source directory called AppSync.js that will hold our AppSync configuration.
[00:59] Next, we'll open up our AWS AppSync dashboard, scroll to the bottom, and click the download button to download the AWS AppSync.js config file.
[01:12] After the file has been downloaded, open it up in your code editor, copy the contents, and past it into the new ap AppSync.js file that we just created in our new project.
[01:24] Next, open up source/index.js. We'll import client from aws-appsync, ApolloProvider from react-apollo, Rehydrated from aws-appsync-react, and then the AppSync configuration that we just created.
[02:04] Next, we'll create a variable called client by creating a new AppSync client, passing in the URL, region, and authentication information for the client configuration.
[02:47] Next, we'll create a new component called withProvider that will be the new entry point for our application. This will contain the ApolloProvider wrapping the Rehydrated component from aws-appsync-react, which then wraps the main app component.
[03:08] Finally, for the client prop to ApolloProvider, pass in the new client variable that we just created.
[03:20] For the component argument to ReactDOM.render, replace the app component with the new withProvider component that we just created. To make sure that everything is working correctly, we'll go ahead and run the React application by running npm-start.
[03:41] If the React app loads and there aren't any errors, then you're ready to go to the next step.