今回は2021年12月3日開催のRelay Meetup #2のレポートをお届けします。 ここ最近は忙しくて記事が書けていませんが、遅れてもRelay Meetupの記事投稿は続けられたらと思っています。
今回は主催者のGabriel Nordeborn、1stDibsからLiliana Matosと Rob Richard、Entria TechからSibelius Seraphini、そしてFacebookのRelayコアチームからJoseph Savonaが登壇してくれました。
Relay Meetupについて
Relay Meetupは、GraphQLクライアントであるRelayのミートアップです。 今回もYoutube上でのオンラインミートアップとして開催され、参加者はYoutube上のチャットやDiscordでの交流となりました。 全て英語となりますが、当日の模様はYoutubeのアーカイブに残っていますので是非ご覧ください。
正直なところ、私は英語のヒアリングが下手なので字幕なしだと分からないところもありますね…。このレポートは雰囲気で書いています（笑）
それではイベントのレポートに入っていきましょう！
1. Relay関連のニュース
イベントの最初はRelayの関連ニュースの紹介からとなりました。
Relay 10.1.0リリース
Relay 10.1.0がリリースされました。本記事を書いている時点で10.1.3までリリースされています。
主なトピックで言うと、前回のMeetupでも話していたStore updater directiveの種類が増えました。具体的には@appendNodeやprependNode、deleteEdgeなどですね。
Mutationでデータに変更を加えても直接キャッシュを弄るコードを書かなくて良いので本当に便利です。
他にもcacheConfigの拡張サポートだったりReact17対応が入ったようです。
meros
multipart responseの読み込みをサポートしてくれるライブラリであるmerosの紹介もありました。 Relay界隈でよく活動しているMarais Rossouwが作ってます。
本イベントでも話される@deferや@streamはGraphQLサーバーがレスポンスをmultipartで返す仕様で、クライアントはそれを受け取って処理できないといけません。 merosはそのあたりの処理をやってくれるライブラリのようです。
ちなみに、@deferのmultipartなレスポンスを受けるプログラムについて、日本語で解説している方がいますので気になる方は読んでみると良いかもしれません。 ⇒ GraphQL の @defer, @stream ディレクティブを試してみる
Graphql Helix
Graphql HelixはGraphQLサーバーを構築するためのライブラリの紹介です。こちらも@defer/@streamの文脈での紹介となります。 Graphql HelixはExpressなどのNode.jsのWebフレームワークをGraphQL対応させるためのシンプルなユーティリティ関数集といったところです。シンプルでミニマルなところを特徴としています。 このライブラリは@defer/@streamに対応済みなので、これを使って簡単に@defer/@streamを動かすことができるようです。
2. Relay Workshop
メインセッションの前半パートはRelay Workshopについて。 https://youtu.be/5E5KdSU7Exs?t=938 これを読んでいる方にRelayの初学者がいるかは分かりませんが、初学者の方にとってはSibeliusが作っているRelay WorkshopはRelayを学び始める良い手段になると思います。
Relayは学習曲線が急な上に公式ドキュメントが薄く、私も学び始めは「このAPIどうやって動かすんだろう？」と思うことがしばしばありました。 そして分からないのでRelayのソースコードを読んで調べるという…。
そこでRelay Workshopです。 Relay Workshopでは豊富な実例と共にRelayを学ぶことができます。 サンプルはHook対応で書かれているので、これからのRelayのアップデートで忘れ去られる知識を覚えてなくて良いのも素晴らしいです。
今回のイベントでは、Relay Workshopがどんなワークショップなのか、どうやって使うのかも含めて説明されていますので、気になる方は動画も見てみてください。
Sibeliusも話していましたが、Relay初学者が心折れるところは「なんでか分からないけどRelayコンパイラが動かない」という時なんですよね。 初学者じゃなくなるとそのコンパイルがあるからこそ安全に素早く書ける実感が得られるのですが、そこまでが長い。 そうした障害に対して、動作するサンプルコードを豊富に用意することで解決するアプローチは素敵だと思います。
3. @deferと@stream
メインセッションの後半パートは@defer/@streamについて。 https://youtu.be/5E5KdSU7Exs?t=2807 @deferと@streamの話を1stDibsのLiliana MatosとRob Richard、そしてRelayコアチームのJoseph Savonaも参加していました。 1stDibsの2人は@defer/@stremを2020年に一気に実現に近づけた中心人物で、多くの仕様や実装案を作っています。彼らから直接話を聞けるのはとても良い機会でした。
@defer/@stream自体の解説も当然ありましたが、ここで説明すると長くなってしまうので割愛させてください。 私も以前に解説を書いてますが、他にも日本語で素晴らしい記事を書いている方がいらっしゃいますのでそちらを見てみると良いと思います。 ⇒ Incremental Data Delivery with GraphQL defer and stream ⇒ GraphQL の @defer, @stream ディレクティブを試してみる
さて、イベントに話を戻します。 冒頭のニュースでmerosの話がありましたが、同様のクライアントサイドのライブラリであるfetch-multipart-graphqlをRobが作っているようです。 merosの方がよりコアで汎用的に使える印象ですが、@defer/@streamのためにRelayで使うならこちらの方がサッと実装できそうな気配がしました。
@defer/@streamをRelayのHookなどと使う実例も見せてくれて、Relayと合わせて使うのはめちゃくちゃ便利そうです。 早くクエリ分割をする世界から開放されたい…。
今回はチャットから質問を受けて様々なトピックについても話していたのですが、それも面白かったですね。 例えば、なぜクエリ分割ではダメなのか？ フィールドに@deferディレクティブはつけられないのは何故か？ などなど…。 おそらく日本語の記事で知れることが8割以上だと思いますが、仕様を深く理解している人達の解説は面白かったです。 英語が未熟で一部何言ってるか分からないところもありましたが…。主催者のGabrielにYoutubeアーカイブに字幕つけてくれと言ってはいるので、後日字幕ついてるかもしれません。
まとめ
Relay Meetup #2のレポートでした。今回もRelayユーザーにとってはためになる、または今後が楽しみになる会だったのではないでしょうか。
次回のRelay Meetup #3は2月10日19:00 GMT+2からです。 内容はRelayコアチームによるQ&A！ とても面白そうな内容で、今年のRelayの計画・スケジュールについても聞けそうです。 今回のミートアップでもRelayコアチームのJosephが少し触れてましたが、experimentalの（少なくともいくつかは）2021年内のリリースを計画しているようです。 ReactのConcurrent Modeに依存してるところはReact待ちになると思いますが、Hooksのリリースなどは早めに見たいところですね。
それでは、次回もお楽しみに！