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
ファイルの内容を消して、次の内容をコピペします。
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
とします。
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 に接続してみます。
Discussion