一覧へ

Relay Meetup #1 レポート

image

2020年になって、Relayが盛り上がってきましたね！ 少し遅くなりましたが、今回は2020年10月21日にオンラインで初開催されたRelayのグローバルミートアップのレポートをお届けします。

今回は主催者のGabriel Nordeborn、元Artsyで現MicrosoftのEloy Durán、FacebookのRelayコアチームのJan Kassensの3名が登壇してくれました。

オンラインでの開催

今回はYoutube上でのオンラインミートアップとして開催されました。参加者はYoutubeのチャットやDiscordでの交流となりました。 開始時間が日本時間で深夜2時ぐらいだったので私もリアルタイムでは見てなかったのですが、当日の模様は動画で残ってるので今からでも見ることができます。

ちなみに全て英語です。Youtubeの自動翻訳はついてますが、厳しい場合はこのレポートを読みながらご覧ください。

1. Relayコミュニティからのニュース

それでは内容に入っていきましょう。 最初はFacebook外のRelayのコミュニティのニュースから。

Relayは長らくFacebook所属のコアチームが作っており、コミュニティとは距離を置いていると思われてきましたし、実際そういった面も否めません。 しかしFacebook外のコミュニティメンバーからのコミットは継続的にあり、特に最近はインパクトのあるPRが外部から出されてマージされています。 Relay Meetupでコミュニティの活動が紹介され、目に見える動きがあるのはとても嬉しいことですね。

今回は下記が紹介されました。

  1. Rustで作成中のRelayの本家コンパイラで、基本的なTypeScript連携が含まれました https://github.com/facebook/relay/issues/3182
  2. DefinitelyTypedにあるRelayの型にexperimentalの機能を含む多くのアップデートが行われました https://github.com/DefinitelyTyped/DefinitelyTyped/pull/48638
  3. webpackを使用したエントリーポイントのOSS実装が進行しています https://github.com/relay-tools/typescript-relayjs-examples/issues/1
  4. react-relay-offlineというオフラインでrelayを使用できるようにするためのパッケージで、render-as-you-fetchがサポートされました https://github.com/morrys/react-relay-offline/pull/57

1と2はTypeScriptとRelayがより親密になるという話で、3と4はReactのrender-as-you-fetchを（OSS版での）Relayで実現する話です。

1のTypeScript連携も素晴らしいですが、3のエントリーポイントは今後がかなり気になります。 ここで詳細は解説しませんがrender-as-you-fetchではJSを1ファイルではなく分割して後で追加でダウンロードします。今後、コンポーネントとデータの遅延ダウンロードの実装方法についてOSSでのガイドが出てきそうです。 SPAでJSのサイズが大きい問題から逃れられる日も近いかもしれません。

2. ArtsyでのRelayについて

Relayを使っている方はArtsyという会社を知っているかもしれません。Relayコミュニティに対して貴重なブログやgithubリポジトリを公開しており（プロダクションで使用されているコードが公開されています）、コミュニティ内では一定の認知度があります。 今回はArtsyでのRelayの経験をalloy（Eloy Durán）が語ってくれています。

alloyは現Microsoftのエンジニアで、以前はArtsyで数年働いていました。 彼はReactNative、TypeScript、RelayでArtsyのモバイルのアプリケーションを構築することになります。なぜそれらを選んだのか、どういった過程になり、Webやモバイルのチームがどう反応してくれたのかについて話してくれました。 また、Relayの素晴らしさと学習の難点、OSSの貢献についても議論されました。

3. Mutationでのキャッシュアップデートについて

最後のパネルディスカッションで、Mutationでのキャッシュアップデートの戦略について議論されました。 少し話が入り組んでるので、このパートは分かりやすいように内容をまとめ直します。彼らが話している順番で記載していないのでご注意ください。

まず、Mutation使用時の原始的なクライアントキャッシュの更新方法は、updaterを使ってストアの中身を自分で命令的に書き換えていくことです。 https://relay.dev/docs/en/mutations#using-updater-and-optimisticupdater これはまずまず大変です。型もなく、自分であれこれ操作しなければなりません。 Relayを使い始めた人は最初にupdaterを試すと思うのですが、結構難しくてどこが間違って動かないのか分からないですよね。 まぁ、プロダクションコードではほぼ後述する方法を使うことになるので最初はあまり気にする必要もないと思いますが…。

updaterよりも簡単な方法として、updater configsでの宣言的な更新があります。 https://relay.dev/docs/en/mutations#updater-configs ストアを直接弄るよりも圧倒的に簡単でバグも少なく更新できます。例えばキャッシュからデータを削除する時はNODE_DELETEを使いますが、使い方さえ分かれば圧倒的に簡単です。

そして、最近RelayにマージされたStore updater directivesはさらに簡単です。具体的には@deleteRecord、@appendEdge、@prependEdge、@appendNode、@prependNodeのディレクティブです。 名前からなんとなく分かるかもしれませんが、例えば削除するオブジェクトのidに＠deleteRecordをつけるだけで、Mutation実行時にキャッシュから削除できます。

mutation CommentDeleteMutation(
  $input: CommentDeleteInput
) {
  commentDelete(input: $input) {
    deletedCommentId @deleteRecord
  }
}

@appendEdgeなどを使えばConnectionにEdgeを簡単に追加することも可能になります。

さて、updater configsやStore updater directivesは便利ですが、全てをこのように宣言的に記述することは難しいのが現実で、ストアを直接弄る低レベルなAPI（= updater）が必要なシーンもあります。 特に、他のオブジェクトにも副作用が発生するようなケースは宣言的に記述するのが難しいです。例えばFacebookでは友達をブロックすると、友達リストの他にフィードなど異なるidをもつオブジェクトを消さなければなりません。こうした副作用で様々な処理をするケースでは上記のように宣言的なキャッシュの更新だけでは対処が難しいので注意が必要です。

ちなみに、Relayのexperimental版にはInvalidation APIというものがあり、Mutationの実行時にキャッシュの古いデータ（一般的にはMutationで更新したことで影響されたであろうデータ）をマークしてRelayに教えることができるようです。 これを使うことで、次に古いデータを評価するタイミングでキャッシュを使用せずに再フェッチできるんだとか。すごい。 https://relay.dev/docs/en/experimental/a-guided-tour-of-relay#staleness-of-data

まとめ

Relay Meetupの記念すべき初回のレポートをお届けしました。かなりディープで参考になる話題が盛りだくさんだったのではないでしょうか。 最近はRelayの記事をいくつか書いたり主催者のGabrielとはRelayの翻訳関係でやり取りしたりしていたので、今回のミートアップの開催はとても楽しみにしていました。 Relayはコミュニティでの繋がりって世界的にもほぼないので、ここからコミュニティの活動も広まっていくと良いですね。

次回のRelay Meetup #2は12月2日19:00 GMT+2からです。 前半パートでは、初心者向けにRelayのワークショップを作っている方が、Relayの始め方について教えてくれます。 後半パートでは@deferと@streamについて、GraphQLの仕様にこれらのディレクティブを追加したメンバーが直接教えてくれます。少し前に@deferと@streamについて日本語で書いたので、そちらを見ておくと英語が苦手でも理解できるかも…？（私が嘘書いてなければ）

それでは次回をお楽しみに！

公開日 2020年11月10日