IntelliJでGatsbyのGraphQLスキーマを認識させてクエリの補完を効かせる

この投稿ではIntelliJ IDE¹でGatsbyのGraphQLスキーマを認識させ、JSコード上のGraphQLクエリの補完が効くようにする方法を紹介します。

やりかた

IDEにJS GraphQLをインストールする

まずIDEにJS GraphQLプラグインをインストールします。

「Preferences」→「Plugins」→「Marketplace」を開き、「GraphQL」で検索し、JS GraphQLをインストールします。

IDEを再起動します。

Gatsby開発サーバを起動する

コンソールでGatsby開発サーバを起動して、GraphQLのエンドポイントhttp://localhost:8000/___graphqlが生えるのを待ちます。

gatsby develop

GraphQL設定ファイルを作る

プロジェクトルートのディレクトリを右クリック→「New」→「GraphQL Configuration File」をクリックします。

.graphqlconfigというファイルが作られるので、その中身を次のとおりにします:

.graphqlconfig

{
  "name": "Gatsby Schema",
  "schemaPath": "gatsby.graphql",
  "extensions": {
    "endpoints": {
      "Gatsby GraphQL Endpoint": {
        "url": "http://localhost:8000/___graphql",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}

GatsbyのGraphQLスキーマファイルを生成する

.graphqlconfigを開くとエディタの7行目に実行ボタン(▶)が表示されるので、それをクリックします。

これを実行すると、gatsby.graphqlという名前でGraphQLのスキーマファイルが生成されます。

以上で、IDE上でGatsbyのGraphQLスキーマが認識されるようになり、クエリの補完が効くようになります。

補完を試す

GraphQLの文字列上で、Ctrl + Spaceを押すとフィールドなどが補完されます。

おわり

ここで紹介した方法を使ったサンプルプロジェクトはGitHubにあります:

suin/gatsby-playground at intellij-graphql

---

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローしてもらえると嬉しいです→Twitter@suin

1. IntelliJ IDEだけでなくWebStorm, IntelliJ IDEA, Android Studio, RubyMine, PhpStorm, PyCharmにも対応。 ↩