問題タブ [react-router-relay]

おそらくこれは非常に具体的な質問ですが、解決策を見つけることができると思います。ログイン/ログアウト後の環境変更について、多くの方からお問い合わせをいただいております。

私は redux を使用して、ログイン、モーダル、フォームなどに関するアプリの状態ロジックを保存し、データ取得のために中継しています。ログイン/ログアウト後、接続されたルーターを使用して、新しい環境で再レンダリングをトリガーしています

私は次のように定義されたルートを持っています：

renderAppRoute 関数は、フェッチが完了した場合など、さまざまなリレー状態で何をレンダリングするかを定義しています

env を変更した後、エラーが発生します(index):7 Uncaught TypeError: Cannot read property 'user' of undefined(…)。これは、最初のフェッチで props が定義されておらず、フェッチが進行中であるためです。props でフェッチが行われた後、RelayContainer などのフラグメント定義を見つけることができます。しかし、新しい環境に切り替えた後、props は決して未定義ではないため、コンポーネントをレンダリングしていますが、ストアにデータはありません。どういうわけか検出することは可能ですか、または環境が新しいかどうかを識別する方法はありますか、またはユーザー側でカスタムロジックを作成する必要がありますか?

私は現在、isNewEnvironment新しい環境を作成するときにtrueに設定し、設定した後にfalseに設定した新しい変数で作成してrenderAppRouteいますparams.donetrue

の一部として GraphQL クエリ フラグメントを作成するときRelayContainer、特定の状況でクエリ変数を設定する方法に苦労しました。ドキュメントで概説されている基本は十分に単純です。しかし、これらのクエリの静的な性質と、aRelayContainerが高次の React コンポーネントであることを考えると、クエリに必要な入力が Redux ストアなどの外部ソースからのオブジェクトである場合、これを処理する最善の方法がわかりません。コンポーネントが読み込まれる前にそのストアからデータを取得する方法がないため、回避策として、@includeディレクティブを使用し、コンポーネントの読み込み後に ready 変数を true に設定しています。

結局、これは期待どおりに機能しますが、これはハックのようなものであり、Relay がクエリ変数を処理する方法に関して重要な何かが欠けているのではないかと心配しています。これを行うより良い方法はありますか？prepareVariablesは役に立つように見えましたが、それでもデータ ストアにアクセスできませんでした。これが私の明らかなオプションです：

1. そのままにしておく
2. コンポーネントのライフサイクル メソッドで実行されるミューテーションに変換します。コンポーネントへのデータバインディングが削除されるため、これは行いたくありません。
3. カスタムRelayNetworkLayer(ストアにアクセスできる) を使用して、クエリをインターセプトし、外部ストアから変数を設定します。これもハックのように感じます。

デフォルトの react-router は次のように使用されます。

「react-router-relay」ライブラリを含めると、Router に機能が追加されます。つまり、Router コンポーネント (レンダリングと環境) に 2 つのプロパティを追加します。

反応ルーターのタイピングを強化するにはどうすればよいですか?

私はたくさんのアプローチを試しましたが、最新のものは次のとおりです。

名前空間「Router」とその下のインターフェース「RouteProps」を拡張する必要があるためです。

React ルーターの型付けへのリンク: https://www.npmjs.com/package/@types/react-router

React-router-relay ライブラリには、型付け自体はありません。

このトピックについて見つけたすべての情報:

• https://github.com/Microsoft/TypeScript/issues/11034
• https://github.com/typings/typings/issues/611

• 問題は、反応型付けが名前空間をエクスポートしないため、それらを拡張することが不可能になることです

進行中のクエリのクエリ変数を何らかの方法で変更することは可能ですか? 私の考えは、表示されたアイテムの数を という変数を使用してルート状態に保存しているということですpageSize。ユーザーが1つのアイテムを開いてブラウザで戻るボタンを押すと、以前に見たページが正確に表示されます.しかし、ルート状態はリフレッシュ中にも持続するので、リッスンしたいのですがonReadyStateChange、イベントが発生した場合は初期CACHE_RESTORE_FAILEDに変更したいですpageSizeサイズ。Route レベルでこの変更を何とか聞くことは可能ですか?

@chris コメントの後、いくつかのコードを追加します。

ルート: ルート状態から pageSize を取得する方法を確認できます

ProductList コードを表示する必要はありません。今のところ、接続をレンダリングするだけです。アイデアは簡単です。製品リスト ページを開き、[表示] を数回クリックすると、pageSize 番号が 20 から 100 に増加します。ユーザーは製品番号 99 をクリックし、私は彼に製品を表示します。前に見た。それは素晴らしいです、ルート状態は何度も記憶されました。しかし、ユーザーがブラウザで更新をクリックした後、ルート状態も保持されるため、最初の 100 個の製品を取得するためにクエリを実行していますが、それは多すぎます。イベントをリッスンしたいのですが、製品がローカル メモリに見つからない場合 (env が切り替えられたか、ページが更新された場合)、変数を更新して最初の 20 のみを取得したいと考えています。

私は現在、Layout コンポーネントで構成され、内部にネストされた多数の Page コンポーネントを交換する単一ページ アプリケーションの実装を試しています。レイアウト上のリレー コンテナーと多数のページ$groupIdは、フラグメント内のクエリをフィルター処理するために使用される変数 (この例では ) を共有します。

問題は、現在の実装では、アクティブなルートごとに 1 つではなく 2 つのリクエストがディスパッチされることです。私はこれに間違ったアプローチをしているかもしれませんが、リクエストを組み合わせたり、アプリケーションを構造化して、setVariable({groupId: ... })両方のコンポーネントで変数を個別に設定するのではなく、1 つだけ発行すると両方のコンポーネントが更新されるようにするにはどうすればよいでしょうか。

ルート構成

ビューア クエリ

レイアウト

ダッシュボード ページ

私の目標は、同じものからの複数のネストされた兄弟を 1 つの呼び出しに結合するarraysことです。edgesRelay fragmentrender

Relayバックエンド データはコンテナ経由で配信されます(これも を使用react-router-relay)。

Tags複数の異なる から複数を表示するコンポーネント階層がありますUsers。トップレベルのクエリは次のようになります。

結果は次のようになります (完全に平坦化された形式で):

node Type現在、それぞれ独自の階層をレンダリングしますComponent。つまり、Tagmenu-> UserTagGroup-> TagItems(コードはこの投稿の下部にあります)。

これにより、すべてのタグが でグループ化されUser、最終的に次のようなリストがレンダリングされます。

私が達成したいのは、renderすべてUsersの ' タグが 2 番目の層、つまりTagMenu->TagItemsのような階層で一緒に混合されてレンダリングされる場所です。

これまでに管理できる唯一の方法は、最上位のRelayコンテナーの結果からすべての配列を手動で抽出して、次のようなもの (疑似コード)と結合することです。

これは、次の 2 つの理由から適切ではないようです。

1. render()関数に詰め込むのは少し大変ですが、
2. リレーで参照から保護できるかどうかは不明ですnulldefault props

...しかし、それは明らかに実行可能です。

私の質問は次のとおりRelayです。これを行う方法は何ですか? ライブラリがいかに自然にコンポーネントの構成につながるかを考えると、深くネストされた結果をより高いレベルで引き出し、それらを手動でシャッフルすることが最適であるとは思えません。ここに私のコンポーネントがあります：