Using Firestore with Djot

Djot uses Firestore as its database. Firestore is a NoSQL database that stores data in documents, which are organized into collections. Each document contains a set of key-value pairs.

Djot allows you to have a custom database you can access from within your djots and from your custom code.

Note that ou need to be logged in to Djot and have a username setup to use Firestore.

Accessing Firestore

To use Firestore inside your djots you'll need to import the firestore module:

import firestore from '#djot/firestore';

import firestore from '#djot/firestore';

This is an already initialized instance of the Firestore client. You can use it to access your database.

Accessing Collections

Firestore stores data in collections. You can access a collection using the collection method:

import { collections, getDocs } from 'firebase/firestore';
const username = 'eli'
const database = 'assistants'
const path = `djitsu/fulgrim/content/user-database/users/${username}/databases/${database}/collections`

export const App = () => {
  const [data, setData] = React.useState<any[]>([]);
  React.useEffect(() => {
    const collection = collections(firestore, path);
    const docs = getDocs(collection);
    const data = docs.map((doc) => doc.data());
    setData(data);  
  }, [])
  return (
    <div>
      <h1>My Collection</h1>
      <ul>
        {data.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  )
}

import { collections, getDocs } from 'firebase/firestore';
const username = 'eli'
const database = 'assistants'
const path = `djitsu/fulgrim/content/user-database/users/${username}/databases/${database}/collections`

export const App = () => {
  const [data, setData] = React.useState<any[]>([]);
  React.useEffect(() => {
    const collection = collections(firestore, path);
    const docs = getDocs(collection);
    const data = docs.map((doc) => doc.data());
    setData(data);  
  }, [])
  return (
    <div>
      <h1>My Collection</h1>
      <ul>
        {data.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  )
}

Retrieving a Single Document

To retrieve a single document from a collection, you can use the doc and getDoc methods:

import { doc, getDoc } from 'firebase/firestore';

export const App = () => {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    const docRef = doc(firestore, `${path}/myDocumentId`);
    const docData = await getDoc(docRef);
    if (docData.exists()) {
      setData(docData.data());
    } else {
      console.log('No such document!');
    }
  }, [])
  // Rest of your component
}

import { doc, getDoc } from 'firebase/firestore';

export const App = () => {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    const docRef = doc(firestore, `${path}/myDocumentId`);
    const docData = await getDoc(docRef);
    if (docData.exists()) {
      setData(docData.data());
    } else {
      console.log('No such document!');
    }
  }, [])
  // Rest of your component
}

Updating a Document

import { doc, updateDoc } from 'firebase/firestore';

export const App = () => {
  const updateDocument = async () => {
    const docRef = doc(firestore, `${path}/myDocumentId`);
    await updateDoc(docRef, {
      field: 'newValue',
    });
  }
  // Rest of your component
}

import { doc, updateDoc } from 'firebase/firestore';

export const App = () => {
  const updateDocument = async () => {
    const docRef = doc(firestore, `${path}/myDocumentId`);
    await updateDoc(docRef, {
      field: 'newValue',
    });
  }
  // Rest of your component
}

Deleting a Document

import { doc, deleteDoc } from 'firebase/firestore';

export const App = () => {
  const deleteDocument = async () => {
    const docRef = doc(firestore, `${path}/myDocumentId`);
    await deleteDoc(docRef);
  }
  // Rest of your component
}

import { doc, deleteDoc } from 'firebase/firestore';

export const App = () => {
  const deleteDocument = async () => {
    const docRef = doc(firestore, `${path}/myDocumentId`);
    await deleteDoc(docRef);
  }
  // Rest of your component
}

Creating a Document

import { doc, setDoc } from 'firebase/firestore';

export const App = () => {
  const createDocument = async () => {
    const docRef = doc(firestore, `${path}/myDocumentId`);
    await setDoc(docRef, {
      field: 'value',
    });
  }
  // Rest of your component
}

import { doc, setDoc } from 'firebase/firestore';

export const App = () => {
  const createDocument = async () => {
    const docRef = doc(firestore, `${path}/myDocumentId`);
    await setDoc(docRef, {
      field: 'value',
    });
  }
  // Rest of your component
}