The Complete Guide to CRUD Operations in Next.js with Prisma Client Part - 3

Introduction

In this blog post, we will discuss how to fetch and delete records using API routes in a Next.js application. API routes allow us to create, read, update, and delete data from a server using HTTP requests. We will explore how to fetch records from an API and display them on the user interface. Additionally, we will cover how to delete a specific record from the API and refresh the page to reflect the changes made.

Fetching Records

We built API routes to handle CRUD operations. We created a get method to return all the records, and an update method to update a record.

Now, let's focus on fetching all the records from the API and displaying them on the UI. To do this, we need to use the useState hook to create a state property that will hold the list of todos. We define the state property as an array of todo objects.

Next, we use the useEffect hook to make the API call and fetch the todos. We use the fetch API and specify the URL of the API todos. Additionally, we add a parameter to disable caching of the data.

Once we receive the response from the API, we extract the data using the response.json() method. Finally, we update the todos state property with the fetched data.

Component Code Example:

const [todos, setTodos] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('API/todos', { cache: 'no-cache' });
    const data = await response.json();
    setTodos(data);
  };

  fetchData();
}, []);

Now that we have fetched the todos, let's display them on the UI. We can iterate over the todos array using the map function and create a list item for each todo. Inside the list item, we display the todo's name and username.

Component Code Example:

return (
  <ul>
    {todos.map((todo) => (
      <li key={todo.id}>
        <div className="todo-item">
          <span className="todo-name">{todo.name}</span>
          <span className="todo-username">{todo.username}</span>
        </div>
      </li>
    ))}
  </ul>
);

API Code Example:

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === 'GET') {
        try {
            const todos = await prisma.todos.findMany();
            res.status(200).json(todos);
        } catch (e) {
            res.status(500).json(e);
        }
    } 
}

By following these steps, we are able to fetch the todos from the API and display them on the UI.

Deleting Records

In addition to fetching records, we can also delete specific records from the API. To implement this functionality, we need to add a delete button for each todo item displayed on the UI. When the delete button is clicked, we will call a deleteTodo function and pass the todo's ID as a parameter.

Inside the deleteTodo function, we make a fetch API call to the delete route of the API, specifying the todo ID in the URL. We also set the method to 'delete' and include the necessary headers. Once the record is successfully deleted, we want to refresh the page to reflect the updated list of todos.

Component Code Example:

const deleteTodo = async (id) => {
  await fetch(`API/todos/${id}`, {
    method: 'delete',
    headers: {
      'Content-Type': 'application/json',
    },
  });

  window.location.reload();
};

API Code Example:

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === 'DELETE') {
        try {
            const todoId = req.query.id;
            const todos = await prisma.todos.delete({
                where: {
                    id: Number(todoId)
                }
            })
            res.status(200).json(todos);
        } catch (e) {
            res.status(500).json(e);
        }
    } 
}

By adding the delete button and calling the deleteTodo function, we can delete a specific record from the API and refresh the page to see the updated list of todos.

Conclusion

In this blog post, we learned how to fetch and delete records using API routes in a Next.js application. We explored how to fetch records from an API and display them on the user interface. Additionally, we covered how to delete a specific record from the API and refresh the page to reflect the changes made.

By implementing these functionalities, we can create interactive applications that allow users to view and manage data effectively.

Made with VideoToBlog