Docs
Skip to content

React

Add database_

Add a database to your React application using Appwrite Web SDK.

2 min read

Raw

Create database

To store your ideas, you need to create a database first.

  1. Go to the Databases section in your Appwrite Console
  2. Click Create Database
  3. Give it a name and ID. For this tutorial, we'll use Ideas Tracker as the name and ideas-tracker as the ID.
  4. You'll need to remember the database ID as you'll need it later.

Create table

In Appwrite, data is stored as a table of rows. Create a table in the Appwrite Console to store our ideas.

Create project screen
Create project screen

Columns

Create a new table with the following columns:

FieldTypeRequiredSize
userIdVarcharYes50
titleVarcharYes25
descriptionTextNo-

Configure permissions

Table permissions screen
Table permissions screen

Navigate to the Settings tab of your table, add the role Any and check the Read box. Next, add a Users role and give them access to Create by checking those boxes. These permissions apply to all rows in your new table.

Ideas context

Now that you have a table to hold ideas, we can read and write to it from our app. Like we did with the user data, we will create a React context to hold our ideas. Create a new file src/lib/context/ideas.jsx and add the following code to it.

JavaScript
import { createContext, useContext, useEffect, useState } from "react";
import { databases } from "../appwrite";
import { ID, Query } from "appwrite";


export const IDEAS_DATABASE_ID = "<YOUR_DATABASE_ID>"; // Replace with your database ID
export const IDEAS_TABLE_ID = "<YOUR_TABLE_ID>"; // Replace with your table ID


const IdeasContext = createContext();


export function useIdeas() {
  return useContext(IdeasContext);
}


export function IdeasProvider(props) {
  const [ideas, setIdeas] = useState([]);


  async function add(idea) {
    try {
      const response = await tablesDB.createRow({
        databaseId: IDEAS_DATABASE_ID,
        tableId: IDEAS_TABLE_ID,
        rowId: ID.unique(),
        data: idea
      });
      setIdeas((ideas) => [response, ...ideas].slice(0, 10));
    } catch (err) {
      console.log(err) // handle error or show user a message
    }
  }


  async function remove(id) {
    try {
      await tablesDB.deleteRow({
        databaseId: IDEAS_DATABASE_ID,
        tableId: IDEAS_TABLE_ID,
        rowId: id
      });
      setIdeas((ideas) => ideas.filter((idea) => idea.$id !== id));
      await init();
    } catch (err) {
      console.log(err)
    }
  }


  async function init() {
    try {
      const response = await tablesDB.listRows({
        databaseId: IDEAS_DATABASE_ID,
        tableId: IDEAS_TABLE_ID,
        queries: [Query.orderDesc("$createdAt"), Query.limit(10)]
      });
      setIdeas(response.rows);
    } catch (err) {
      console.log(err)
    }
  }


  useEffect(() => {
    init();
  }, []);


  return (
    <IdeasContext.Provider value={{ current: ideas, add, remove }}>
      {props.children}
    </IdeasContext.Provider>
  );
}

Was this page helpful?

Share what worked or what we should fix. Once approved, our agents automatically apply suggested updates to the docs.