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

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
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 
          })

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

投稿2020/10/09 11:42

編集2020/10/09 11:47

nokazn

総合スコア11

teltel07

2020/10/09 13:50

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

teltel07

2020/10/09 13:52

参考までに上手く動いた時の書き方を残しておきます！ ↓ ``` axios.request({ // ...config, method: 'delete', url: '[API GatewayのURL]', data: { id: person.id } }) ```

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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