Introducing AWS AppSync

We'll go through:

• how to create a new GraphQL API
• how to interact with it in the AWS console
• how to access the API from a React application

Our CLI Tool: AWS Amplify

App Features

Creating the React App

create-react-app restaurant-app

# or
npx create-react-app restaurant-app

cd restaurant-app
npm install aws-amplify

npm install -g @aws-amplify/cli

amplify configure

If you'd like a video walkthrough of how to install & configure the AWS Amplify CLI, click here. Now that the CLI is installed & configured, we can initialize a new Amplify project in our React application. From the inside your React application, run the following command:

amplify init

Here, you will be prompted with questions about your application configuration. You can choose your default text editor and the defaults for all of the other options.

Adding the AWS AppSync API

amplify add api

• Please select from one of the below mentioned services: GraphQL
• Provide API name: restaurantapi (or whatever name you'd like)
• 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: Single object with fields

type Restaurant @model {
  id: ID!
  name: String!
  description: String
}

amplify push

• Do you want to generate code for your newly created GraphQL API? Y
• Choose the code generation language target: JavaScript
• Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/*/.js
• Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: Y

Make sure that you are in the same region in which you created your resource by viewing the region in the top right corner of the AWS console.

mutation create {
  createRestaurant(input: {
    name: "Soi"
    description: "Great Thai in Seattle"
  }) {
    id name d
  }
}

query list {
  listRestaurants {
    items {
      id
      name
      description
    }
  }
}

import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

1. Import the APIs from AWS Amplify
2. Import the query definition
3. Create initial state to hold the restaurants array
4. Query for the restaurants array from our API & update the state
5. Display the restaurants array in the React application.

import { API, graphqlOperation } from 'aws-amplify'
import { listRestaurants } from './graphql/queries'

state = { restaurants: [] }
async componentDidMount() {
  try {
    const apiData = await API.graphql(graphqlOperation(listRestaurants))
    const restaurants = apiData.data.listRestaurants.items
    this.setState({ restaurants })
  } catch (err) {
    console.log('error: ', err)
  }
}

// rest of class omitted
render() {
    return (
      <div className="App">
        {
          this.state.restaurants.map((rest, i) => (
            <div style={styles.item}>
              <p style={styles.name}>{rest.name}</p>
              <p style={styles.description}>{rest.description}</p>
            </div>
          ))
        }
      </div>
    );
  }
}

const styles = {
  item: {
    padding: 10,
    borderBottom: '2px solid #ddd'
  },
  name: { fontSize: 22 },
  description: { color: 'rgba(0, 0, 0, .45)' }
}

For the final gist of all of the code for this component, check out this link.

npm start

1. Import mutation definition
2. Create initial state to hold user input values for the restaurant name & description form data
3. Create a method for handling the user input into the form
4. Create a method to call the API & create the mutation
5. Create a form to handle the methods

import { createRestaurant } from './graphql/mutations'

 state = { name: '', description: '', restaurants: [] }

onChange = e => {
  this.setState({ [e.target.name]: e.target.value })
}
createRestaurant = async () => {
  const { name, description } = this.state
  if (name === '' || description === '') return
  try {
    const restaurant = { name, description }
    const restaurants = [...this.state.restaurants, restaurant]
    this.setState({ restaurants, name: '', description: '' })
    await API.graphql(graphqlOperation(createRestaurant, {input: restaurant}))
    console.log('restaurant successfully created!')
  } catch (err) {
    console.log('error: ', err)
  }
}

1. We first check to make sure the form input values are not empty.
2. We then create a new object called restaurant & store the name & description values in the object.
3. Next, we create a new array called restaurants & set the value as a new array containing all previous restaurants in the state as well as the new restaurant object.
4. We call setState to update the UI with the new restaurants array & reset the form fields.
5. Finally, we make the API call, passing in the restaurant variable to the API.graphql graphqlOperation as a variable.

<div style={styles.inputContainer}>
  <input
    name='name'
    placeholder='restaurant name'
    onChange={this.onChange}
    value={this.state.name}
    style={styles.input}
  />
  <input
    name='description'
    placeholder='restaurant description'
    onChange={this.onChange}
    value={this.state.description}
    style={styles.input}
  />
</div>
<button
  style={styles.button}
  onClick={this.createRestaurant}
>Create Restaurant</button>

const styles = {
  // existing styles omitted
  inputContainer: {
    margin: '0 auto', display: 'flex', flexDirection: 'column', width: 300
  },
  button: {
    border: 'none', backgroundColor: '#ddd', padding: '10px 30px'
  },
  input: {
    fontSize: 18,
    border: 'none',
    margin: 10,
    height: 35,
    backgroundColor: "#ddd",
    padding: 8
  }
}

For a final gist for all of the code for this component, click here.

1. Import the subscription definition
2. Initialize the subscription in componentDidMount
3. Remove the subscription in componentDidUnmount

// import the subscription defition
import { onCreateRestaurant } from './graphql/subscriptions'

// initialize the subscription in componentDidMount
async componentDidMount() {
  // other code from this method omitted
  this.subscription = API.graphql(
    graphqlOperation(onCreateRestaurant)
  ).subscribe({
    next: restaurantData => {
      const restaurant = restaurantData.value.data.onCreateRestaurant
      const restaurants = [
        ...this.state.restaurants.filter(r => {
          return (
            r.name !== restaurant.name && r.description !== restaurant.description
          )
        }),
        restaurant
      ]
      this.setState({ restaurants })
    }
  })
}

// remove the subscription in componentWillUnmount
componentWillUnmount() {
  this.subscription.unsubscribe()
}

1. We create a variable to store the restaurant data coming through the subscription.
2. We create a newly updated restaurants array, filtering to make sure there are no duplicate items in case our application is the app creating the mutation. (This implementation checks for duplicate name & descriptions. Ideally, you would have a client ID in which to filter on also stored in the database which would serve as a proper way to filter duplicate items).
3. After the restaurants array is created we reset the state with the new restaurants array.