Получить переменную узла итерации в Relay и использовать внутри getFragment?

Question

У меня есть такой фрагмент:

fragments: {
  Viewer: () => Relay.QL`
    fragment house on Viewer { 
      House(id:$id){
        id
        baths
        beds
        built
        city {
          name
        }
        description
        image
        mls
        price
        street
        type {
          type
        }
        zip {
          code
        }
      }
    }
  `,
},

Когда я перебираю ребро-узел домов в списке, я хотел бы получить этот фрагмент и использовать его повторно:

Houses(city: $city, zip: $zip, type: $type, first: 20) {
  edges {
    node {
      id
      ${HousePage.getFragment('Viewer').getFragment('house')}
    }
  }
}

Как получить идентификатор из узла и запросить фрагмент дома из другого компонента? Я провел 4 часа.....OMG.

Answer 1

Если я правильно понимаю:

• У вас есть тип объекта с именем House
• У вас есть тип подключения с именем HousesConnection который имеет узлы типа House

В списке контейнеров:

class HouseList extends React.Component {
  render() {
    return this.props.viewer.Houses.edges.map(({node}) => 
      <House house={node} />
    );
  }
}

HouseList = Relay.createContainer(HouseList, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        Houses(city: $city, zip: $zip, type: $type, first: 20) {
          edges {
            node {
              ${HousePage.getFragment('House')}
            }
          }
        }
      }
    `,
  },
});

House контейнер:

class House extends React.Component {
  render() {
    return <span>{this.props.house.mls}</span>;
  }
}

House = Relay.createContainer(House, {
  fragments: {
    house: () => Relay.QL`
      fragment on House {
        id
        baths
        beds
        built
        city {
          name
        }
        description
        image
        mls
        price
        street
        type {
          type
        }
        zip {
          code
        }
      }
    `,
  },
});