AWS Amplify を使って React クライアントから AppSync に認証リクエストをなげる

$ npm install -g create-react-app
$ create-react-app amplify-sample

$ cd amplify-sample
$ yarn start

$ npm install -g @aws-amplify/cli
$ amplify configure

$ amplify init
$ amplify push

import Amplify from 'aws-amplify';

Amplify.configure({
    Auth: {
        // REQUIRED - Amazon Cognito Identity Pool ID
        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', 
        // REQUIRED - Amazon Cognito Region
        region: 'XX-XXXX-X', 
        // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: 'XX-XXXX-X_abcd1234',
        // OPTIONAL - Amazon Cognito Web Client ID
        userPoolWebClientId: 'XX-XXXX-X_abcd1234', 
    }
});

$ amplify add api

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

$ amplify push

mutation create {
    createCity(input:{
    name:"fukuoka"
    description:"nice food"
  }){
    id name description
  }
}

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

query filter {
  listCitys(filter:{
    description:{
      contains:"food"
    }
  }){
    items{
      id name description
    }
  }
}

$ yarn add aws-amplify aws-amplify-react

...省略...
import Amplify from "aws-amplify";
import config from "./aws-exports";
Amplify.configure(config)

...省略...

...省略...
import { API, graphqlOperation } from "aws-amplify";

const ListCities = `
query list {
  listCitys {
    items{
      id name description
    }
  }
}
`;

class App extends Component {
  async componentDidMount() {
    const cities = await API.graphql(graphqlOperation(ListCities))
    console.log('cities:', cities)
  }
  ...省略...

...省略...
class App extends Component {
  state = {cities: []}
  async componentDidMount() {
    const cities = await API.graphql(graphqlOperation(ListCities))
    console.log('cities:', cities)
    this.setState({cities: cities.data.listCitys.items})
  }
  render() {
    return (
      <div className="App">
        {
          this.state.cities.map((content, index) => (
            <div key={index}>
              <h3>{content.name}</h3>
              <p>{content.description}</p>
            </div>
          ))
        }
      </div>
    );
  }
...省略...

...省略...
const CreateCity = `
mutation($name: String!, $description: String) {
    createCity(input:{
    name:$name
    description:$description
  }){
    id name description
  }
}
`
...省略...

...省略...  
class App extends Component {
  state = {cities: [], name:"", description:""}
  async componentDidMount() {
    ...省略...
  }

  onChange = e => {
    this.setState({[e.target.name] : e.target.value})
  }


  //ここが graphQL を叩く部分
  createCity = async() => {
    if ((this.state.name === '') || (this.state.description === '')) return 
    const city = {name: this.state.name, description: this.state.description}
    try {
      const cities = [...this.state.cities, city]
      this.setState({cities, name:"", description:""})
      await API.graphql(graphqlOperation(CreateCity, city))
      console.log('success')
    } catch (error) {
      console.log('error: ', error)
    }
  }

  render() {
    return (
      <div className="App">
        <div>
          <input value={this.state.name} name="name" onChange={this.onChange} />
          <input value={this.state.description} name="description" onChange={this.onChange} /> 
          <button onClick={this.createCity}>Create City</button>
        </div>

    ...省略...

const SubscribeToCities = `
subscription {
  onCreateCity {
    id name description
  }
}
`;

...省略...
  async componentDidMount() {
    const cities = await API.graphql(graphqlOperation(ListCities))
    console.log('cities:', cities)
    this.setState({cities: cities.data.listCitys.items})

    //Cityが作られたイベントを購読
    API.graphql(
      graphqlOperation(SubscribeToCities)
    ).subscribe({
      next: (eventData) => console.log('eventData: ', eventData)
    });
  }
...省略...

...省略...
    //Cityが作られたイベントを購読
    API.graphql(
      graphqlOperation(SubscribeToCities)
    ).subscribe({
      next: (eventData) => {
        const city = eventData.value.data.onCreateCity
        const cities = [...this.state.cities.filter(content => {
          return ((content.name !== city.name) && (content.description !== city.description))
        }), city]
        console.log('eventData : ', eventData)
        this.setState({cities})
      }
    });
...省略...

$ amplify add auth
$ amplify push

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

...　省略 ...

export default withAuthenticator(App, {includeGreeting: true});

$ amplify update api
? Please select from one of the below mentioned services GraphQL
? Choose an authorization type for the API Amazon Cognito User Pool

// export default withAuthenticator(App, {includeGreeting: true});
export default App;