Relay ModernでのQueryRendererの役割？

Question

だから、最初に少しの背景。 私は最初のReact Nativeプロジェクトを開始しているネイティブiOS/Android開発者です。それはJavascriptのすべての利点と痛みを伴いますが、私はこれまでに多くのことが好きです:-)私はGraphQLで初めて自分の手を試してみることにしました。

一般的にリアクション環境の新機能であるため、私はRelayについての事前知識はありませんが、私のスタートアップコミュニティとweb-devの同僚の友人からの推薦で選択しました。私はやや急な学習曲線についても警告を受けましたが、とにかく前進することを決めました。私はすでにJSと新しいモバイルプラットフォームの0.xxバージョンとのうまくいった戦いと戦っています。 :-)私は「質問

の上、正しく私のプロジェクトを設定し、そう

:-)大きな安堵だったQueryRenderer、と私のGQLサーバに至るまで全体をパンチするために管理容器/成分の関係を把握するのに苦労するm、一般的には容器の組成である。 the docs on compositionを読むこと助けたが、私はすべてのリレーツリーのルートコンテナであることをドキュメントで言われてQueryRenderer

• QueryRendererの役割の上にまだ疑問がね。それは私たちのアプリのルートのQueryRendererを持っている必要がありますか？または各ナビゲーションパスのルート（アプリ内のタブなど）に表示されますか？あるいは、各コンテナコンポーネント（プレゼンテーション/ダム/純粋なコンポーネントとは対照的に、React Wise）に対してのみですか？
• 「親」コンポーネントにQueryRendererを付けずにFragmentContainer（またはその他のコンテナ）を使用することはできますか？いいえ、私の意見は参考になりません。
• QueryRendererはどのように子コンテナにリンクされていますか？子コンテナが必要とするすべてのデータの合計を取り出し、子コンテナをキャッシュから読み取ったか、それとも？そうであれば、私はRelayの賛否を誤解しています。各コンポーネントが他のすべてのコンポーネントから独立してデータを取得できるという印象を受けており、各コンポーネントは他のコンポーネントのデータ要件（親/子コンポーネント）。私はこの仮定がまたQueryRendererについて私を混乱させていると思うし、 "ルート"コンテナの必要性もあると思う。
• QueryRendererがリレーツリーの「親」/「ルート」リレーコンテナである場合、その要求に基づいてどのようにビューコンポーネントをレンダリングする必要がありますか？そしてなぜそれが要求を持っていなければならないのですか？いつ、何を使用する必要がありますQueryRenderer？

すべてのヘルプは非常にこの話題を持ち出すため

Answer 1

私たちのアプリでもう少し仕事をした後、誰かを助けることを期待して、これまでの私の考えや経験について投稿して戻ってくると思いました。

@Peter Suwaraの偉大なポスト上に構築、我々は同様の戦略に到着した当初

• 、ツリー内の各画面について
• ルート/親のナビゲーションツリーを持つすべてのルートとしてQueryRendererを持っていますプレゼンテーション/ダムのコンポーネントには、我々はしかし彼の答え以下のコメントで述べたと同様のサブコンポーネント

内のデータの依存関係を宣言する

使用フラグメントが含まれています、このアプローチは必ずしも最良ではないかもしれません。内部的にさらに議論した結果、いくつかの理由から結局のところ意味をなさないケースが多すぎるという結論に達しました。

• 画面負荷ごとにデータを取得すると、必要以上に多くの往復で終わります。あなたは、アプリフローを考慮に入れたいと思うし、ルートとそれの子供のために実行可能/必要なだけ多くのデータを取得します。
• また、同じQueryRenderer上の画面の子コンポーネントのすべてのデータを取得すると、ユーザーには表示されないデータを取得することがあります（ほとんど表示されない詳細ビューの詳細、同様のケース）。

いくつかは、より多くの考えや議論の後、我々はこの経験則リレーツリーの新しいQueryRenderer「ルート」を作成するときのために思い付いた：

いつでもあなたのための新しいQueryRendererを作成します。これは、それはあなたがデータのエラー/ロードを処理する必要が唯一のチャンスだということを非常に実用的な理由で発生したが、それはまた、ユーザのフローと組成の形で私たちに意味を成していた新しいエラー処理戦略

が必要通常は2つのものが衝突するため、新しい 'フロー'に到達したときにネットワークエラーを処理する新しい方法が必要ですアプリ。たぶん、Facebookのいくつかのよりスマートなヘッドが私たちの前にこれについて考えましたか？ :-)

これはまさにガイドラインであり、ルールではなく、例外もあります。しかし、少なくとも私たちにとっては内部的に意味があるようです。

公式の文書はあまり言い表せないと思うので、これらの考えに対するすべてのフィードバックは非常に歓迎されています。したがって、文書と一般的なパターンが時間とともに解決されるまで、コミュニティの議論はすべてあります。

Answer 2

おかげで:-)認識されます。私もReactNativeを使ってRelayに入ってきました。そしていくつかのエキサイティングな結果がありました。

まず、GraphQLデータベースを反映したUIコンポーネントを画面に簡単に表示できることは、とても驚きです。 JavaScriptの基礎と反応ネイティブのパイプラインを学ぶ初期のオーバーヘッドの後、リレーはデータを表示する素晴らしい方法になっています。

ベストプラクティスに関して、私はあなたの QueryRendererとfragmentContainerをどのように提示するかについては言えませんが、私はデータの提示方法について説明できます。

まず、反応ナビゲーションスタックとタブを作成します。各メジャー画面の中で、QueryRendererを実行します。その後、そのQueryRenderer内で、特定のUIコンポーネントごとに、fragmentContainerに分離します。

• ナビゲーションフロー（反応-ナビゲーション、スタック/タブナビゲーター）を
• 画面（QueryRenderer）UI
• ウィジェット/コンポーネント（fragmentContainer）

これは私たちが必要な主なクエリを作成することができます画面の場合は、それらが表すGraphQLクエリフラグメントによって簡単に定義される消費可能コンポーネントに収まるようにコンポーネントデータを分割します。しかし、それは、全体のレンダリングをきちんとしたパッケージにまとめるために、中央のアカウントクエリを使わずにアプリ全体で複数のクエリを実行していることを意味します。

理想的には、ナビゲータ内の一番上にあるQueryRendererを試してみたいと思いますが、レンダリング（）関数には応答しないので、 QueryRendererが必要な場所

また、ナビゲート可能な反応ネイティブアプリ内でリレーをどのように適用するかについて、他の人々のアプローチを聞くことにも興味があります。