AWS の開始方法

React アプリケーションの構築

AWS Amplify を使用してシンプルなウェブアプリケーションを作成する

モジュール 4: GraphQL API とデータベースを追加する

このモジュールでは、Amplify CLI とライブラリを使用して、アプリに GraphQL API を設定して追加します。

はじめに

アプリを作成して認証を設定したところで、API を追加しましょう。

このモジュールでは、Amplify CLI とライブラリを使用してアプリに API を追加します。作成する API は GraphQL API で、Amazon DynamoDB (NoSQL データベース) によってサポートされる AWS AppSync (マネージド GraphQL サービス) を利用します。(GraphQL の概要については、このページにアクセスしてください)。

作成するアプリは、ユーザーがメモを作成、削除、一覧表示できるようにするメモアプリです。この例から、人気のある CRUD + L (作成、読み取り、更新、削除、一覧表示) アプリケーションの多くを構築する方法がよく分かります。

学習内容

  • GraphQL API を作成してデプロイする
  • API と対話するためのフロントエンドコードを記述する

主要な概念

API – 複数のソフトウェア仲介者間の通信および相互作用を可能にするプログラミングインターフェイスを提供します。

GraphQL – アプリケーションの型付き表現に基づくクエリ言語とサーバー側 API の実装。この API 表現は、GraphQL 型システムに基づくスキーマを使用して宣言されます。(GraphQL の詳細については、このページにアクセスしてください)。

 所要時間

15 分

 使用するサービス

実装

  • GraphQL API とデータベースを作成する

    a.アプリディレクトリのルートから次のコマンドを実行して、GraphQL API をアプリに追加します。

    amplify add api
    
    ? Please select from one of the below mentioned services: GraphQL
    ? Provide API name: notesapp
    ? Choose the default authorization type for the API: API Key
    ? Enter a description for the API key: demo
    ? After how many days from now the API key should expire: 7 (or your preferred expiration)
    ? Do you want to configure advanced settings for the GraphQL API: No, I am done.
    ? Do you have an annotated GraphQL schema?  No
    ? Do you want a guided schema creation?  Yes
    ? What best describes your project: Single object with fields
    ? Do you want to edit the schema now? Yes

    b.テキストエディタで GraphQL スキーマを開きます。amplify/backend/api/myapi/schema.graphql

    次のスキーマでファイルを更新します。

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

    c.ファイルを保存します。次に、コマンドラインに戻り、Enter キーを押して API 設定手順を完了します。

  • C: API をデプロイする

    API がローカルで設定されたので、今度はそれをデプロイします。これを行うには、Amplify push コマンドを実行します。

    amplify push --y

    これは 3 つのことを行います。

    1. AppSync API を作成する
    2. DynamoDB テーブルを作成する
    3. API のクエリに使用できる src/graphql にあるフォルダにローカル GraphQL 操作を行う

    アカウントで GraphQL API をいつでも表示するには、次のコマンドを実行します。

    amplify console api
    
    > Choose GraphQL
    

    アカウントで Amplify アプリをいつでも表示するには、次のコマンドを実行します。

    amplify console
  • API と対話するためのフロントエンドコードを記述する

    バックエンドがデプロイされたので、ユーザーがメモを作成、一覧表示、削除できるようにするコードを記述しましょう。

    src/App.js を次のコードで更新します。

    import React, { useState, useEffect } from 'react';
    import './App.css';
    import { API } from 'aws-amplify';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
    import { listNotes } from './graphql/queries';
    import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
    
    const initialFormState = { name: '', description: '' }
    
    function App() {
      const [notes, setNotes] = useState([]);
      const [formData, setFormData] = useState(initialFormState);
    
      useEffect(() => {
        fetchNotes();
      }, []);
    
      async function fetchNotes() {
        const apiData = await API.graphql({ query: listNotes });
        setNotes(apiData.data.listNotes.items);
      }
    
      async function createNote() {
        if (!formData.name || !formData.description) return;
        await API.graphql({ query: createNoteMutation, variables: { input: formData } });
        setNotes([ ...notes, formData ]);
        setFormData(initialFormState);
      }
    
      async function deleteNote({ id }) {
        const newNotesArray = notes.filter(note => note.id !== id);
        setNotes(newNotesArray);
        await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
      }
    
      return (
        <div className="App">
          <h1>My Notes App</h1>
          <input
            onChange={e => setFormData({ ...formData, 'name': e.target.value})}
            placeholder="Note name"
            value={formData.name}
          />
          <input
            onChange={e => setFormData({ ...formData, 'description': e.target.value})}
            placeholder="Note description"
            value={formData.description}
          />
          <button onClick={createNote}>Create Note</button>
          <div style={{marginBottom: 30}}>
            {
              notes.map(note => (
                <div key={note.id || note.name}>
                  <h2>{note.name}</h2>
                  <p>{note.description}</p>
                  <button onClick={() => deleteNote(note)}>Delete note</button>
                </div>
              ))
            }
          </div>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    アプリには 3 つの主要な機能があります。

    1. fetchNotes - この関数は、API クラスを使用してクエリを GraphQL API に送信し、メモのリストを取得します。
    2. createNote - この関数はまた、API クラスを使用して変異を GraphQL API に送信します。主な違いは、この関数では、GraphQL 変異に必要な変数を渡して、フォームデータで新しいノートを作成できることです。
    3. deleteNote - createNote と同様に、この関数は変数と共に GraphQL ミューテーションを送信しますが、メモを作成する代わりにメモを削除します。
  • アプリを実行する

    アプリをテストするには、start コマンドを実行します。

    npm start

まとめ

これで、メモアプリができました。 AWS Amplify を使用して、GraphQL API を追加し、作成、読み取り、削除機能をアプリに設定しました。次のモジュールでは、アプリにストレージサービスを追加します。

このモジュールは役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。

ストレージを追加する