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とする。
```javascript: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に送信するデータを含むオブジェクト。
```javascript: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メソッドを呼び出すためのコードは以下の通り。
```javascript: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を指定しない場合、テーブルを削除する。
```javascript: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表示させたり色々していきたいと思います。