The cloud-Native: React with GraphQL API

In general, when we want to create a large Web Application that is fast, scalable, and API based then we can use React with GraphQL( with Appolo client). It takes huge effort to build such large web projects. In this blog post, we will talk about how we can do such projects cloud-native way on React and GraphQL which will take off some of the repetitive works in the traditional approach.

So what are the services we are going to use here from AWS?

1. AWS AppSync for GraphQL API
2. AWS Amplify for web apps
3. AWS DynamoDB for NoSQL DB
4. AWS Cognito for User Management
5. AWS S3 bucket for static files storage

Few pointers for key services:

AWS AppSync: AppSync is a fully managed service for GraphQL API. It can connect to multiple data sources and expose a single URL to the client. Supports authentication and fine-grained control over data. AppSync has four main components.

1. GraphQL Endpoint- A single endpoint URL for the client.
2. GraphQL Schema- A well-defined graphql schema that describes the structure of data as well as operations.
3. Data Sources- AppSync can connect to dynamodb, lambda, Elastic Search as well as any HTTP endpoint to collect data.
4. Resolver- A glue between GraphQL and Data Sources. It is basically tied up with fields in Schema with the data source.

There is three key standout feature:

1. You can define resolver, which acts as a glue between GraphQL and Data sources, in Apache Velocity Template Language (VTL). It can take JSON input and perform basic transformation like adding an extra field or default value for the input. Finally, you can write VTL to transform your GraphQL response as well. Even, you can chain your transformations using Pipeline type resolver.
2. GraphQL subscriptions is another interesting feature where you can open socket with your clients and push data changes immediately.
3. You can utilize the resolver VTL template to create controls over data programmatically using identify, groups, and conditions.

AWS Amplify: Amplify is a managed CLI tool which can help you to create scalable, secure full stack web/mobile application. This is the service that will really offload a lot of work by automation. You can configure your backend using interactive Amplify CLI. There are multiple Amplify libraries that can connect your application with these backends. Under the hood, “Amplify create cloud formation stack based on your input to create resources.”

Two standout benefits of Amplify in terms of React and GraphQL:

1. Fully automated AppSync GraphQL API deployment along with authorization with help of just two commands along with certain CLI inputs.
2. If you go deeper into AppSync Schema design, you can point out that it is really the core of AppSync and can be very messy and error-prone as your application grows. So “With Amplify, you just need to provide item details along with some Annotations provided by Amplify. It will read those annotations and create the AppSync GraphQL schema. It will create Query, Mutations, and Subscription along with Authorization automatically for you.”

Now, let's talk about the web application, I have created during my learning on A Cloud Guru platform. We have built a Quiz App which will let people post the quizzes and others take the quiz to validate their understanding along with Authorization.

QuizApp Architecture

Firstly, You would create your front-end app and run it locally to test React build is working perfectly fine. Let's talk about further steps in detail.

Install Amplify: You can install Amplify using the below command

1. Check node version: node -v should be more than v8.12

2. Install Amplify

npm install -g @aws-amplify/cli

3. Check Amplify

which amplify

4. Launch Amplify

amplify

Host Frontend of App: You just need to be inside your root directory of the web application and run the below command. Use space to select multiple options.

1.Setup project: amplify init

2. Check Amplify project components (would show nothing first time): amplify status

3. Host website to AWS Cloud: amplify hosting add

4. Publish the website: amplify publish

GraphQL API using AppSync: It will add Appsync API into AWS along with a table in DynamoDB based on your backend data source selection.

1. Add GraphQL API: amplify api add

- please select Do you want to configure advanced settings for the GraphQL API Yes and then in further question provide schema file name with path.

2. Push you code into AWS: amplify push

3. Publish API: amplify publish

Authentication Setup: There are various methods you can add your authentication like API Key, IAM, Cognito, and federated auth as well. I have selected Cognito.

1. Add Authentication into your app: amplify auth add

2. Push your auth to AWS: amplify push

3. Update API and selection authentication option: amplify api update

Few important point:

1. Amplify provides certain Application libraries as well which you can inject into your React code like Connect, Cache, graphqlOperation tags.

<Connect query={graphqlOperation(ListQuizQuestions, { quizID: this.props.activeQuiz })}>

Your React tags here….

</Connect>

2. Amplify creates src\aws-exports.js file during above CLI command and keep secrets like API Key, Cognito key. So you should not edit this file as well Do not check-in to Git.

3. Check out the React Component folder to see how we can integrate GraphQL APIs and Authentication into your code.

Application Code Repo:

erankitcs/AWS_AppSync_QuizApp

I have added Terraform code as well for AppSync. You can explore that as well. It's inside the appsync_terraform folder.

As always, you can reach out for any query or feedback.

Video Demo: Watch out for Subscription in action. How one user adds the quiz set and it automatically refreshed for other users immediately.

QuizApp-Amplify and AppSync.mp4

👋 Join FAUN today and receive similar stories each week in your inbox! ️ Get your weekly dose of the must-read tech stories, news, and tutorials.

Follow us on Twitter 🐦 and Facebook 👥 and Instagram 📷 and join our Facebook and Linkedin Groups 💬

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author! ⬇