Usage of Dexie, an IndexedDB wrapper, in Lobechat

In this article, we analyze Dexie usage in Lobechat.

If you check [database folder in lobechat, it has 2 folders:

1. client

2. server

In this Lobechat’s self-host docs, it is mentioned that LobeChat

defaults to using a client-side database (IndexedDB). That is why you have two folders, one for client and one for server.

database/client/core/db.ts imports Dexie.

Dexie is a minimalistic wrapper for indexedDB. Let’s look at a simple dexie example provided in the Getting Started tutorial.

// db.ts
import Dexie, { type EntityTable } from 'dexie';
interface Friend {
 id: number;
 name: string;
 age: number;
}
const db = new Dexie('FriendsDatabase') as Dexie & {
 friends: EntityTable<
 Friend,
 'id' // primary key "id" (for the typings only)
 >;
};
// Schema declaration:
db.version(1).stores({
 friends: '++id, name, age' // primary key "id" (for the runtime!)
});
export type { Friend };
export { db };

Important note:

Applications typically have one single Dexie instance declared as its own module. This is where you declare which tables you need and how each table shall be indexed. A Dexie instance is a singleton throughout the

application — you do not need to create it on demand. Export the resulting db instance from your module so that components or other modules can use it to query or write to the database.

Using this line shown below, Lobechat creates a singleton instance of BrowserDB.

export class BrowserDB extends Dexie {
 public files: BrowserDBTable<'files'>;
 public sessions: BrowserDBTable<'sessions'>;
 public messages: BrowserDBTable<'messages'>;
 public topics: BrowserDBTable<'topics'>;
 public plugins: BrowserDBTable<'plugins'>;
 public sessionGroups: BrowserDBTable<'sessionGroups'>;
 public users: BrowserDBTable<'users'>;
constructor() {
 this.version(1).stores(dbSchemaV1);
 this.version(2).stores(dbSchemaV2);
 this.version(3).stores(dbSchemaV3);
 this.version(4)
 .stores(dbSchemaV4)
 .upgrade((trans) => this.upgradeToV4(trans));
 // … more code
export const browserDB = new BrowserDB();

versions written in constructor show how the client side database schema evolved over the time, Read more about Dexie.version() to understand the versions.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on an interesting project. Send me an email at [e-mail]

My Github - https://github.com/ramu-narasinga
My website - https://ramunarasinga.com
My Youtube channel - https://www.youtube.com/@thinkthroo
Learning platform - https://thinkthroo.com
Codebase Architecture - https://app.thinkthroo.com/architecture
Best practices - https://app.thinkthroo.com/best-practices
Production-grade projects - https://app.thinkthroo.com/production-grade-projects

References:

1. https://github.com/lobehub/lobe-chat/blob/main/src/database/client/core/db.ts

2. https://dexie.org/

3. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

4. https://web.dev/articles/indexeddb

5. https://lobehub.com/docs/self-hosting/server-database

6. https://dexie.org/docs/Tutorial/React