🚀

【更新版】とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築 (疎通確認編)

2023/11/06に公開

React

Amplify

tech

導入

前に書いた記事（とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築）の更新版です。
Cloud9にReactプロジェクトを作成してAmplifyを構築して疎通確認するまでの手順をまとめました。前回記事からの変更点は要点ごとに記事を分けたことです。

留意事項

リージョン：オレゴン（us-west-2）
- リージョンは↑で統一しているので、以降の手順を進める際にはリージョンをオレゴン（us-west-2）で進めます
Reactのプロジェクト名：sampleapp
- 全て↑のフォルダ配下で行います

構成

最終的な構成は以下の通りです。

ReactにApmlifyのライブラリを追加

前回までの記事で構築したReactプロジェクトsampleappの配下にターミナルで移動します。
React側でAmplifyの機能を利用するためのライブラリを追加します。追加はyarnで行います。

yarn add aws-amplify aws-amplify-react

ライブラリの追加後、sampleapp/src/index.jsに以下を追加します。

import { Amplify } from 'aws-amplify'
import config from "./aws-exports";
Amplify.configure(config)

追加後のindex.js全体は以下の通りです。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Amplify } from 'aws-amplify'
import config from "./aws-exports";
Amplify.configure(config)

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

疎通用のApp.jsに書き換え

今回は疎通できればOKなので、sampleapp/src/App.jsを全て消して、以下に書き換えます。

import { Component } from 'react';
import './App.css';
import { API, graphqlOperation } from 'aws-amplify';
import * as query from './graphql/queries';
import * as subscriptions from './graphql/subscriptions';
import * as mutations from './graphql/mutations';

class App extends Component {

  state = {
    todos: [],
    statusCode: 0,
    returnMessage: '',
  }
  
  subscribeTodo = () => {
    try {

      API.graphql({
        query: subscriptions.onCreateTodo,
      }).subscribe({
        
        // 登録されたデータと既に登録済みデータを「登録と同時に」取得
        next: async() => {
          const listTodo = await API.graphql(graphqlOperation(query.listTodos));
          const tmpList = listTodo.data.listTodos.items;
          console.log(tmpList);
          var inputList = [];
          // 型誤りエラーのため明示的にinputTodoへ詰め替え
          tmpList.forEach((element) => {
            var inputTodo = {
              id : element.id,
              name : element.name,
              createdAt : element.createdAt,
              updatedAt : element.updatedAt
            };
            inputList.push(inputTodo);
          });
          const param = {
            msg: 'test',
            getList: inputList
          };

          // Lambdaの呼び出し
          const result = await API.graphql(graphqlOperation(query.sampleQuery, {param: param}));
          console.log(result.data.sampleQuery);
          this.setState({
            statusCode: result.data.sampleQuery.statusCode,
            returnMessage: result.data.sampleQuery.returnMessage,
            todos: result.data.sampleQuery.todoList,
          })

        },
        error: (err) => {
          console.log("subscription error : ", err);
        }
      });
    } catch (e) {
      console.log("createTodo error : ", e)
    }
  }

  createNewTodo = async() => {
    // 新規登録 mutation
    const todo = {
      name: "Front Random Number " + Math.floor(Math.random() * 100),
    }

    // 登録処理
    try {
      await API.graphql(graphqlOperation(mutations.createTodo, { input: todo }))

    } catch (e) {
      console.log("createTodo error : ", e)
    }
  }

  render() {
    this.subscribeTodo()
    return (
      <div className="App">
        <p>statusCode: {this.state.statusCode}</p>
        <p>returnMessage: {this.state.returnMessage}</p>
        <button onClick={this.createNewTodo}>Add Todo</button>
        <div>
          {this.state.todos.map((todo) => <p key={todo.id}>{todo.name} ({todo.createdAt})</p>)
          }
        </div>
      </div>
    );
  }
}

export default App;

後はyarnからReactを開始します。
（Cloud9の作成時にメモリを最小構成にした場合は、途中でメモリが上限に達して起動までに時間がかかります）