react-nativesqlitereact-native-sqlite-storage

Unable to execute sqlite db query asynchronously in react-native


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",

Solution

  • 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();
    }, []);