1

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

例として：

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

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

var GraphQLUser = new GraphQLObjectType({
   name: 'User',
   isTypeOf: function(obj) { return obj instanceof User },
   fields: function() {
      return {
         id: GraphQLRelay.globalIdField('User'),
         //Fields to expose to app, e.g. cars
         cars: {
            type: GraphQLRelay.connectionDefinitions({
               name: 'Car', nodeType: carType
            }).connectionType,
            args: GraphQLRelay.connectionArgs,
            resolve: function(user, args) {
               return
                 GraphQLRelay.connectionFromPromisedArray(getCars(), args)
            },
        },
     }
 },
 interfaces: [nodeDefinitions.nodeInterface],
});

そしてルート：

var Root = new GraphQLObjectType({
   name: 'Root',
   fields: {
      viewer: {
         type: GraphQLUser,
         resolve: (root, {} ) => getUser()
    },
    node: nodeDefinitions.nodeField
});

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

ReactDOM.render(
   <Router createElement={ReactRouterRelay.createElement}>
      <Route path="/" component={App} queries={ViewerQueries} />
      <Route path="/cars" component={AllCars} queries={ViewerQueries} />
  </Router>,
  document.getElementById('ReactContainer'));

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

export default {
   viewer: () => Relay.QL`query { viewer }`,
};

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

exports.Component = Relay.createContainer(App, {
   initialVariables: {
      limit: 10
   },
   fragments: {
      viewer: () => Relay.QL`
         fragment on User {
         cars (first: $limit) {
            edges {
              node {
                 name,
              }
            }
          }
       }`,
   },
 })

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

exports.Component = Relay.createContainer(AllCars, {
   initialVariables: {limit: 10},
   fragments: {
      viewer: () => Relay.QL`
         fragment on User {
            cars (first: $limit) {
               edges {
                  node {
                     name,
                     type
                  }
               }
            }
        }`,
     },
  })

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

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

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

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

4

2 に答える 2

2

（コメントでコードをフォーマットできないため、回答として投稿します。）

あなたが説明するシナリオは、ネストされたルートの使用に適しているように聞こえます。

ReactDOM.render(
  <Router createElement={ReactRouterRelay.createElement}>
    <Route path="/" component={App} queries={ViewerQueries}>
      <Route path="/cars" component={AllCars} queries={ViewerQueries} />
    </Route>
  </Router>,
  document.getElementById('ReactContainer')
);

その構造を持つ空の配列が引き続き表示される場合は、ネットワーク経由で送信されたクエリと応答を含む要点へのリンクを提供できますか?

于 2015-10-21T22:26:23.353 に答える