ReactからAPI Gateway + DynamoDBのCRUD操作

概要

ReactからAPI Gateway + DynamoDBのCRUD操作の方法を記載します。
API Gateway,LambdaやDynamoDBの設定は、以下の記事参照ください。

REST APIでDynamoDBのテーブルを操作
https://qiita.com/ayumu__/items/703c4bd9ca2e0e92e623

目次

1. ReactからAPI Gateway + DynamoDBのCRUD操作

ReactからAPI Gateway + DynamoDBのCRUD操作

axiosではなくfetchを使う。結果はコンソールに表示する。

GETメソッド

• ReactからAPI Gateway + DynamoDBのGETメソッドを呼び出すためのコードは以下の通り。
• idをkeyとする。

GETメソッド

    //getメソッド
    async function getDataFromDynamoDB() {
      // const API_ENDPOINT = 'APIのURL';
      const API_ENDPOINT = 'APIのURL?id=${id}'; //idを指定
      
      try {
        const response = await fetch(API_ENDPOINT, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          },
        });
        const getresult = await response.json();
        console.log(getresult)
        return getresult;
      } catch (error) {
        console.error(getresult);
      }
    }

    //呼び出し
    getDataFromDynamoDB();

POSTメソッド

• ReactからAPI Gateway + DynamoDBのPOSTメソッドを呼び出すためのコードは以下の通り。
• dataはAPI Gatewayに送信するデータを含むオブジェクト。

POSTメソッド

    //postメソッド
    async function postDataToDynamoDB(data) {
      const API_ENDPOINT = 'APIのURL';
      
      try {
        const response = await fetch(API_ENDPOINT, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });
        const postresult = await response.json();
        console.log(postresult)
        return postresult;
      } catch (error) {
        console.error(error);
      }
    }

      //dataを定義
      const data = {
          id: "001",
          name: "Hello",
          age: "999",
          address: "Tokyo",
      };

      //呼び出し
      postDataToDynamoDB(data);

PUTメソッド

• ReactからAPI Gateway + DynamoDBのPUTメソッドを呼び出すためのコードは以下の通り。

PUTメソッド

    //putメソッド
    async function updateData(data) {
      // const API_ENDPOINT = 'APIのURL';
      const API_ENDPOINT = 'APIのURL?id=${id}'; //idを指定
      
      try {
        const response = await fetch(API_ENDPOINT, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });
        const putresult = await response.json();
        console.log(putresult)
        return putresult;
      } catch (error) {
        console.error(error);
      }
    }

    //呼び出し
    updateData(data);

DELETEメソッド

• ReactからAPI Gateway + DynamoDBのDELETEメソッドを呼び出すためのコードは以下の通り。
• idを指定しない場合、テーブルを削除する。

DELETEメソッド

    //deleteメソッド
    async function deleteData(id) {
      // const API_ENDPOINT = 'APIのURL';
      const API_ENDPOINT = 'APIのURL?id=${id}'; //idを指定
      
      try {
        const response = await fetch(API_ENDPOINT, {
          method: 'DELETE',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });
        const deleteresult = await response.json();
        console.log(deleteresult)
        return deleteresult;
      } catch (error) {
        console.error(error);
      }
    }

    //idの定義
    const id = "001";
    
    //呼び出し
    deleteData(id);

おわりに

• 次は、UI表示させたり色々していきたいと思います。