Electron await function and access to returned data

Question

I've seen similar questions asked, but still having trouble grasping the concept of Async/await functions and access to main.js within an Electron app.

I have an Electron app with the following files:

main.js ( some of the un-related details missing here )

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const https = require('https')
const axios = require('axios')
const url = require('url')

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    webPreferences: {
      contextIsolation: true,
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
      preload: path.join(__dirname, 'preload.js')
    },
    width: 1920,
    height: 1080,
  });

ipcMain.handle("doSomethingAxios", async () => {
  const response = await axios.get('http://www.boredapi.com/api/activity/');
  console.log(response.data);
  return response.data;
});

preload.js

const { contextBridge, icpMain, ipcRenderer } = require('electron')

let indexBridge = {
  doSomethingAxios: async () => {
    var result = await ipcRenderer.invoke("doSomethingAxios");
    var whattodo = document.getElementById("whattodo");
    whattodo.innerText = result.activity; // This works.
    // Can't access Jquery or other libraries here.


  }
}

contextBridge.exposeInMainWorld("indexBridge", indexBridge);

renderer.js

$("#callApi").click(function(){
    window.indexBridge.doSomethingAxios();
    // Can access Jquery libraries here, but can only return promise from this call.
});

index.html

This works, and I am able to call the function and populate the results in the div tags within my index.html, but where I get confused, is if I wanted to perform some post processing with the data using Jquery.

In my preload.js, I can do some manipulation of the data with JS, but what if I wanted to use another JS library to modify the data?

For example, let's say that I wanted to use Jquery to modify the data after it is returned. As far as I can tell and have read, I can't include Jquery in my preload.js file. So, it seems all I can do is return the data to the preload.js, and only return a promise to the renderer.js.

Another example if not clear. Sometimes I like to use the datatables plugin. After data is populated into the table, with datatables, you need to call the reload() function to reload the table. In a normal web application, I would make an ajax call to a server side script, get the data, then return an ajax response to populate the table and call the reload function.

I guess, i'm just hung up on how to make below function like a ajax call, where I call a function to server side, return the data to calling function, and then have access to JS libraries to manipulate the data. Right now, it seems that I am only able to return data to the preload.js, and if I try to return from the preload.js to the renderer.js, I can only return a promise, and not the actual data.

Any ideas of what general concept I am missing here?

Electron await function and access to returned data

0 Answers