Hello,

I am currently trying out Next with Supabase, trying to do simple CRUD operations.
Was trying to do mutations to delete a record from the db. The way I did it was by using form actions and passing only the id to the formData object. To me this feels quite 'dirty' and I am unsure if this approach is correct.
How can I tackle this?

Edit:
I will also paste the whole component here:

import { createServerActionClient } from "@supabase/auth-helpers-nextjs";
import { revalidatePath } from "next/cache";
import { cookies } from "next/headers";

const addPizza = async (formData: FormData) => {
  "use server";

  const name = formData.get("name");
  const pizza_id = formData.get("pizza_id");
  const price = formData.get("price");
  const has_gluten = formData.get("has_gluten");

  const supabase = createServerActionClient({ cookies });

  const res = await supabase.from("Pizza").insert({
    pizza_id,
    name,
    price,
    has_gluten,
  });
  console.log(res);
  revalidatePath("pizza");
};

const deletePizza = async (formData: FormData) => {
  "use server";

  const pizza_id = formData.get("id");

  const supabase = createServerActionClient({ cookies });
  const { error } = await supabase.from("Pizza").delete().eq("id", pizza_id);

  if (!error) revalidatePath("pizza");
};

export default async function Index() {
  const supabase = createServerActionClient({ cookies });

  const { data: pizza } = await supabase.from("Pizza").select().order('pizza_id');

  return (
    <div className="text-white bg-slate-900 my-2">
      Pizza Admin Page
      <form
        action={addPizza}
        className="flex flex-col border gap-2 border-red-500"
      >
        <label>Pizza Id</label>
        <input
          className="bg-zinc-200 text-black"
          type="number"
          name="pizza_id"
        />
        <label>Name</label>
        <input className="text-black" name="name" />
        <label>Price</label>
        <input className="text-black" type="number" name="price" />
        <label>Has Gluten</label>
        <input className="text-black" type="checkbox" name="has_gluten" />
        <button type="submit" className="bg-green-700 m-2">
          Add new Pizza !
        </button>
      </form>
      <table className="my-16 table-fixed bg-slate-700 p-2">
        <thead>
          <tr className="border border-slate-400">
            <th className="border-r border-slate-400">Id</th>
            <th className="border-r border-slate-400">Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {pizza?.map((p) => {
            return (
              <tr key={p.pizza_id} className="border border-slate-400">
                <td className="border-r border-slate-400 p-2">{p.pizza_id}</td>
                <td className="border-r border-slate-400 p-2">{p.name}</td>
                <td className="border-r p-2">{p.price}</td>
                <td className="p-2">
                  <form action={deletePizza}>
                    <input className="hidden" name="id" defaultValue={p.id} />
                    <button className="bg-red-700 rounded-md px-2 py-1 hover:bg-red-600 hover:text-zinc-200">
                      Delete
                    </button>
                  </form>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}