Как избежать нескольких запросов узлов?

Question

У меня есть 3 страницы (компоненты, использующие react-router-relay) в моем приложении, ProductList, ProductDetail а также BrandList,

Чтобы проиллюстрировать проблему, позвольте мне пройтись по потоку и оставить код внизу.

• Сначала я иду в ProductList и посмотрите список продуктов, каждый с названием бренда. Работает как положено.

• Затем я нажимаю на один из продуктов, это сделает ProductDetail, Все по-прежнему работает, как ожидалось.

• Теперь, когда я иду в BrandList, проблема в том, что реле отправляет несколько node(id: $id_0) запросы к серверу.

Что случилось, магазин Реле уже получил brands после шага 2 в ProductDetail, И на шаге 3 BrandList запрашивает больше полей, чем в магазине ретранслятора. Таким образом, реле отправляет несколько node запросов, 30 запросов, как у меня 30 брендов, однако это неэффективно и заметно медленно.

Я могу это исправить, задав одинаковые поля в обоих ProductDetail ([A]) и BrandList ([B]) (см. Вопросы ниже). Тем не менее, это означает, ProductDetail получает ненужные поля, которые он не использует.

Я не уверен, что я пропустил что-то очень очевидное здесь или есть лучший способ избежать множественных запросов узлов в этом случае. Было бы, возможно, лучше, если бы я мог сказать Relay повторно brands полностью в шаге 3 выше, когда ретранслятор имеет частичные данные уже в хранилище и собирается отправить 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]
            }
          }
        }
      }
    `,
  },
})