[AWS Amplify] Create & Interact with an AWS AppSync GraphQL API with AWS Amplify

In this lesson we’ll create a new GraphQL API using the Amplify CLI and use the Amplify GraphQL API to query data from the new API & render it in our app. We’ll also look at how to perform mutations from the client

 

Add GraphQL:

amplify add api

 

Edit schema:

// schema.graphql

type Toto @model {
  id: ID!
  name: String!
  description: String
  completed: Boolean
}

 

Run:

amplify push

 

Install:

yarn add aws-amplify aws-amplify-react

 

app.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { withAuthenticator } from 'aws-amplify-react'
import { API, graphqlOperation } from 'aws-amplify'

const ListTodos = ` 
  query { 
    listTodos {
      items { 
        id name description completed 
      }
    }
  }
`

class App extends Component {
  state = { todos: [] }
  async componentDidMount () {
    const todoDate = await API.graphql(graphqlOperation(ListTodos))
    this.setState({ todos: todoData.data.listTodos.items })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        {
          this.state.todos.map((todo, i)) => (
            <div>
              <h3>{todo.name}</h3>
              <p>{todo.description}</p>
            </div>
          ))
        }
      </div>
    );
  }
}