【VSCode】GraphQLのクエリの定義からschemaファイルを参照できる拡張機能

概要

VSCodeで、GraphQLのクエリ定義からschemaファイルを参照できる拡張機能があったので、少し紹介したいと思います。

拡張機能のセットアップ

• 拡張機能はGraphQL: Language Feature Supportになります。まずはこちらをインストールします。
• .graphqlrc.ymlにてschemaファイルと、クエリを定義するファイル（documents）を設定します。TypeScriptにてクエリを定義する場合は、上記の拡張機能のページにあるように以下のような設定になります。

.graphqlrc.yml

schema: 'schema.graphql'
documents: 'src/**/*.{graphql,js,ts,jsx,tsx}'

できること

以下のキャプチャーのように、クエリを定義してるファイルからschemaファイルの定義に参照できるような感じになります。

また、以下のようにクエリを書くときのサジェストもしてくれます。