はじめに

この記事は一休.com Advent Calendar 2023 2日目の記事です

GraphQL subscrptionのフィールドの実装中、たいていGUIで動作確認すると思います。私は普段Apollo Studioで下記のような画面を眺めながら開発しています

しかし、エンジニアたるものCLIでも確認したいですよね。というわけで今回は小ネタとしてCLIでGraphQL subscriptionの動作確認をする方法を紹介します

環境

GraphQLサーバーフレームワーク: Apollo Server
プロトコル: websocket
websocketライブラリ: graphql-ws

手順

wscatで接続する

wscat -s graphql-transport-ws -c ws://127.0.0.1/graphql
Connected (press CTRL+C to quit)

タイムアウトする前に急いでinitメッセージを送る
```
> {"type": "connection_init"}
< {"type":"connection_ack"}
```

クエリを送信する

> {"id":"hoge","type":"subscribe","payload":{"query":"subscription ($restaurantId: Int!, $groupId: String!, $date: Date!) {\n  group(groupId: $groupId) {\n    restaurant(restaurantId: $restaurantId) {\n      operatingDay(date: $date) {\n        reservations {\n          reservationId\n          visitDateTime {\n            begin\n            end\n          }\n          guest {\n            name\n          }\n        }\n      }\n    }\n  }\n}","variables":{"restaurantId":***,"groupId":"ikyu","date": "2023-12-02"}}}
< {"id":"hoge","type":"next","payload":{"data":{"group":{"restaurant":{"operatingDay":{"reservations":[]}}}}}}

publishを発火させると、更新された結果を受信する

< {"id":"hoge","type":"next","payload":{"data":{"group":{"restaurant":{"operatingDay":{"reservations":[{"reservationId":"32a88f68-71fc-4492-aba5-4d2171b3f87e","visitDateTime":{"begin":"2023-12-02T11:00:00.000Z","end":"2023-12-02T13:00:00.000Z"},"guest":{"name":"ミーア・ルーナ・ティアムーン"}}]}}}}}}

所感

wscatは独特な対話インターフェースを持つプログラムなのでGraphQLの文脈で普段使いするのは難しいですが、ラップして透過的に扱えるようなツールがあればこうした用途でも十分使える気がするので、そういうものを知ってるよっていう方や作ったよっていう方がいれば教えてください

参考