問題タブ [react-router-relay]

新しくnpm installしたところ、突然次のエラーが発生しました

これは私のルートコンテナです

Relayアプリがあり、ログイン後に表示されるコンポーネントのキャッシュをクリアしたい、ログアウト後にそれを呼び出します。何らかの理由でキャッシュがまだ保存されています。また、componentDidMount() で this.props.relay.forceFetch({}) と this.forceUpdate() を呼び出してみました。キャッシュをクリアする唯一の方法は、ページを手動で更新することです。Relay.Environment にバグがあるのだろうか、それとも私のやり方が間違っているのだろうか。

react-router-relayアプリに 、 、 の 3 つのページ ( を使用するコンポーネント)ProductListがありProductDetailますBrandList。

問題を説明するために、フローを順を追って説明し、コードを一番下に残します。

• まず、商品のリストに行きProductList、それぞれにブランド名が付いています。期待どおりに動作します。

• 次に、製品の 1 つをクリックすると、これがレンダリングされますProductDetail。すべてが期待どおりに機能します。

• に行くとBrandList、問題はリレーが複数のnode(id: $id_0)クエリをサーバーに送信することです。

何が起こるかというと、Relay のストアは のbrandsステップ 2 の後で既にフェッチされていますProductDetail。そしてステップ 3 で、BrandListRelay のストアが現在持っているよりも多くのフィールドを要求します。したがって、Relay は複数のnodeクエリを送信します。私は 30 個のブランドを持っているため、30 個のクエリを送信しますが、これは非効率的であり、著しく遅いです。

([A]) と([B]) の両方で同じフィールドを尋ねることで、これを修正できます(以下のクエリを参照してください)。ただし、使用しない不要なフィールドを取得することを意味します。ProductDetailBrandListProductDetail

ここで非常に明白な何かを見逃したのか、それともこの場合に複数ノードのクエリを回避するためのより良い方法があるのか​​ はわかりません。Relay に部分的なデータがすでに保存されていて、より多くのフィールドを取得するためにクエリをbrands送信しようとしているときに、上記の手順 3 で完全に再フェッチするように Relay に指示できれば、おそらくより良いでしょう。node

// 各コンポーネントに関連するクエリ。以下の [A] と [B] に関するコメントに注意してください。

ProductList

ProductDetail

BrandList

レンダリングが開始されたときにルーターのコールバックが呼び出されるようですが、すべてのコンポーネントがレンダリングされた後onUpdateに関数を呼び出す他の方法はありますか?

似たようなReactDOM.renderコールバック...

Relayルート、react-routerパラメータ、およびクエリとコンテナの一般的な構築について理解するのに非常に苦労しています!

ユーザーが FeatureList の特定の機能をクリックしたときに機能を編集したい。Route.js の Feature の ID である「id」というパラメーターを渡します。

私の FeatureQuery ファイルには、次のクエリがあります。

この時点で、私は完全に立ち往生しています。これを拡張して「id」を含め、「id」を使用して機能を照会するにはどうすればよいですか? また、関連するリレー コンテナ フラグメントはどのような形になりますか? 1 レベル深い例しか見ていません。

私はこれを試しましたが、正しくないことを知っています:

これは、機能のリストを取得する現在のリレー コンテナーです。これをどのように変更して、ID で 1 つの機能を返すようにしますか? :

GraphiQL でクエリをテストしたところ、期待どおりに動作しました。

結果：

schema.js:

アプリでルーティングを処理するために、react-router と react-router-relay を使用しています。URL パスで渡された id パラメータにアクセスしようとすると問題が発生します。これを行う正しい方法は何ですか？

ルート.js

CreativeQuery.js

何らかの理由で、子コンポーネントを注入する前にパラメーターを受け取るルート クエリを生成すると、次のようになります。

Relayはもともとこのクエリを生成します:

変数:

ただし、コンポーネントのリレー コンテナーに独自の変数がある場合、実行this.props.relay.setVariables({...variables})すると、リレーによって生成されたリクエスト クエリが次のように完全に変更されます。

変数:

ただし、パラメーターのないルート クエリがある場合、setVariables は正常に機能します。

生成されたクエリは次のとおりです。

変数:

作業セットアップで setVariables の後:

変数:

バージョン:

構成に何か問題があるのか​​ 、それともRelay側の単なるバグなのかはわかりません.

この問題の原因を知っている人はいますか?

react-router-relay の Typescript 定義を作成したいのですが、react-router-relay の拡張性により苦労しています。react-router は、render プロパティを含むいくつかのプロパティを持つ Router コンポーネントを公開しています。react-router-relay は、この render プロパティを使用して Router にミドルウェアを提供します。この Router の後、Relay を指定できる環境プロパティも受け入れます。

モジュール react-router-relay でモジュール react-router の定義を拡張することを typescript に伝えるにはどうすればよいですか?

以下を試しましたが、react-router のすべてのコンポーネントをコピーする必要があります。

反応ルーターの RouterProps と RouteProps のみを直接拡張することも可能ですか?

編集: router-relay は次のように適用されます: