Connect to AWS AppSync from a React Application

Share this video with your friends

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

Dean

~ 6 years ago

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?

nader dabit(instructor)

~ 6 years ago

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

Andra Malmen

~ 6 years ago

Would aws-appsync-react library also work with react native?

nader dabit(instructor)

~ 6 years ago

Andra, yes this all works exactly the same with React Native

Joe Seifi

~ 5 years ago

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

Michael

~ 5 years ago

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.