In Appwrite, data is stored as a table of rows. Create a new database and table in the Appwrite Console to store the ideas.
Create a new table with the following columns:
| Field | Type | Required | Size |
userId | String | Yes | 200 |
title | String | Yes | 200 |
description | String | No | 500 |
Change the table's permissions in the settings to give access.
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, Update and Delete by checking those boxes.
Environment variables
Just like when we set up the connection to Appwrite in step 3, we need to keep the variables with the table id secret. Open the .env file and add your database id and your table id to it.
VITE_DATABASE_ID="YOUR_DATABASE_ID"
VITE_TABLE_ID="YOUR_TABLE_ID"
Query methods
Now that we have a table in the database to hold ideas, we can connect to it from our app. Our users should be able to read, add and remove ideas. We will add a new composable, useIdeas, to handle this functionality.
Create a new file in the composables directory, useIdeas.js and add the following code.
// composables/useIdeas.ts
import { ID, Query, Models} from "appwrite";
import { database } from "~/appwrite";
import { ref } from "vue";
const ideasDatabaseId: string = import.meta.env.VITE_DATABASE_ID;
const ideasTableId: string = import.meta.env.VITE_TABLE_ID;
const queryLimit: number = 10;
interface Idea extends Models.Row{
title: string;
description: string;
userId: string;
}
const current = ref<Idea[] | null>(null); // Reference for the fetched data
export const useIdeas = () => {
// Fetch the 10 most recent ideas from the database
// Add the list to the current reference object
const fetch = async (): Promise<void> => {
const response = await tablesDB.listRows(
ideasDatabaseId,
ideasTableId,
[Query.orderDesc("$createdAt"), Query.limit(queryLimit)]
);
current.value = response.rows as Idea[];
};
// Add new idea to the database,
// Change the value of the current object
const add = async (idea: Idea): Promise<void> => {
const response = await database.createRow(
ideasDatabaseId,
ideasTableId,
ID.unique(),
idea
);
current.value = [response, ...current.value as Idea[]].slice(0, 10) as Idea[];
};
const remove = async (id: string): Promise<void> => {
await database.deleteRow(ideasDatabaseId, ideasTableId, id);
await fetch(); // Refetch ideas to ensure we have 10 items
};
fetch();
return {
add,
current,
fetch,
remove,
};
};
Now we can call the useIdeas composable from the home page.