intelliJでgraphQLを書くときに便利なプラグイン

intelliJでGraphQLを書くときに便利なプラグインを見つけました。
設定ファイルの記述が必要ですが、かなり書きやすくなるかなと思います。
こんな感じで補完が効きます。
![10月-04-2018 21-37-09.gif](https://qiita-image-store.s3.amazonaws.com/0/114396/35feaa90-5aca-379d-dd83-182b84807bb8.gif)

# js-graphql-intellij-plugin
こちらで公開されているプラグインです。
https://github.com/jimkyndemeyer/js-graphql-intellij-plugin

## 機能
* 自動補完
* シンタックスハイライト
* クライアント機能

# インストール

preference > pluginよりjsGraphQLで検索すると出てきます。
![スクリーンショット 2018-10-03 20.29.41.png](https://qiita-image-store.s3.amazonaws.com/0/114396/e43ad46d-8d94-02ee-9125-292828c225f9.png)
そのままインストールでOKです。

# 設定

インストール後に、.graphqlのファイルや、.jsでgraphqlが記述されているファイルを開くと、以下のようなinfoが出ます。
![スクリーンショット 2018-10-03 20.32.42.png](https://qiita-image-store.s3.amazonaws.com/0/114396/994ff2d3-7a0d-0e4a-2297-b3bd1c318396.png)


ここでcreate graphql.config.jsonを選択します。

するとroot直下に

* graphql.config.json 
* graphql.schema.json 

が自動生成されます。
graphql.config.jsonが設定ファイル。
graphql.schema.json がスキーマファイルの見本です。
この設定ファイルで、エンドポイントや、スキーマを設定していきます。


## APIのschema.jsonがある場合
接続するAPIのscheme.jsonがすでにある場合は、graphql.schema.jsonと入れ替えます。
また配置については、graphql.config.jsonの以下file部分に指定のscheme.jsonのパスを指定すればそちらを読み込むようになります。

```json

    "README_file" : "Remove 'file' to use request url below. A relative or absolute path to the JSON from a schema introspection query, e.g. '{ data: ... }' or a .graphql/.graphqls file describing the schema using GraphQL Schema Language. Changes to the file are watched.",
    "file": "graphql.schema.json", 


```

## schema.jsonがない場合
shcema.jsonがない場合は、エンドポイントから自動で解析してintellij上にschema.jsonの作成、補完、ハイライトを行うこともできます。
その際は先程説明したfile部分を削除し、

```diff
    "README_file" : "Remove 'file' to use request url below. A relative or absolute path to the JSON from a schema - -introspection query, e.g. '{ data: ... }' or a .graphql/.graphqls file describing the schema using GraphQL Schema Language. Changes to the file are watched.",
-    "file": "graphql.schema.json",

```

その下urlの部分をエンドポイントのURLに変更します。
以下例では[こちら](https://github.com/lucasbento/graphql-pokemon)のポケモンのAPIをローカルで立ち上げたものを使います。

```diff

    "README_request" : "To request the schema from a url instead, remove the 'file' JSON property above (and optionally delete the default graphql.schema.json file).",
    "request": {
+      "url" : "http://localhost:5000/",
      "method" : "POST",

```

それで保存すると以下画像のように、intellij上にschemaファイルが生成されます。
こちらからtype等定義されているものが確認できるので便利です！
（errorが出た場合は、エンドポイントが間違えているか、オプション（認証など）の設定が足りません）

![スクリーンショット 2018-10-04 20.22.26.png](https://qiita-image-store.s3.amazonaws.com/0/114396/592b932c-30e1-72a4-c1e5-c996ddcb1a66.png)


##  intellijからqueryを投げるためのエンドポイントの設定
shceme.jsonがある場合、ない場合もgraphql.config.jsonの以下URLの部分を編集すると、intellijからクエリを投げることができます。

```diff
  "README_endpoints": "A list of GraphQL endpoints that can be queried from '.graphql' files in the IDE",
  "endpoints" : [
    {
+      "name": "pokemon",
+      "url": "http://localhost:5000/",
      "options" : {
        "headers": {
          "user-agent" : "JS GraphQL"
        }
      }
    }
  ]
```

# 使ってみる

.gqlファイルでも
![10月-04-2018 21-37-09.gif](https://qiita-image-store.s3.amazonaws.com/0/114396/35feaa90-5aca-379d-dd83-182b84807bb8.gif)

.jsファイル内のgraphQLでも大丈夫です。
![10月-04-2018 21-52-45.gif](https://qiita-image-store.s3.amazonaws.com/0/114396/b10f9648-3f2f-d4e1-7df5-3cf117e177c9.gif)

更にクエリの実行もintellij上で行えます！！
![10月-04-2018 22-07-13.gif](https://qiita-image-store.s3.amazonaws.com/0/114396/be64ce02-22ee-7cb1-13ad-028bee20b095.gif)

便利！！