Strawberry Shake (.NET) で GraphQL #2 JetBrains Rider 編

Strawberry Shake (.NET) で GraphQL #2 JetBrains Rider 編

• Strawberry Shake (.NET) で GraphQL #1 こと始め
• Strawberry Shake (.NET) で GraphQL #2 JetBrains Rider 編
• Strawberry Shake (.NET) で GraphQL #3 Shopify につなぐ
• Strawberry Shake (.NET) で GraphQL #4 GraphQL の型とのマッピングのカスタマイズ
• Strawberry Shake (.NET) で GraphQL #5 GraphQL union の利用

前回のブログで、Strawberry Shake で GraphQL の始め方を紹介しました。簡単にまとめておくと、Strawberry Shake は .NET 用の GraphQL のクライアントライブラリで、GraphQL の定義ファイルから Source Generator を自動生成します。

今回は GraphQL のクエリを JetBrains Rider で作成する方法を紹介します。GraphQL は RESTful API と異なり、どういう条件で何が欲しいかをクエリとして書かなければなりません。このあたりの支援を JetBrains Rider が行ってくれます。支援なしではかなり大変だと思います。

• .graphql ファイルを利用してクエリを実行できる
• .graphql ファイルを書くときに GraphQL スキーマを利用して補完が効く

Visual Studio や Visual Studio Code でも拡張機能をインストールすれば同等のことができると思うので、それらの IDE をご利用の方は探してみてください。

JetBrains の公式ブログ Building a GraphQL Client in .NET with JetBrains Rider and StrawberryShake に解説がありましたのでこれをもとに行っています。

GraphQL プラグインが必要です。Prerequisities を見て、インストールされていなければインストールしてください。

スキーマを同期する

前回作成したプロジェクトの SampleApp.csproj ファイルを JetBrains Rider で開いてください。

Rider のエクスプローラーペインの SampleApp プロジェクトを右クリックし、追加 -> GraphQL 構成ファイル を選びます。作成された graphql.config.yml ファイルの内容を消して、次の内容をコピペします。

graphql.config.yml

schema: schema.graphql
documents: '**/*.graphql'
extensions:
  endpoints:
    production:
      url: https://workshop.chillicream.com/graphql/

エディターウインドウで開いている .graphql.config.yml の production セクションの左側に再生ボタンが出ていますので、これをクリックします。そうすると schema.graphql ファイルが生成されます。このファイルは StrawberryShake ですでに作成済みなで内容は同じです。

ところで、.graphqlrc.json も graphql.config.yml も GraphQL の設定ファイルのようです。書き方は同じなのですが、StrawberryShake は .graphqlrc.json を必要とし、 Rider は graphql.config.yml を利用するようです。 一つにまとめられれば便利なんですけどねぇ...

GraphQL IntelliJ Plugin の Configuration files に .graphqlrc.json が使えると記載がありました。内部的には graphql-config を利用しているようです。というわけで .graphqlrc.json に寄せてしまえば、Strawberry Shake と Rider (IntelliJ 系) で設定ファイルを一つにするのはできました。

クエリを書いて実行する

前回作成した GetSessions.graphql ファイルを開いてください。エディターウインドウの上部に実行のためのツールバーがあります。

production - https://... とあるところが接続先です。その右の再生ボタンをクリックすると実行できます。

.graphql ファイルの編集は補完が効きます。API 提供元のドキュメントを見ながらクエリを書くことができます。例えばセッションの ID も欲しいと思ったら次のようにします。

一度 dotnet build をした後に Program.cs を次のように修正します。

// ...

foreach (var session in result.Data.Sessions.Nodes)
{
    Console.WriteLine($"{session.Id}:{session.Title}");
}

実行するとセッション ID も表示されます。

$ dotnet run
U2Vzc2lvbgppOTA=:"Hey Mycroft": Getting Started with the OSS Home Assistant
U2Vzc2lvbgppNjQ=:(WPF + WinForms) * .NET Core = Modern Desktop
U2Vzc2lvbgppNDU=:.NET Rocks Live on Software Feature Selection with Christine Yen

// ...

続けてセッションの情報を一つ取得することをやってみます。

Rider のエクスプローラーペインの SampleApp プロジェクトを右クリックして、追加 -> GraphQL ファイル を選びます。ファイル名は GetSession.graphql とします。

GetSession.graphql

query GetSession($id: ID!) {
    sessionById(id: $id) {
        id
        title
    }
}

必要に応じて title 以外の情報も追加してみてください。

クエリが書けたら実行するのですが、実行すると Variable id is required. とエラーになります。このクエリは引数 id を必要としますので、引数を指定して呼び出さなければなりません。

GetSession.graphql のエディターウインドウの GraphQL ツールバーの production - https://... の左側の V ボタンを押すと、引数の入力ができるようになりますので、引数を JSON 形式で書いて実行します。

{
  "id": "U2Vzc2lvbgppOTA="
}

最後に

GraphQL クエリは頻繁に微調整されることになると思います。その際 .graphql ファイルを修正することになるのですが、Strawberry Shake は自動生成な都合上、.graphql ファイルの間違いに気が付きにくいです。そこで、IDE の .graphql ファイルの入力支援とそのままデバッグできる機能は重要になります。

次回はオンラインショップのクラウドサービスの Shopify に接続してみます。