Unable to execute sqlite db query asynchronously in react-native

Question

I have a component where i need to execute couple of query one after another. I used promise but seems like its not working/i am unable to do so. Here is my portion of my component:

export default function AuthWrapper() {
    useEffect(() => {
        // creating app_tokens table if not exist
        console.log('before first query');
        new Promise((resolve) => {
            db.transaction(function (txn) {
                txn.executeSql(
                    "SELECT name FROM sqlite_master WHERE type='table' AND name='app_tokens'",
                    [],
                    function (tx, res) {
                        console.log('first query executed');
                        resolve(res);
                    },
                    function(error) {
                        console.log(error);
                    }
                );
            });
        });

        console.log('before second query');
        // creating users table
        new Promise((resolve) => {
            db.transaction(function (txn) {
                txn.executeSql(
                    "SELECT name FROM sqlite_master WHERE type='table' AND name='users'",
                    [],
                    function (tx, res) {
                        console.log('second query executed');
                        resolve(res);
                    },
                    function(error) {
                        console.log(error);
                    }
                );
            });
        });

        console.log('before third query');
        // creating institute_details table
        new Promise((resolve) => {
            db.transaction(function (txn) {
                txn.executeSql(
                    "SELECT name FROM sqlite_master WHERE type='table' AND name='institute_details'",
                    [],
                    function (tx, res) {
                        console.log('third query executed');
                        resolve(res);
                    },
                    function(error) {
                        console.log(error);
                    }
                );
            });
        });
    }, []);
}

When i run this code log is showing like this:

before first query
before second query
before third query

first query executed
second query executed
third query executed

But it should be like this:

before first query
first query executed

before second query
second query executed

before third query
third query executed

Can anyone help me out what i am missing!

FYI: I am using

"react": "16.11.0",
"react-native": "0.62.2",
"react-native-sqlite-storage": "^5.0.0",

Answer 1

You are asking it wrong, you want it synchronously as per me by looking at output you want.

For that async - await is there.

I don't know why you have used promise but, yeah with the code you have right now you can do something like this,

const myFirstFunction = () => {
  return new Promise((resolve) => {
    db.transaction(function (txn) {
      txn.executeSql(
        "SELECT name FROM sqlite_master WHERE type='table' AND name='app_tokens'",[],
        function (tx, res) {
          console.log('first query executed');
          resolve(res);
        },
        function (error) {
          console.log(error);
        },
      );
    });
  });
};

const mainFunction = async () => {
  console.log('before first query');
  await myFirstFunction();
  // ... similarlly create and call other functions here
  // ... creating different methods will be easy to maintain
};

useEffect(() => {
  mainFunction();
}, []);