How to Fetch and Delete Records Using API Routes in React

Introduction

In this blog post, we will discuss how to fetch and delete records using API routes in a React 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

In the previous video, we built API routes to handle CRUD operations. We created a get method to return all the records, a post method to create a new record, a get method to fetch a specific record based on its ID, a delete method to delete a record, 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 JSON method. Finally, we update the todos state property with the fetched data.

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.

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>
);

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.

Code Example:

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

  window.location.reload();
};

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 React 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