【VSCode】Apollo GraphQLをHasuraと組み合わせて使う方法

下記のページを参考に設定
Guides: Visual Studio Code Setup | Hasura GraphQL Docs

インストール

まずはVSCodeにプラグインのインストール
Apollo GraphQL - Visual Studio Marketplace

このプラグインを入れるとGraphQLにシンタックスハイライトがつき、GraphQL入力時に、補完が使えるようなるのでApollo + GraphQLを使うなら必須。

インストール後、apollo.config.jsをルートディレクトリに作成し、
自分の場合はHeroku上のHasuraのサーバを置いているので、以下のように設定する。

name: 任意の名前
url: HasuraのエンドポイントURL
x-hasura-admin-secret:
=> Heroku上のHasuraのアプリを選択 => Settings => Config Varsに
HASURA_GRAPHQL_ADMIN_SECRET: SECRET_KEY
と同じSECRET_KEYを入れる

(補足) HASURA_GRAPHQL_ADMIN_SECRETの設定の仕方
Run Hasura GraphQL engine on Heroku | Hasura GraphQL Docs

module.exports = {
  client: {
    service: {
      name: "<任意の名前>",
      url: "<HasuraのエンドポイントURL>",
      headers: {
        "x-hasura-admin-secret": "<SECRET_KEY>"
      }
    }
  }
};

VSCode上で、⌘ + Shift + Pで"Apollo: Reload Schema"を選択すれば設定が読み込まれるので、これでエラーが出なければ補完が効くようになる。

[参考]
Hasura Authentication Explained