react-router - 在 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')}
    }
  }
}

如何从节点获取 id 并从另一个组件请求房屋片段？我花了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
        }
      }
    `,
  },
});