Javascript await sequence problem in expo-sqlite

Question

I am using react native expo to do the init data load and insert it into DB. But seems the sequence is not my expectations.

and below is my init function

import { getData } from './GetData'
const db = SQLite.openDatabase('db.db') // returns Database object

const initDB = async (res: any) => {
    await db.transaction(async tx => {
        await tx.executeSql(`create table if not exists table (
            id integer primary key AUTOINCREMENT not null,
            ...... // create db query
        )`, [], 
        () => {
            console.log("created table")
        })
        
        await tx.executeSql(insertQuery
            , res.list,
            () => {
                console.log(`inserted data success`)
            },
            (_, err): boolean | any => {
                console.log(`err: ${err}`)
            }
        )
    })
}

export const initLoading = async () => {
    const res = await getData() // get data from API
    await initDB(res)
}

await new Promise(async resolve => {
    await initLoading()
    console.log("init done")
})

my expected console log should be

created table
inserted data success
init done

but the result is

init done
created table
inserted data success

what thing I am doing wrong to make the sequence incorrect?

You normally don't pass callbacks to functions which you expect to return a promise — Bergi, Feb 07 '22 at 10:48
I don't see anything in [the Expo documentation](https://docs.expo.dev/versions/latest/sdk/sqlite/#websqldatabase) to suggest those methods return promises. `await` doesn't do anything useful when used on something that isn't a promise. If Expo doesn't already offer a promise-based API, you may want to [wrap the API in a promise layer](https://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises) so you can use `async` functions and `await`. — T.J. Crowder, Feb 07 '22 at 10:49

score 2 · Accepted Answer · answered Feb 07 '22 at 10:54

The problem is that in db.transaction you pass a function as argument. You dont await the function you passed, but you await just the execution of db.transaction. I think the best way to fix this is to wrap db.transaction in a Promise and resolve it when you need it to.

const initDB = async (res: any) => {
    return new Promise(async resolve => 
        await db.transaction(async tx => {
            await tx.executeSql(`create table if not exists table (
                id integer primary key AUTOINCREMENT not null,
                ...... // create db query
            )`, [], 
            () => {
                console.log("created table")
            })
            
            await tx.executeSql(insertQuery
                , res.list,
                () => {
                    console.log(`inserted data success`)
                    // Resovle when the data is successful
                    resolve()
                },
                (_, err): boolean | any => {
                    console.log(`err: ${err}`)
                }
            )
        })
    )
}

I would recommend you to also resolve on error. Else your code get's stuck.

Javascript await sequence problem in expo-sqlite

1 Answers1