質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

Vue.jsのaxios.deleteが上手く動きません。(vue.js lambda(node.js) API Gateway dynamoDB)

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,593

score 20

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Vue.js → AWS( API Gateway → Lambda(node.js) → DynamoDB )という構成で
axios.deleteメソッドが上手く動かず、データが消えません。
解決方法をご教示ください。

ソースコード

vue.js
<body>
// html前後割愛
<tbody>
  <tr v-for="person in persons">
    <td>{{ person.id }}</td>
    <td>{{ person.name }}</td>
    <td>{{ person.description }}</td>
    <td><button class="btn btn-primary" @click="editPerson(person)">Update</button></td>
    <td><button class="btn btn-danger" @click="deletePerson(person)">Delete</button></td>
  </tr>
</tbody>
// html前後割愛
</body>
<script>
// scriptの前後割愛
methods: {
  deletePerson(person){
    const params = { id: person.id };
    axios.delete('[API GatewayのURL]', { 
      data: params
    })
    .then(response => { 
      const index = this.persons.indexOf(person);
      this.persons.splice(index, 1);
      console.log('deleted successfully');
    })
    .catch(function(error){ 
      alert('Personsデータの削除に失敗しましたっ!\n(・Д・)テヤンデイ!!' );
      console.log(error);
    });
  }
}
// scriptの前後割愛
</script>
lambda(node.js)
const AWS = require('aws-sdk')
const dynamo = new AWS.DynamoDB.DocumentClient()

exports.handler = (event, context, callback) => {
    console.log("event");
    console.log(event);
    const params = {
        'TableName': 'test-lambdaapp-persons',
        'Key':{
            'id': event.id
        }
    }

    console.log("Attempting a conditional delete...");
    dynamo.delete(params, function(err, data) {
        if (err) {
            console.error("Unable to delete item. Error JSON:", JSON.stringify(err, null, 2));
        } else {
            console.log("DeleteItem succeeded:", JSON.stringify(data, null, 2));
        }
    });
};

発生している問題・エラーメッセージ

CloudWatchLogでログを確認したところ、DynamoDBエラーが出ています。

2020-10-08T11:00:42.816Z    e91cd343-5ff6-4b46-9f87-2816220bf101    ERROR    Unable to delete item. Error JSON: {
  "message": "The provided key element does not match the schema",
  "code": "ValidationException",
  "time": "2020-10-08T11:00:42.816Z",
  "requestId": "2RQBF9OP1EM8N8CLECDFPC6KDVVV4KQNSO5AEMVJF66Q9ASUAAJG",
  "statusCode": 400,
  "retryable": false,
  "retryDelay": 6.932358560918717
}


ソースコードにも記載していますが、
lambdaのイベントハンドラ直後にconsole.log(event);をしてみると、中身が何も入っていないので、vue側での渡し方が悪いのかなと思っています。

2020-10-08T11:00:42.765Z    e91cd343-5ff6-4b46-9f87-2816220bf101    INFO    event
2020-10-08T11:00:42.765Z    e91cd343-5ff6-4b46-9f87-2816220bf101    INFO    {}

試したこと

色んなパターンの渡し方で試しましたが、
いずれも同じエラーです。
※フロント側のconsoleではエラーは出ていません。

         const params = { id: person.id };
          axios.delete('[API GatewayのURL]', { 
            data: params
          })
          const params = { id: person.id };
          axios.delete('[API GatewayのURL]', { 
            params: params
          })
          axios.delete('[API GatewayのURL]', { 
            data: { id: person.id }
          })
          axios.delete('[API GatewayのURL]', { 
            id: person.id 
          })
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

もしかしたら Axios does not use data from config when making DELETE request かもしれません。

axios の 0.20.0 で DELETE メソッドの body を送らない不具合があったみたいです。
修正のパッチはすでにマージされていて、もうすぐリリースされると思いますが、それまでは上記コメントの方法で回避するか、axios のバージョンを 0.19.2 以前に戻す必要がありそうな感じです。

リクエストの送信は以下で大丈夫だと思います。

axios.delete('[API GatewayのURL]', { 
  data: { id: person.id },
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/09 22:50

    いただいたURLの書き方で動きました!!
    ということは、不具合が修正されたら通常の記載方法に戻せるということですね!
    そんなこともあるんですね!
    ありがとうございました!!

    キャンセル

  • 2020/10/09 22:52

    参考までに上手く動いた時の書き方を残しておきます!

    ```
    axios.request({
    // ...config,
    method: 'delete',
    url: '[API GatewayのURL]',
    data: { id: person.id }
    })
    ```

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る