Is it necessary to establish a new connection each time I make a request to IndexedDB?

Question

Is it necessary to establish a new connection each time I make a request to IndexedDB?

Currently, I am working on a basic Angular project and I have the requirement to save some data in IndexedDB.

In my service, there is an initialization of private db: IDBDatabase; within the constructor: However, I face an issue where this initialized DB is not defined when I try to use it in another method call after the constructor. It seems like the problem might be related to asynchronous calls, callbacks, and promises but I'm having trouble pinpointing the exact cause ... so for now, my temporary workaround is to manually call

window.indexedDB.open("MyTestDatabase", 1);

whenever needed

import {Injectable} from '@angular/core';
import {Directory, Bookmark} from "./models";
import {connectableObservableDescriptor} from "rxjs/internal/observable/ConnectableObservable";

@Injectable({
    providedIn: 'root'
})
export class BookmarksService {

    private db: IDBDatabase;
    private directoriesStoreName = "directories";
    private bookmarksStoreName = "bookmarks";
    
    // Rest of the code remains the same ...

Additionally, here is how I am using a component:

export class DirectoriesListComponent implements OnInit {


    @Input() bookmarks: Bookmark[];
    @Input() directories: Directory[];
    isCollapsed = false;

    common: CommonService;
    bookmarksService: BookmarksService;
    
    // Constructor definition and ngOnInit implementation continues...

angular typescript indexeddb

Answer 1

Answer №1

There lies an issue in not having control over when the onsuccess function will be executed as it functions as a callback, running at a time beyond your jurisdiction.

However, there are steps you can take to gain control over it. Here's how:

Promisify the opening of the database connection and wait for it

Here is an example:

import {Injectable} from '@angular/core';
import {Directory, Bookmark} from "./models";
import {connectableObservableDescriptor} from "rxjs/internal/observable/ConnectableObservable";

@Injectable({
    providedIn: 'root'
})
export class BookmarksService {

  private db: IDBDatabase;
  private directoriesStoreName = "directories"
  private bookmarksStoreName = "bookmarks"
  constructor() {
    console.log("Calling Bookmarks Service Constructor .... ")
    // :refac: you can even call it from the constructor, but won't wait as the constructor can't wait async functions to be completed
    this.initializeDatabase()
  }

  private async getDatabase(): Promise<IDBDatabase> {
    // :refac: Now we create a Promise<IDBDatabase> and wait for it when needed
    return new Promise<IDBDatabase>((resolve, reject) => {
      //
      const openDBRequest: IDBOpenDBRequest = window.indexedDB.open("MyTestDatabase", 1)
      console.log("Let's see if the DB will open .. ")

      /**
      * The only place where a data can be defined is onupgradeneeded callback !
      * @param event
      */
      openDBRequest.onupgradeneeded = (event: any) => {
        console.log("onupgradeneeded fired")
        const db = event.target.result
        resolve(db)
      };

      openDBRequest.onsuccess = (event: any) => {
        console.log("seems that db is opened ! ");
        console.log(event)
        const db = event.target.result
        db.onerror = x => {
          console.log("An error occurred while working with DB! ");
        }
        resolve(db)
      };

      openDBRequest.onerror = event => {
        console.log("can't open IndexedDB");
        console.log(event)
        reject()
      }
    })
  }

  async initializeDatabase(): Promise<void> {
    if (!window.indexedDB) 
      return console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")
    else if (!this.db)
      this.db = await this.getDatabase()
  }

  async getAllChildDirs(parentId: number): Promise<Directory[]> {
    await this.initializeDatabase()
    if (this.db) {
      const os = this.db.transaction(this.directoriesStoreName).objectStore(this.directoriesStoreName)
      const request = os.index("parent_id")
      const dirs: Directory[] = []
      request.openCursor(IDBKeyRange.only(parentId)).onsuccess = (event: any) => {
        const cursor = event.target.result
        if (cursor) {
          // cursor.key is a name, like "Bill", and cursor.value is the whole object.
          console.log("Name: " + cursor.key + ", SSN: " + cursor.value)
          dirs.push(cursor.value)
          cursor.continue()
        }
      }
      return dirs
    }
  }
}

As you are returning a promise, make sure to use await while calling it:

async ngOnInit(): Promise<void> {
  this.directories = await this.bookmarksService.getAllRootDirs();
  this.bookmarks = await this.bookmarksService.getBookmarks();
  //listens on when button is clicked to collapse the menu !
  this.common.dirsMenuCollapsed.subscribe(val => {
    this.isCollapsed = val
  })
}

Answer 2

There lies an issue in not having control over when the onsuccess function will be executed as it functions as a callback, running at a time beyond your jurisdiction.

However, there are steps you can take to gain control over it. Here's how:

Promisify the opening of the database connection and wait for it

Here is an example:

import {Injectable} from '@angular/core';
import {Directory, Bookmark} from "./models";
import {connectableObservableDescriptor} from "rxjs/internal/observable/ConnectableObservable";

@Injectable({
    providedIn: 'root'
})
export class BookmarksService {

