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.
Hey Dean, yes there's a way to easily do this using the AWS Amplify CLI. A quick demo video for using multiple environments is at https://www.youtube.com/watch?v=z4y705Ficwk, & the docs are at https://aws-amplify.github.io/docs/cli/multienv?sdk=js.
There's also an egghead lesson on how to create the AppSync APIs using the Amplify CLI -> https://egghead.io/lessons/react-building-aws-appsync-apis-using-the-aws-amplify-cli
Would aws-appsync-react library also work with react native?
Andra, yes this all works exactly the same with React Native
FWIW, looks like the new version of react-apollo (anything over 2.4) breaks with the code in this series.
You have to use npm install -S react-apollo@2.4
more info here: https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/448
For anyone seeing this more recently and dont want to follow that thread, react-apollo 2.5.8 seems to work as well. Anything 3+ breaks for the stated reasons in the above linked github issue.
Is there some information on how to incorporate various environments? Right now, it assumes just one, but that isn't practical as there is a dev/qa/staging -> prod environment, possible. Does that mean we'd have to create one appsync api for each environment?