読者です 読者をやめる 読者になる 読者になる

taiki-t's diary

雑多な記録

Relay Modernへの移行検討をした

結論: もう少しドキュメントとサンプルが増えてからにしよう(rcが外れる頃かな?)

背景

現在アプリを作っていて、フロント側の構成はReact Native + Relay + Reduxという感じだ。

(Relay Modern以前のバージョンはModernの登場によりRelay Classicと呼ばれるようになったのでこの記事でも以後Relay Classicと呼ぶ。)

ネットワークを介するデータについてRelay Classicは素晴らしく機能的だったが、ネットワークを介さないデータの管理には向いていない。というかRelay Classic標準ではできない。

そこで出てくる問題は、コンポーネントを跨いだアプリケーショングローバルのステート管理だ。(コンポーネント単位のローカルステートであればそのままReactのstate, setStateを使って管理すれば良い)

つまりログインステータスなどをアプリケーション全体で一貫して管理するにはそこの層を導入する必要がある。

ReduxもしくはFluxがそこで登場するわけだが、自分の場合Reduxを選んだ。FacebookはFluxを使ってる/たとの話だ*1

しかしやはりそのためにReduxなりFluxを導入するのは欲する結果と得る複雑性の観点から合理的とは言い難く(個人の感想)、issueなどでもローカルステートの管理をしたいとの要望などは上がっていた

Relay Modernについて

Relay Modernでの改善については New in Relay Modern - Relay Docs に詳しいので再掲するようなことはしないが、今回Client Schema Extensionsなるものが入る。これはまさに上述の問題を解決するものだ。公式の説明にもそのように記述されている。

This should be able to replace some use cases that previously required a Flux/Redux store on the side.
https://facebook.github.io/relay/docs/new-in-relay-modern.html#client-schema-extensions より一部抜粋

そのほかに導入された改善として目につくのは、

の2つだ。前者はRelay Classicに慣れ親しんだものにとっては移行コストであって、新規の人への恩恵が大きい。学習コストが下がってるはずだ。後者については、自分のアプリでもそう遠くないうちに導入したい機能だと思っている。

Relay Modernへの移行について

※ ほとんど個人的な話

まぁ自分の場合いまのアプリケーションで差し迫って必要なのはローカルステート問題を解決する機能なので、そこがアップデートへのモチベーションとなる。 ところが、そのClient Schema Extensionsについて具体的な実装に触れたドキュメントは2017/04/23現在、存在しない。 似たようなドキュメント難民の声がIssueに上がっていた。

github.com

提示されたリンクからいくらかざっと辿ってみたけれど、@exportというディレクティブを使うんだ、metadatapropsに入るのかな?ということぐらいしかわからなかった。 それでも試してみようかと思ったけど、そもそもIssueに答えたFB中の人が

but getting this to work outside the FB environment hasn’t yet happened.
https://github.com/facebook/relay/issues/1656#issuecomment-296249276

と言っているので冒険にはまだ早いなと思いとどまった。もう少し合理的な努力ができそうになってからトライしよう。 そういう訳でまだアップデートしない。


*1:

2015/02/20 もう2年前の情報。2017年現在はどうなってるか知らない:

At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.

https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html#how-does-it-relate-to-flux