Encountering difficulty in removing a record from the database utilizing Prisma with Next.js API routes

Question

Encountering difficulty in removing a record from the database utilizing Prisma with Next.js API routes

Currently, I am in the process of developing a Todo manager using Next.js 13, Prisma, and MySQL. In order to include a feature that allows users to delete a todo item, I have implemented the use of a Link tag for the delete button within my code:

...
<Link href={`/api/todo/${id}`}>
          <MdDelete className="bg-red-400 hover:bg-red-600 p-1 text-3xl rounded-xl" />
</Link>
...

The value of id is passed as a prop to the component. The route defined in /app/api/todo/[id]/route.ts looks like this:

import { prisma } from "@/lib/database";
import { NextResponse } from "next/server";

export async function DELETE(
  req: Request,
  { params }: { params: { id: string } }
) {
  await prisma.todo.delete({
    where: {
      id: params.id,
    },
  });
  return NextResponse.json({ message: "done" });
}

However, upon clicking the Link, it redirects to the URL

http://localhost:3000/api/todo/clkgkh3t70000p1947hi24a3k

and displays an error page:

https://i.stack.imgur.com/4YOwp.png

where clkgkh3t70000p1947hi24a3k represents the id being passed.

Is there a solution to this problem? Alternatively, what other method can be used to remove the Todo Item?

typescript next.js routes prisma

Answer 1

Answer №1

The Link component acts as a wrapper for the standard HTML a element, which is typically used to navigate to a new page. If you want to execute a function on click, you should use a button with an onClick event handler:

<MdDelete
  onClick={async (e) => {
    e.preventDefault() 
    await fetch(`/api/todo/${id}`, { method: "DELETE" });
    // Following this, you can redirect or update a state, etc...
  }}
  className="bg-red-400 hover:bg-red-600 p-1 text-3xl rounded-xl"
/>

Answer 2

The Link component acts as a wrapper for the standard HTML a element, which is typically used to navigate to a new page. If you want to execute a function on click, you should use a button with an onClick event handler:

<MdDelete
  onClick={async (e) => {
    e.preventDefault() 
    await fetch(`/api/todo/${id}`, { method: "DELETE" });
    // Following this, you can redirect or update a state, etc...
  }}
  className="bg-red-400 hover:bg-red-600 p-1 text-3xl rounded-xl"
/>

Encountering difficulty in removing a record from the database utilizing Prisma with Next.js API routes

Answer №1

Similar questions

Troubleshooting issue with Next.JS Redux dispatch functionality inside getStaticProps() not functioning as

The superclass defines the type of the subclass

JavaScript maintaining records and connections between multiple asynchronous events

We regret to inform you that an application error has occurred: a critical server-side exception has been encountered during the deployment of the next app. For further details, please refer to the

Guidelines for cycling through a series of HTTP requests and effectively saving the data from each cycle into an array

Error encountered when attempting to assign a value of the original data type within the Array.reduce function

Encountering no automatic refresh feature in Next.js

Activate the scroll accordion to automatically expand when the page loads

Is it possible to create a data structure that enforces specific keys and values types during initialization?

Extract a string value from a TypeScript enum

Is there a way to automatically scroll 50 pixels down the page after pressing a button?

Encountering an issue while attempting to implement Redux Toolkit alongside the MUI ToggleButtonGroup component

A step-by-step guide on executing a callback function once the animation has finished with frame-motion

Determine the tuple data type by analyzing a union of tuples using a single element as reference

Utilizing the Twitter API with Next.js to automate tweets even when the website is not actively engaged

Issue arises when attempting to use the useEffect hook in React with Typescript to reset states upon the component unmounting

Initiate monitoring for child component modifications

Encountering the 404 Page Not Found error upon refreshing the page while utilizing parallel routes

Typescript: Declaring object properties with interfaces

Error: Module not found - The package path "." is not exported from the specified package. As a result, Firebase will not update in your Next.js