How to Await an IndexedDB Open when Onupgradeneeded Fires

Question

I am new to learning both web development and IndexedDB. I have been successful in creating a test Blazor WebAssembly app using Visual Studio and incorporating an IndexedDB. In particular, I've successfully created the database, populated a store with data, and subsequently retrieved that data. So far so good. As part of that, I have been able to automatically Open the database in my JavaScript code, read the data store once it is open, and pass the data to a Blazor c# method using JSON so I can process it via existing c# code. I have been able to make the latter work by using "await" on the database open, thereby insuring it's open before subsequent code tries to retrieve the data. Took quite awhile to piece all that together, but it works. But it doesn't work when I change the version of the database, thereby triggering the onupgradeneeded event. In that situation, the await doesn't seem to work because the js that tries to read the data is executing before the Open is complete. So, I'm looking to understand what I am doing wrong or failing to do.

Thanks. Steve

 async function Database_Open() { var dbReq = await indexedDB.open(databaseName, 1); dbReq.onupgradeneeded = function (event) { meDatabase = (event.target as any).result; let bbDetailStore = meDatabase.createObjectStore(bbDetailStoreName, { autoIncrement: true }); console.log(bbDetailStore.keyPath); bbDetailStore.createIndex("by_VblName", "vblName", { unique: false }); bbDetailStore.createIndex("by_Year", "year", { unique: false }); } dbReq.onsuccess = function (event) { meDatabase = (<IDBOpenDBRequest>event.target).result; let x = 1; } dbReq.onerror = function (event) { alert('error opening database ' + (event.target as any).errorCode); } }

Answer 1

You'll probably have better luck using the traditional Promise syntax than async/await. They aren't very useful for "Promisifying" something that's callback and/or event based like indexedDB .

function Database_Open()
{
    return new Promise(function(resolve, reject) {
      var dbReq = indexedDB.open(databaseName, 1);
      dbReq.onupgradeneeded = function (event) 
      {
          meDatabase = (event.target as any).result;

          let bbDetailStore = meDatabase.createObjectStore(bbDetailStoreName, { autoIncrement: true });
          console.log(bbDetailStore.keyPath);
          bbDetailStore.createIndex("by_VblName", "vblName", { unique: false });
          bbDetailStore.createIndex("by_Year", "year", { unique: false });
          resolve(dbReq);
      }
      dbReq.onsuccess = function (event) { 
        meDatabase = (<IDBOpenDBRequest>event.target).result; 
        let x = 1;
        resolve(dbReq);
      }
      dbReq.onerror = function (event) {
        reject('error opening database ' + (event.target as any).errorCode);
      }
    });
}

Also it's worth noting that there are already very good resources available for promisifying indexedDB, including the indefatigable Jake Archibald's idb , and others available onnpm .

Generally for production code you'll be better off using a solution like this, since it's probably more battle-tested.