如何將 MySQL 查詢結果從 Electron “主”進程傳回渲染器？

Question

我正在構建一個 React/Electron/MySQL 應用程序，並試圖將我的查詢結果（在 ipcMain 中）傳遞回渲染器。 這是基本框架：

主程序

ipcMain.handle("testQuery", async (event) => {
  connection.connect(function(err) {
    if(err){throw(err)}
    let sql = "SELECT * FROM `workers`";
    connection.query(sql, function(err, rows, fields) {
      if(err){console.log(err); return}
      console.log("results =", rows);
      connection.end(function(){})
      return rows; // i know this isn't currently returning anywhere useful
    })
  })
})

預加載.js

contextBridge.exposeInMainWorld("electronAPI", {
  testQuery: () => ipcRenderer.invoke("testQuery").then((result) => {return result})
})

我的組件.jsx

async function testQuery() {
  return await window.electronAPI.testQuery()
}

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {data : "nothing"}
  }

  render() {
    return (
      <button type="button" id="testButton" onClick={() =>
        testQuery((result) => {
          this.setState({data : result})
        })}>Test Query</button>
      <p>{this.state.data}</p>
    )
  }
}

我已經嘗試了一些在其他線程中發現的方法，比如傳遞一個回調（這沒有用，回調丟失了）。 在創造性地移動事物之后，我也收到了諸如“無法克隆對象”之類的錯誤。 如果我嘗試在 ipcMain 的頂部 scope 中聲明一個變量，並在將查詢結果作為“調用”回復傳回之前將查詢結果傳遞給它，我會得到“調用退出后無法排隊查詢”。 我應該瞄准什么方法？ （我也是 Promises 的新手。）

Answer 1

我沒有簡單的方法來測試它，但這就是我調整代碼的方式。 我也會按照午夜編碼的建議去做，並閱讀回調與承諾、序列化等。最終，你並沒有那么遙遠，還有。 我假設行 arg 是一個數組或對象，並且其中包含可序列化的數據，如果沒有的話。 您應該在使用該數據解析 promise 之前對其進行處理。 希望這對您有所幫助，祝您好運！

// main.js
ipcMain.handle("testQuery", 
  (event) => new Promise((resolve, reject) => {
      connection.connect(function(err) {
        if(err){
          reject(err); 
        } else {
          const sql = "SELECT * FROM `workers`";
          connection.query(sql, function(err, rows, fields) {
            if(err){
              console.log(err); 
              reject(err);
            } else {              
              console.log({rows});
              connection.end(function(){});
              resolve(rows); 
            }
          })
        }
      })
    })
)

// preload.js
contextBridge.exposeInMainWorld("electronAPI", {
  testQuery: () => ipcRenderer.invoke("testQuery")
})

// mycomponent.jsx
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {data : "nothing"};
    this.onClick = this.onClick.bind(this);
  }

  async onClick() {
    try {
      const data = await window.electronAPI.testQuery();
      this.setState({data})
    } catch (error) {
      // handle error
    }            
  }

  render() {
    return (
      <button type="button" id="testButton" onClick={this.onClick}>Test Query</button>
      <p>{this.state.data}</p>
    )
  }
}