Web Developers : 11-Deleting an Appwrite Document from a Database Collection in React

Screenshot from the tutorial

Deleting an Appwrite Document from a Database Collection in React

In this tutorial, we'll explore how to delete a document from an Appwrite database collection using React. Appwrite is a powerful backend-as-a-service platform that simplifies building and managing your applications. By the end of this post, you'll have a clear understanding of how to perform delete operations on documents within your Appwrite database.

Prerequisites

Before we dive into the code, ensure you have the following:

• A React application set up (using Create React App or any other method).
• An Appwrite server instance running.
• A collection created in your Appwrite database with documents that you want to delete.
• Appwrite SDK installed in your React project. You can install it using npm:

npm install appwrite

Setting Up Appwrite Client

First, we need to set up the Appwrite client in our React application. Create a new file named appwrite.js in your src directory to store the client configuration.

// src/appwrite.js
import { Client, Databases } from 'appwrite';

const client = new Client();

client
  .setEndpoint('https://YOUR_APPWRITE_ENDPOINT') // Your Appwrite API endpoint
  .setProject('YOUR_PROJECT_ID'); // Your project ID

const databases = new Databases(client);

export { client, databases };

Make sure to replace YOUR_APPWRITE_ENDPOINT and YOUR_PROJECT_ID with your actual Appwrite server details.

Deleting a Document

Now that we have the Appwrite client set up, we can create a function to delete a document from a specific collection. For this example, we’ll assume you have a collection named tasks and you want to delete a task document.

Step 1: Create a Delete Function

In your component file (e.g., TaskList.js), you can create a function to handle the delete operation.

// src/TaskList.js
import React from 'react';
import { databases } from './appwrite';

const TaskList = ({ tasks }) => {
  const deleteTask = async (taskId) => {
    try {
      await databases.deleteDocument('YOUR_DATABASE_ID', 'tasks', taskId);
      console.log('Task deleted successfully');
      // Optionally refresh the task list or update UI here
    } catch (error) {
      console.error('Error deleting task:', error);
    }
  };

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.$id}>
          {task.title}
          <button onClick={() => deleteTask(task.$id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
};

export default TaskList;

Step 2: Handling User Interaction

In the above code, the deleteTask function takes a taskId as an argument and calls the deleteDocument method from the Appwrite SDK. Make sure to replace YOUR_DATABASE_ID with your actual database ID.

• The function attempts to delete the specified document.
• If successful, it logs a success message to the console.
• If there's an error (e.g., if the document ID is invalid), it catches the error and logs it.

The UI consists of an unordered list where each task has a delete button. When clicked, the button will call the deleteTask function with the respective task ID.

Testing the Functionality

To test the delete functionality, ensure the following:

1. Your Appwrite server is up and running.
2. You have valid documents in your collection.
3. Your React app is correctly set up to display the list of tasks.

Run your application using:

npm start

Navigate to your application in the browser, and you should see a list of tasks with delete buttons next to each. Clicking a delete button should remove the corresponding task from the database.

Conclusion

In this tutorial, we learned how to delete an Appwrite document from a database collection using React. We covered setting up the Appwrite client, implementing a delete function, and handling user interaction with a simple UI. Deleting documents is a fundamental part of database management, and with Appwrite, it becomes straightforward and efficient.

Feel free to explore more features and functionalities offered by Appwrite as you continue to develop your application! Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios