reactjs - req.body är odefinierat när man använder fetch-metoden delete i Next.js

Jag vet verkligen inte varför, men när jag försöker hämta data och lägga det i kroppen på mitt svar, står det undefined (i konsolen). Jag har nästan två identiska komponenter. Den ena använder en POST-metod och returnerar en fylld kropp, den andra använder en DELETE-metod och returnerar en undefined kropp. Jag använder ett Prisma-schema.

Detta är POST:en som fungerar och returnerar en kropp för API:et

export default function Product({
  id_product,
  name,
  link_image,
  price,
}: ProductProps) {
  const [test, testing] = useState(false);
  const { push: relocate } = useRouter();

  const onAddToCart = async () => {

    let response = await fetch("/api/addToCart", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        id_product: id_product,
      }),
    });

    if (response.ok) {
      toast.success(`${name} was added to the cart`);
    } else {
      toast.error(`${name} is already in your cart`);
    }
  };

Detta är starten på API:et för den funktionen, const { id_product }=req.body fungerar.

async function handlePost(req: NextApiRequest, res: NextApiResponse) {
    const session = await getServerSession(req, res, authOptions);
    const client = connexion()
    const { id_product } = req.body;
 
    const user = await client.user.findFirst({
        where: { email: session?.user?.email || undefined}
    })

    let cart = await client.cart.findFirst({
        where: {id_user: user?.id_user}
    })

Och det här är vad jag har problem med, komponenten är i princip densamma, förutom metoden:

type ProductProps = products;

export default function ProductItem({
  id_product,
  description,
  publication_date,
  author,
  name,
  link_image,
  price,
}: ProductProps) {
  const onDeleteFromCart = async () => {
    let data = {
      id_product: id_product
    }
    let response = await fetch("/api/deleteFromCart", {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (response.ok) {
        toast.success(`${name} was succesfully removed from your cart`)
    }
    else {
        toast.error(`Error`);
      }
  };

Det här är API:et för, const {id_product}=req.body är odefinierad

async function handleDelete(req: NextApiRequest, res: NextApiResponse) {
    const session = await getServerSession(req, res, authOptions);
    const client = connexion()
    const  { id_product } = req.body
console.log(id_product)
    const user = await client.user.findFirst({
        where: { email: session?.user?.email || undefined}
    });
 
    let cart = await client.cart.findFirst({
        where: {id_user: user?.id_user}
    });
    let cart_item = await client.cart_item.findFirst({
        where: {
            id_cart: cart?.id,
            id_product: id_product
        }
    })

Jag har försökt lösa detta problem i några timmar nu och jag har inte kommit framåt alls.

Svar #1

Det här brukade fungera fram till en mycket nyligen uppdatering. Det finns en massa problem på GitHub men jag vet inte om någon ansvarig för Next.js har svarat än. Det blockerar oss för tillfället från att uppdatera. Jag förstår att det inte är typiskt, men det här är en brytande förändring av Next.js, och jag vill inte behöva migrera alla våra DELETE-slutpunkter :(.

https://github.com/vercel/next.js/issues/49353

https://github.com/vercel/next.js/issues/48096

https://github.com/vercel/next.js/issues/48898

Svar #2

delete-förfrågningar innehåller ingen kropp, du kan prova att använda patch-metoden istället om du behöver en kropp i denna förfrågan

Relaterade artiklar