Question

我的应用中有3个页面（使用react-router-relay的组件），ProductList，ProductDetail和BrandList。

为了说明问题，让我逐步完成流程并将代码保留在底部。

首先，我转到ProductList，查看产品清单，每个产品都有品牌名称。它按预期工作。
然后我点击其中一个产品，这将呈现ProductDetail。一切仍然按预期工作。
现在，当我转到BrandList时，问题是Relay会向服务器发送多个node(id: $id_0)个查询。

在brands的第2步之后，Relay的商店已经提取了ProductDetail。在步骤3中，BrandList要求提供比Relay商店目前更多的字段。因此，Relay会发送多个node个查询，30个查询，因为我有30个品牌，但效率低且速度非常慢。

我可以通过ProductDetail（[A]）和BrandList（[B]）中的询问相同字段来解决此问题（请参阅下面的查询）。但是，这意味着ProductDetail会获取不使用的不必要字段。

我不确定我是否遗漏了一些非常明显的东西，或者在这种情况下有更好的方法可以避免多个节点查询。如果我可以告诉Relay在上面的步骤3中完全重新获取brands，当Relay已经存储部分数据并且发送node查询以获得更多字段时，可能会更好。

//每个组件的相关查询。请注意下面[A]和[B]的评论

ProductList

export default Relay.createContainer(ProductList, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        id
        products(first: 1000) {
          edges {
            node {
              id
              localId
              name
              brand {
                name
              }
            }
          }
        }
      }
    `,
  },
})

ProductDetail

export default Relay.createContainer(ProductDetail, {
  fragments: {
    product: () => Relay.QL`
      fragment on Perfume {
        id
        localId
        name
        brand {
          name
        }
      }
    `,
    viewer: () => Relay.QL`
      fragment on Viewer {
        id
        brands(first: 1000) {
          edges {
            node {
              localId
              name      // <------ [A] ask only name
            }
          }
        }
      }
    `,
  },
})

BrandList

export default Relay.createContainer(BrandList, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        id
        brands(first: 1000) {
          edges {
            node {
              id
              localId
              name
              slug        // <----- [B] ask more fields than [A]
              country     // <----- [B] ask more fields than [A]
            }
          }
        }
      }
    `,
  },
})

如何避免多节点查询？

0 个答案: