Q&A
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
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件
0
ベストアンサー
もしかしたら 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
総合スコア11
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/09 13:50
2020/10/09 13:52