  private db: IDBDatabase;
  private directoriesStoreName = "directories"
  private bookmarksStoreName = "bookmarks"
  constructor() {
    console.log("Calling Bookmarks Service Constructor .... ")
    // :refac: you can even call it from the constructor, but won't wait as the constructor can't wait async functions to be completed
    this.initializeDatabase()
  }

  private async getDatabase(): Promise<IDBDatabase> {
    // :refac: Now we create a Promise<IDBDatabase> and wait for it when needed
    return new Promise<IDBDatabase>((resolve, reject) => {
      //
      const openDBRequest: IDBOpenDBRequest = window.indexedDB.open("MyTestDatabase", 1)
      console.log("Let's see if the DB will open .. ")

      /**
      * The only place where a data can be defined is onupgradeneeded callback !
      * @param event
      */
      openDBRequest.onupgradeneeded = (event: any) => {
        console.log("onupgradeneeded fired")
        const db = event.target.result
        resolve(db)
      };

      openDBRequest.onsuccess = (event: any) => {
        console.log("seems that db is opened ! ");
        console.log(event)
        const db = event.target.result
        db.onerror = x => {
          console.log("An error occurred while working with DB! ");
        }
        resolve(db)
      };

      openDBRequest.onerror = event => {
        console.log("can't open IndexedDB");
        console.log(event)
        reject()
      }
    })
  }

  async initializeDatabase(): Promise<void> {
    if (!window.indexedDB) 
      return console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")
    else if (!this.db)
      this.db = await this.getDatabase()
  }

  async getAllChildDirs(parentId: number): Promise<Directory[]> {
    await this.initializeDatabase()
    if (this.db) {
      const os = this.db.transaction(this.directoriesStoreName).objectStore(this.directoriesStoreName)
      const request = os.index("parent_id")
      const dirs: Directory[] = []
      request.openCursor(IDBKeyRange.only(parentId)).onsuccess = (event: any) => {
        const cursor = event.target.result
        if (cursor) {
          // cursor.key is a name, like "Bill", and cursor.value is the whole object.
          console.log("Name: " + cursor.key + ", SSN: " + cursor.value)
          dirs.push(cursor.value)
          cursor.continue()
        }
      }
      return dirs
    }
  }
}

As you are returning a promise, make sure to use await while calling it:

async ngOnInit(): Promise<void> {
  this.directories = await this.bookmarksService.getAllRootDirs();
  this.bookmarks = await this.bookmarksService.getBookmarks();
  //listens on when button is clicked to collapse the menu !
  this.common.dirsMenuCollapsed.subscribe(val => {
    this.isCollapsed = val
  })
}

Is it necessary to establish a new connection each time I make a request to IndexedDB?

Answer №1

Similar questions

Issue with VS code/Angular where linter is unable to detect components imported from shared modules

Expand the space between each pair of rows within a table

Utilizing React (or Angular) in conjunction with JWT Authentication and managing Sessions/Cookies

Organize pairs of strings into a nested array within an array using Angular

What steps should I take to create an object that can be converted into a JSON schema like the one shown here?

Encountered an issue when attempting to access a user's full details page in Angular 14

Discovering the ins and outs of utilizing Validator.pattern in Angular 9

Issue with ChartistJS Angular2: Chart appears only when window is resized

What is the best way to sort a list with parent and child elements using Angular 2?

"Exploring the Concept of Tuple Narrowing and Type

The input type '{}' does not match the expected type 'Readonly<IIdeasContainerProps>'. The property '...' is not found in the type '{}'

Is it true that "Conditional types" are not compatible with actual functions?

Angular - Automatically hide sidebar menu upon selecting a menu item

Steps to resolve Angular NX project NG0203 issue

What is the best way to distribute items into an array?

Firestore TimeStamp.fromDate is not based on UTC timing

Encountering difficulty importing TypeScript files dynamically within a Deno executable

Creating an object key using a passed literal argument in TypeScript

Is it possible to bind the Polymer paper-dropdown-menu with ngControl in Angular?

Obtaining API/JSON Data to Implement in a NextJS Application