altair GraphQL client のプラグインを作る

みなさんGraphQL開発していますか？

個人的に開発時のローカルクライアントとしてお勧めしているのがAltair GraphQL Clientです

altair.sirmuel.design

GraphiQLとかも選択肢とはありますが、それに比べると・コレクション機能（リクエストをエクスポートして共有できる）・pre/post script機能（変数/ローカルストレージの値を利用してリクエスト前にヘッダを設定するようなスクリプトが動かせる）というような機能がありチーム開発だと便利だったりします。

今回はこのaltairのプラグインを作ってみます

viteで設定

今回はviteで作成します。いつものコマンドでプロジェクトフォルダを作成します。(react+ts)

npm create vite@latest

なお今回はSPAではなく

Writing A Plugin | Altair GraphQL Client

にあるようなプラグインスクリプトがゴールのため、成果物/エントリポイントがhtmlではないです。

vite.config.tsを適切に記述することでビルド成果物ファイル名の設定と、エントリポイントの設定を行います。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'src/index.ts'), //成果物名
      },
      output: {
        entryFileNames: `index.js`, //エントリポイント
      },
    }
  }
})

altairの設定:plugin manifestについて

altairプラグインのnpmモジュールはルートフォルダにmanifest.jsonに独自のフォーマットのjsonを記述する必要があります。

https://altair.sirmuel.design/docs/plugins/writing-plugin.html

上記ページに入れるべき設定が記載されています。今回は以下のようにしました。

{
    "manifest_version": 1,
    "name": "altair-graphql-plugin-[名称]",
    "version": "0.0.1",
    "display_name": "[表示名称]",
    "description": "[説明]",
    "type": "header",
    "sidebar_opts": {
        "element_name": "[nameと同じ]",
        "icon": "assets/icon.svg"// アイコン
    },
    "scripts": [
        "dist/index.js"//読み込みスクリプト
    ],
    "plugin_class": "AltairPluginName" //任意の名称
}

このファイルでplugin_classで指定したウィンドウのプロパティをプラグインとして動作させるという設計のようです（以下コード抜粋）

class AltairPluginName {
    initialize(ctx:any) {
...
    }
    async destroy() {}
}
export {}

// Add the class to the Altair plugins object
(window as any).AltairGraphQL.plugins.AltairPluginName = AltairPluginName;

なお他にもnpmモジュール名をaltair-graphql-plugin-から始めるように等細かい規約/制約が存在します。公式の説明を読んで適宜設定しましょう。

完成したのがこちらです

https://github.com/osjupiter/altair-graphql-plugin-cognito-auth

クリックすると数字が増えるカウンタがウィンドウに増えました。やったね

本来はこの後に altair.sirmuel.design

に記載があるように,

ctx.app.createAction
ctx.events.on(evt, callback)

のようなAPIを利用して、作成したいプラグインの動作を記述していくことになります。

おまけ: バンドル後のサイズについて

今回の成果物のjsファイルのサイズは114kbでした。バンドル後のサイズが気になる場合はpreact/solidjsあたりを使用するのが良さげっぽいですね？ vanilajsでも頑張れば作成できると思うので、機会があれば試してみようと思います。そもそもパネルを既存の画面に追加するくらいのため、altairプラグイン開発ではUI関連ライブラリのが充実していないツールセットでも問題なく採用できるかと思います。

おまけ: vite

Vite Plugin Node で Vite を Node.js Webアプリケーションの開発でも利用する - Webdelog

に記述があるんですが、どうもviteにはなぜか（サーバ側の）webアプリケーションをhmrする変態機能がついているみたいです。すごいですね

今後の予定

チームではAWS AppSyncを使いgraphQLのAPIを公開しているのですが、認証にcognitoを紐づけています。この紐付けを行うと、リクエストのAuthorizationヘッダにcognitoのアクセストークンを設定しないとリクエストが弾かれるようになります。

この後はプラグインでaltairからcognitoにログインできるようにしてみる予定です