問題タブ [react-router-relay]

現在動作中の React/Relay アプリがあり、react-router-relay を使用してルーティングを追加したいと考えています。可能な限り最小限の変換を試みると、次のコードを参照してください。ログに理解できないエラーが表示されます。

この質問を表現する別の可能な方法は次のとおりです: プレーンなバニラ Relay の RelayRoutes.queries と react-router-relay のルートのクエリを指定する適切な方法の違いは何ですか?

親コンテナーから子コンテナーに変数を渡すための適切な構文を探しています。

/グローバルウィジェットリストがオンで、特定のウィジェットリストがオンのこれらのルートがあるとしましょう/widgets/:WidgetListID。

注：react-router-relayを使用しています

これは同じコンポーネントで、内部<WidgetList/>でレンダリングされます。変数を渡す方法は次のとおりです。<WidgetListContainer/><Layout/>WidgetListID

Layout.js

WidgetListContainer.js

WidgetList.js

変数を WidgetList リレー コンテナー内に直接設定しても問題ありません。問題なくWidgetListID動作しますが、WidgetListContainer リレー コンテナーから変数を渡そうとするとすぐに、空のデータ オブジェクトが作成されます{__dataID__: "VXNlcjo="}。ただし、変数は getWidget() 関数で適切に出力されます。それで、ある時点で何かがうまくいかないのですが、何がわかりませんか？

WidgetListID親コンテナーから子コンテナーに変数を渡すには、どの構文が適切でしょうか?

react-router-relay プロジェクトを使用したリレーに次のルート クエリがあるとします。

の初期値は$number非表示の入力のようにサーバーから取得され、サーバーへの最初のクエリでこの数値を使用したいと考えています。$number現在の react-router-relay API を使用してクエリに渡すにはどうすればよいですか? これはqueryParamまたはではありませんstateParam。

同じルート クエリを使用して 2 つの隣接する react-router-relay ルート コンポーネント内でデータを要求すると、2 番目のルート コンポーネントの graphql サーバー クエリが最初のルート コンポーネントから以前に取得したデータを無効にするという問題が発生しています。

例として：

ルート フィールドからデータの配列をクエリするために、フィールドを「ビューア」ルート ノードにアタッチする回避策を使用しています。

私の schema.js には、ビューアー (ユーザー) タイプとルートの次の定義が含まれています。

そしてルート：

ここで、main.jsx アプリケーション エントリ ポイントで、次のルートを定義しています。

以下を含む ViewerQueries.js を使用します。

ここで、Appコンポーネントに次のgraphqlフラグメントが含まれている場合:

また、AllCarsコンポーネントには次のものが含まれます。

何が起こるかというと、パス '/' で App コンポーネントをレンダリングすると、車の配列が問題なく返されます。ただし、「/cars」パスがレンダリングされると、「this.props.viewer.cars」の結果の配列は空になります。さらに、パス '/' に戻って App コンポーネントの再レンダリングを行うと、空の配列も返されるようになりました。

バックエンドでは、AllCars コンポーネントがPOST /graphql 200 277.369 ms - 94サーバーへの追加トリップを引き起こしtype、フラグメントで指定された新しいものを取得しているようです。AllCars コンポーネントに「name」フィールドのみが含まれている場合、Relay は正しく別のサーバー リクエストを作成しませんが、代わりに配列にデータを入力します (最初の App コンポーネント サーバー リクエストからキャッシュされたと思われます)。

いずれかのコンポーネントから車の配列を取得することは可能ではないでしょうか? Relay は、ルートに表示される順序に関係なく、フラグメントで指定された追加のデータ フィールドを取得できますか?

どんな助けでも大歓迎です！

私のサーバー側は Rails で、サーバー側のレンダリング (prerender: true) で react-rails を使用しています。最近、react-router-relay でリレーを使用し始めましたが、サーバー側のレンダリングはできなくなりました。データのフェッチには、サーバーのレンダリング時には使用できないタイムアウトなどを含むグラフql サーバーとの通信が含まれているようです。したがって、graphqlの呼び出しを避けるために、サーバー側のリレーストアにデータを事前に注入する方法が必要だと思います. このライブラリを見つけました: https://github.com/denvned/isomorphic-relay-router、しかし、react-rails の使用と互換性がないため、使用できません (たとえば、どこにも app.get がありません)。私のアプリなので、そこに記載されている一致機能を使用する場所はありません）。これを機能させる方法について何か考えはありますか？

私はreact-router-relayで次のことを読みました:

react-router-relay は、アクティブな React Router ルートからのすべてのクエリとパラメーターを組み合わせた Relay ルートを自動的に生成し、クエリ結果を各ルート コンポーネントに渡します。クエリはすべて 1 つのルートに集められるため、それらはすべて同時にフェッチされ、ページ全体のデータが読み込まれ、一度にレンダリングされます。

しかし、私のアプリでは、実際には への 2 つの別々の呼び出しが表示され/graphqlます。これが私のコードです：

最初の呼び出しは のデータをフェッチしAppSkeleton、2 番目の呼び出しは のデータをフェッチしますSites。それらすべてを 1 つの呼び出しにまとめるべきではなかったのでしょうか? 私は何を間違っていますか？

ミューテーション後の成功またはエラーを処理する最善の方法は何ですか?

私は React.js と react-router-relay を使用して、graphQL クエリとミューテーションを作成しています。

名前の変更ミューテーションを実行する React コンポーネントがあるとします。ミューテーションが完了した後、ユーザーにコールバックしてもらいたい

• 「オブジェクトの名前が正常に変更されました」または
• 「エラー: 名前は既に使用されています」または
• 「エラー: 名前は少なくとも 10 文字の長さでなければなりません」
• 等

どうすればそのようなコールバックを取得できますか? また、さまざまなエラー コードを処理する方法は?