You can also watch a video walkthrough:

Before you start, you’ll want to create an AWS Account and have Node.js installed on your computer.

Start by installing AWS Amplify CLI:

npm i -g @aws-amplify/cli

Next configure it with your AWS account:

amplify configure

I just accepted all the default values.

Create a React project:

npx create-react-app my-app --scripts-version=react-scripts-ts

I’m choosing to use the Typescript version, but feel free to use the Javascript one if you prefer.

Add Amplify to the project:

amplify init

Choose the type of app that you’re building: javascript

What javascript framework are you using: react

I kept the default for the rest of the questions and said Yes to use an AWS Profile.

Now that we have Amplify initialized in our project, we can have it create a GraphQL API for us:

amplify add api

Please select from one of the below mentioned services: GraphQL

Choose an authorization type for the API: API Key

Do you have an annotated GraphQL schema? N

Do you want a guided schema creation? Y

What best describes your project: One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)

Do you want to edit the schema now? Y

It should now show you the sample GraphQL schema it setup for you. You can play with the fields if you like and then hit enter in the command line when your done.

To have AWS generate the GraphQL API we have to push up our changes:

amplify push

We can also have it generate some code for us:

Do you want to generate code for your newly created GraphQL API: Y

Choose the code generation language target: typescript

Do you want to generate/update all possible GraphQL operations — queries, mutations and subscriptions: Y

The other questions, I kept the defaults.

When it’s done creating all that stuff, you can go to the AppSync dashboard on AWS and see your API. You can also interact with it in the editor they provide.

Calling a Mutation from React

First configure Amplify by adding the following code to src/index.tsx :

import Amplify from '@aws-amplify/core'

import config from './aws-exports'

Amplify.configure(config)

That gives me some tslint warnings, so I changed my tslint.json to look like this:

{

"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],

"jsRules": {

"object-literal-sort-keys": false

},

"rules": {

"member-access": false,

"object-literal-sort-keys": false,

"ordered-imports": false,

"interface-name": false,

"no-submodule-imports": false,

"no-implicit-dependencies": false,

"no-empty": false,

"jsx-no-lambda": false,

"no-console": false

},

"linterOptions": {

"exclude": [

"config/**/*.js",

"node_modules/**/*.ts",

"coverage/lcov-report/*.js"

]

}

}

We also need to install some packages:

yarn add aws-amplify aws-amplify-react

To make sure everything is working so far, you can run yarn start to see the website and it should display a screen that says Welcome to React.

Let’s add src/Form.tsx which we will use to type in the name to create a blog:

import * as React from "react"; interface State {

name: string;

} interface Props {

onSubmit: (formValues: State) => void;

} export class Form extends React.PureComponent<Props, State> {

state = {

name: ""

}; handleChange = (e: any) => {

const { name, value } = e.target;

this.setState({ [name]: value } as any);

}; render() {

return (

<form

onSubmit={async e => {

e.preventDefault();

this.props.onSubmit(this.state);

}}

>

<h3>Create Blog</h3>

<input

name="name"

placeholder="name"

value={this.state.name}

onChange={this.handleChange}

/>

<button type="submit">save</button>

</form>

);

}

}

Now let’s render that inside src/App.tsx and use the Connect component from aws-amplify-react to call the createBlog mutation:

import * as React from "react";

import { Connect } from "aws-amplify-react";

import { graphqlOperation } from "aws-amplify";

import { createBlog } from "./graphql/mutations";

import { Form } from "./Form"; export default class App extends React.PureComponent {

render() {

return (

<div style={{ textAlign: "center" }}>

<Connect mutation={graphqlOperation(createBlog)}>

{({ mutation }: any) => (

<Form

onSubmit={async input => {

const response = await mutation({

input

});

console.log(response);

}}

/>

)}

</Connect>

</div>

);

}

}

aws-amplify-react doesn’t have Typescript definitions, so we have an extra step to fix that. Create src/@types/aws-amplify-react.d.ts then inside put:

declare module "aws-amplify-react";

Then run yarn start again and you can see our form and you can fill it out. When you hit save, it will make a request to our AWS GraphQL API and create a blog.

Calling a Query

Create src/Blogs.tsx and put the following inside it:

import * as React from "react";

import { graphqlOperation } from "aws-amplify";

import { Connect } from "aws-amplify-react"; import { listBlogs } from "./graphql/queries"; export class Blogs extends React.PureComponent {

render() {

return (

<Connect query={graphqlOperation(listBlogs)}>

{({ data: { listBlogs: blogs } }: any) => {

if (!blogs) {

return null;

} return (

<div>

{blogs.items.map((b: any) => (

<div key={b.name}>{b.name}</div>

))}

</div>

);

}}

</Connect>

);

}

}

We use the Connect component again, but this time to call the listBlogs query. Render that inside src/App.tsx :

import * as React from "react";

import { Connect } from "aws-amplify-react";

import { graphqlOperation } from "aws-amplify";

import { createBlog } from "./graphql/mutations";

import { Form } from "./Form";

import { Blogs } from "./Blogs"; export default class App extends React.PureComponent {

render() {

return (

<div style={{ textAlign: "center" }}>

<Connect mutation={graphqlOperation(createBlog)}>

{({ mutation }: any) => (

<Form

onSubmit={async input => {

const response = await mutation({

input

});

console.log(response);

}}

/>

)}

</Connect>

<Blogs />

</div>

);

}

}