1

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

为了说明问题，让我看一下流程并将代码留在底部。

  • 首先我去ProductList查看产品列表，每个产品都有品牌名称。它按预期工作。

  • 然后我点击其中一个产品，这将呈现ProductDetail. 一切仍然按预期工作。

  • 现在当我去时BrandList，问题是中继向node(id: $id_0)服务器发送多个查询。

发生的情况是 Relay 的商店已经brands在ProductDetail. 在第 3 步中，BrandList要求提供比 Relay 商店当前拥有的更多的字段。所以 Relay 发送了多个node查询，30 个查询，因为我有 30 个品牌，但是这效率低下并且明显慢。

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

我不确定我是否在这里遗漏了一些非常明显的东西，或者在这种情况下有更好的方法来避免多节点查询。如果我可以告诉 Relaybrands在上面的步骤 3 中完全重新获取 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]
            }
          }
        }
      }
    `,
  },
})
4

0 回答 0