createRepoが実行できた。JSONをブラウザ側に返せた！

ブツ

インストール＆実行

NAME='Electron.Axios.HelloWorld.20220824102245'
git clone https://github.com/ytyaru/$NAME
cd $NAME
npm install
npm start

準備

  1. npm startでアプリ起動し終了する（db/setting.jsonファイルが自動作成される）
  2. db/setting.jsonに以下をセットしファイル保存する
    1. usernameに任意のGitHubユーザ名
    2. tokenにrepoスコープ権限を持ったトークン
    3. repoに任意リポジトリ名（mytestrepo等）
  3. dst/mytestrepo/.gitが存在しないことを確認する（あればdstごと削除する）
  4. GitHub上に同名リモートリポジトリが存在しないことを確認する（あれば削除する）

もし同名リモートリポジトリが存在していると422エラーになる。

実行

  1. npm startで起動またはアプリでCtrl+Shift+Rキーを押す（リロードする）
  2. git initコマンドが実行される
    • repo/リポジトリ名ディレクトリが作成され、その配下に.gitディレクトリが作成される
  3. createRepo実行後、端末に以下のような成功メッセージが表示される

ドキュメント

コード抜粋

main.js

const axios = require('axios');
ipcMain.handle('axiosPost', async(event, url, data, config)=>{
    const res = await axios.post(url, data, config).catch(e=>console.error(e));
    return res
})

上記コードだと開発者コンソールに以下のようなエラーが表示される。

Error: Error invoking remote method 'axiosPost': Error: An object could not be cloned.

HTTPリクエスト後の処理を実装できない問題の調査のとおり、IPC通信におけるシリアライズ制約が原因である。

このエラーが出るにもかかわらず、なぜかGitHub上でリモートリポジトリ作成には成功する。意味不明。

なんかAPIやライブラリごとに挙動がすべて違うな……。

エラーの原因を分析してみる。リポジトリ作成できていることからAPIの発行までは成功しているはず。それ以降でエラーになっているということは、もうreturn resしかない。そしてエラー内容はシリアライズ制約にひっかかったことを意味するAn object could not be cloned.。となると戻り値のresの中に関数などシリアライズ不可能な何かが入っているのかな？

axios responseをみてみると、すべてオブジェクトに見える。問題なさそうだけど、その配下に関数が含まれているのかもしれない。とりあえずAPIレスポンスとして返されるJSONオブジェクトさえ返せればいい。それらしいのはres.dataだろう。以下のようにコードを修正した。

const axios = require('axios');
ipcMain.handle('axiosPost', async(event, url, data, config)=>{
    const res = await axios.post(url, data, config).catch(e=>console.error(e));
    return res.data
})

これで実行するとエラーがなくなり成功した！　ちゃんとrenderer.js側にもJSONを返せた！　これがやりたかった！

preload.js

axiosPost:async(url, data, config)=>await ipcRenderer.invoke('axiosPost', url, data, config),

renderer.js

const res = await window.myApi.axiosPost(
    `https://api.github.com/user/repos`,
    {
        'name': `${setting.github.repo}`,
        'description': 'リポジトリの説明',
    },
    {
        'headers': {
            'Authorization': `token ${setting.github.token}`,
            'User-Agent': `${setting.github.username}`,
            'Content-Type': 'application/json',
        }
    }
).catch(e=>console.error(e));
console.log(res)

ちゃんとresでGitHub APIの戻り値であるJSONが取得できた！　アプリの開発者ツールのコンソールに表示される。

これでやっとHTTPリクエスト後の処理が実装できそうだ。