Get iteration node variable in Relay and use inside getFragment?

Question

I have such fragment:

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
        }
      }
    }
  `,
},

When I iterate over edges-node of houses in list I would like to get this fragment and reuse it:

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

How to get id from node and request house fragment from another component? I spent 4 hours.....OMG.

Answer 1

If I understand correctly:

• You have an object type named House
• You have a connection type named HousesConnection that has nodes of type House

In the list container:

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')}
            }
          }
        }
      }
    `,
  },
});

The House container:

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
        }
      }
    `,
  },
});