データを削除するAPIを作る

今回は削除用のAPIを作成します。APIの使用としては以下のようにします。

APIの仕様

メソッド DELETE
エンドポイント /api/delete/{id}

やりたいこと

・一覧の行に「削除」ボタンを設置して押下するとDELETEのリクエストを送る
・サーバ側でリクエストを受け取りデータを削除する

修正内容

画面を整備する

途中で改行されてしまっていたので一列に表示して削除ボタンを表示する

DELETEボタンを押下する際の関数のCall元のイベントハンドラを作る

押下するとchecktstという関数を参照して引数経由で各列データのIDを渡すようにします

list.tsx

import { Button } from "@mui/material";
import { checktst } from ".";

export const ListItemValue = props => {
  const {id, name, create_at} = props;
  return (
    <tr>
      <td>{id}</td>
      <td>{name}</td>
      <td>{create_at}</td>
      <td><Button variant="contained" color="error" onClick={() => checktst({id})}>delete</Button></td>
    </tr>
  )
}

関数を作る

一覧画面から削除するので一覧画面のテンプレに関数を定義する

index.tsx

export function checktst(value) {
  axios.delete("/api/delete/" + value.id).then((res) => {
  });
}  

サーバ側でリクエストを受けてデータを削除する

/api/delete/{id} URLの中からIDを受け取りIDが存在するか確認してデータがあればDELETEします

/work/[id].tsx

import { NextApiRequest, NextApiResponse } from "next";

type User = {
  id:string,
  name:string,
  create_at:string, 
}

export default (req: NextApiRequest, res: NextApiResponse) => {
    const method = req.method;
    switch (method) {
      case 'DELETE': {
        const value = req.url.substring(12);
        const sqlite3 = require("sqlite3");
        const db = new sqlite3.Database("./test.db");
        const check = new Promise((resolve, reject) => {
          db.serialize(() => {
            db.all(`select * from Test where id = ?`, value , (err, tests) => {
                if (err) return reject(err)
                return resolve(tests)
            })
            db.close();
          })
        })

        check.then((selectRes:User[]) => {
          if(res != undefined) {
            const check = new Promise((resolve, reject) => {
              const sqlite3 = require("sqlite3");      
              const db = new sqlite3.Database("./test.db");
              db.serialize(() => {
                db.run(`delete from Test where id = ?`, selectRes[0].id , (err, tests) => {
                    if (err) return reject(err)
                    return resolve(tests)
                })
                db.close();
              })
            });
          } else {
            res.status(404).json({})
          }
        }).then(deleteRes => 
          res.status(200).json({})
        );
        break;
      }
      default: {
        res.status(403).end();
      }
    }
}

削除した後で一覧を更新する仕様にしたかったが、自分の作りが悪すぎて気軽に修正できませんでした。Contextの制御の仕方が特定の部分に依存している（疎結合になってない）ので、柔軟性がなくうまく作れていません。NodeやReactに実際に触れて言語の仕様やコンセプト含めて毎日すごく勉強になります。
あまり選り好みせず横断的に試していきたい。。