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 us:

At Thinkthroo, we study large open source projects and provide architectural guides. We have developed resubale Components, built with tailwind, that you can use in your project. We offer Next.js, React and Node development services.

Book a meeting with us to discuss your project.

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

The above is the detailed content of Usage of Dexie, an IndexedDB wrapper, in Lobechat. For more information, please follow other related articles on the PHP Chinese website!