indexedDB Error createObjectStore when used inside onMount fn with sveltekit

Question

First time trying to use indexedDB. Attempting to create an objectStore but I'n getting the error shared below. I've never used indexeddb in sveltekit before so I have no idea how to fix it.

I created a basic sveltekit using the steps outlined in their doc. In index.svelte, I imported onMount fn and typed the following

import { getContext, onMount } from 'svelte'; import { detach_before_dev } from 'svelte/internal';

onMount(async () => {

   const request = indexedDB.open("okdb", 1)
 request.onerror = (event) => {
    console.error('Database error:' , event);
};

request.onsuccess = (event) => {
       console.log("onsuccess log :", event)

       let db = event.target.result;

// create the Contacts object store 
// with auto-increment id
let store = db.createObjectStore('Contacts', {
    autoIncrement: true
});


};



})

I get the following error:

  index.svelte? [sm]:42 Uncaught DOMException: Failed to execute 'createObjectStore' on 'IDBDatabase': The database is not running a version change transaction.
    at IDBOpenDBRequest.request.onsuccess (http://localhost:5000/src/routes/index.svelte:121:19)

I see the db created in my dev tools application tab but I get the error above every time I try to create the createObjectStore. It seems like a straightforward object creation procedure and it shouldn't give any error.

Any idea why or how to fix it? I don't need to import app/evn browser from the sveltekit, do I?

Answer 1

After reading the doc, it is clear that onupgradeneeded has to include new version to trigger the creation of the ObjectStore.

Increase the db version

 const request = indexedDB.open("okdb", 2)

It will trigger onupgradeneeded which will allow you to create ObjectStore like this:

let customerData = [
    {ssn:"444-44-4444",name:"Bill",age:35,email:"[email protected]"},      
    {ssn:"555-55-5555",name:"Donna",age:32,email:"[email protected]"},
    {ssn:"666-66-6666",name:"Simone",age:10,email:"[email protected]"}
  ];

request.onupgradeneeded = function(event) {
     
    let db = event.target.result
    console.log("onupgadeneeded log :", event.target.result)


    //adding new objectstore

    var objectStore5 = db.createObjectStore("customers5",{keyPath:"ssn"});
      objectStore5.createIndex("name","name",{unique:false});
      objectStore5.createIndex("email","email",{unique:true});
       for(var i in customerData){
         objectStore5.add(customerData[i]);
      }

Then from there you can perform the rest of the crud operations.

var transaction = db.transaction(["customers"], "readwrite");
// Do something when all the data is added to the database.
transaction.oncomplete = event => {
  console.log("All done!");
};

transaction.onerror = event => {
  // Don't forget to handle errors!
};

var objectStore = transaction.objectStore("customers");
customerData.forEach(customer => {
  var request = objectStore.add(customer);
  request.onsuccess = event => {
    // event.target.result === customer.ssn;
  };

});