Correct way to add multiple objects in indexedDb?

Question

I have the following array of objects which i want to add to and indexedDb:

const data = [
    { name: 'abc',
      color: 'blue'
    },
    { name: 'xyz',
      color: 'red'
    },
    { name: 'yui',
      color: 'black'
    }];

Now i create the database and insert this data into a store like this:

if (!db.objectStoreNames.contains("people")) {
        peopleStore = db.createObjectStore("people", { keyPath: "name" });
        peopleStore.createIndex("color", "color", { unique: false });

        peopleStore.transaction.oncomplete = function(event) {
            data.forEach(function(data) {
                operations.add(data);
            });
        };
    }

I have defined a function expression with an add() (inside a const operations) method like shown below:

add: function(data) {
            let request = db
                .transaction(["people"], "readwrite")
                .objectStore("people")
                .add(data);
        }

So here are my questions:

1. Is this way creating a new transaction every time the add() method is being called or is it inserting all data in a single transaction?

2. If it is creating a new transaction every time, how can i make only 1 transaction to improve performance and perform all operations in it only. I am guessing i have to create a global variable with the transaction and perform operations on it (there are other methods too, like edit(), delete(), etc., with each one of them having a "request" variable inside them defining a transaction, similar to what i have shown above). should i make a global variable something like this:

const globalTrans = db.transaction(["people"], "readwrite").objectStore("people");

3. Is creating a new transaction a costly operation?

Thanks in advance to everyone who takes their time to reply! :)

Answer 1

Creating global variable will create issue. It might be that a transaction is runing and for another operation you might overwrite it.

e.g -

var globalTx;
// let's say you are selecting data from people
globalTx = db.transaction(["people"], "read")  // in read access
// and at same time you are inserting data from employee
globalTx = db.transaction(["employee"], "readwrite") // in read write

There are many ways to solve the issue -

1. Create multiple methods based on scenario -

// for single value
function add(data) {
    let request = db.transaction(["people"], "readwrite").objectStore("people").add(data);
}

// for multiple value
function addMultiple(datas, callback) {
    const tx = db.transaction(["people"], "readwrite");

    datas.forEach(data => {
        let request = tx.objectStore("people").add(data);
    })

    tx.oncomplete = function(event) {
        callback();
    }
};

2. Modify the function to only receive array values -

// so now data will be only array    
function add(datas, callback) {
    const tx = db.transaction(["people"], "readwrite");

    datas.forEach(data => {
        let request = tx.objectStore("people").add(data);
    })

    tx.oncomplete = function(event) {
        callback();
    }
};

// so when want to insert single value , we will call like this.

const value = {
    id: 1,
    name: 'ujjwal'
}
add([value], () => {

})

Hope this answers your question.