How to wait for database to finish querying before returning a response?

Question

I am making a React and Electron application that works closely with a local database. I have 2 tables, "blocked" and "unblocked" and the goal of this application is to move a row of data from one table to the other with one click of a button. Most things seems to be working fine but I am having trouble updating my table asynchronously with redux data. Here is the function I have to get the data:

var fetchDBData = (tablename) => {
  var db = new sqlite3.Database('processlist.db');
  var queries = [];
  db.each("SELECT * FROM " + tablename, function(err, row) {
    queries.push(row);
  });

  db.close();
  return queries;
};

And I have 2 actions that update redux:

export function updateBlockedFiles(blacklist_queries) {
  console.log(blacklist_queries);
  return {
    type: UPDATE_BLOCKED_FILES,
    payload: blacklist_queries
  }
};

export function updateWhitelistedFiles(whitelist_queries) {
    console.log(whitelist_queries);
    return {
        type: UPDATE_WHITELISTED_FILES,
        payload: whitelist_queries
    }
};

And my call in my component looks like this:

unblockProcess(id) {
    window.transferRowFromTable('blacklistdb', 'whitelistdb', id);
    var blacklist_queries = window.fetchDBData('blacklistdb');
    var whitelist_queries = window.fetchDBData('whitelistdb');
    this.props.updateBlockedFiles(blacklist_queries);
    this.props.updateWhitelistedFiles(whitelist_queries);
};

The problem that I discovered happens mainly in fetchDBData(). When I call this.props.updateBlockedFiles(), it returns me an empty queries array instead of a populated one. I figured this may be an async issue, but I'm not sure how to fix it. I've seen the idea of using promises, but I don't know how to integrate that with React. Any help would help!

Answer 1

I am doing something similar...let me paint the concept and see if it makes sense.

Prior to sending your IPC request to the main process to run the SQL, create an IPC listener in your renderer process to act as a callback when the SQL query is complete. This callback could be constructed to handle data output from the SQLite query. Rough example below:

Renderer Process:

var ipcRenderer = require('electron').ipcRenderer    

function handleDBResponse(event, data){
   // Do something with the data
}

ipcRenderer.on('dbResponse', handleDBResponse)

ipcRenderer.send('dbQuery', "some_table_name")

Main Process:

var ipcMain = require('electron').ipcMain

function doDBQuery(event, tablename){
    // Perform your DB query via SQLite

    var db = new sqlite3.Database('processlist.db');
    var queries = [];
    db.each("SELECT * FROM " + tablename, function(err, row) {
      queries.push(row);
    });

    db.close();
    // Send queries back to callback handler
    event.sender.send('dbResponse', queries)
}

ipcMain.on('dbQuery', doDBQuery)

This is all done via the IPC methods of Electron to communicate between the main and renderer process. More details can be researched here: https://github.com/electron/electron/blob/master/docs/api/ipc-main.md