继电器现代节点不包含片段性质

问题描述：

export default class OverviewScreen extends React.Component<any, any> { 

public render() { 

    return (
     <QueryRenderer 
      environment={environment} 
      query={OverviewScreenQuery} 
      render={this.queryRender}/> 
    ); 
} 

protected queryRender({error, props}): JSX.Element { 

    if (error) { 
     return <div>{error.message}</div>; 
    } else if (props) { 
     return (
      <div> 
       <div> 
        <ActivityOfferList viewer={props.viewer} title="Titel"/> 
        <ActivityTypeListsFragment viewer={props.viewer}/> 
       </div> 
      </div> 
     ); 
    } 
    return <div>Loading...</div>; 
} 
} 

const OverviewScreenQuery = graphql` 
query OverviewScreenQuery { 
    viewer { 
     ...HorizontalOfferList_viewer 
     ...ActivityTypeLists_viewer 
    } 
}`;

class ActivityTypeLists extends React.Component<IHorizontalOfferListProps, any> { 

public render() { 

    return (
     <div> 
     {this.props.viewer.allActivityTypes.edges.map((typeEdge) => { 
      let typeNode = typeEdge.node; 
      return this.getCardListForActivityType(typeNode); 
     })} 
     </div> 
    ); 
} 

private getCardListForActivityType(typeNode: any) { 
    console.log(typeNode); 

    return (
     <CardList key={typeNode.__id} title={typeNode.title}> 
      {typeNode.activities.edges.map(({node}) => { 
       return (
        <RelayPicturedTypeActivityCard key={node.__id} offer={node} activityType={typeNode}/> 
       ); 
      })} 
     </CardList> 
    ); 
} 
} 

export const ActivityTypeListsFragment = createFragmentContainer(ActivityTypeLists, graphql` 
fragment ActivityTypeLists_viewer on Viewer { 
    allActivityTypes(first: 5) { 
     edges { 
      node { 
       ...PicturedTypeActivityCard_offer 
      } 
     } 
    } 
} 
`);

export class PicturedTypeActivityCard extends React.Component<any, any> { 

    public render() { 
     return (
      <PicturedCard title={this.props.offer.title} subtitle={this.props.activityType.title} width={3}/> 
     ); 
    } 
} 

export const RelayPicturedTypeActivityCard = createFragmentContainer(PicturedTypeActivityCard, graphql` 
    fragment PicturedTypeActivityCard_offer on ActivityType { 
     title 
     activities(first: 4) { 
      edges { 
      node { 
       id 
       title 
      } 
     } 
    } 
    } 
`);

这应该工作，并给我从正确的结果graphcool中继端点。

对中继端点的网络调用确实是正确的，我从我的端点接收所有ActivityTypes及其活动和标题。

但不知何故，在功能getCardListForActivityType（）的typeNode仅包含节点的数据，并没有标题在所有的__id：

如果我插入标题和活动，而不是直接使用

...PicturedTypeActivityCard_offer

然后数据也正确传递下来。所以碎片的东西一定是关闭的。

为什么是它的网络调用完成并正确使用该片段的获取数据，但节点对象从未得到所取得的数据？

答

这确实是正确的行为。

您的组件必须单独指定它们自己的所有数据依赖性，中继将只传递给它要求的数据的组件。由于你的组件没有询问任何数据，它正在接收一个空的对象。

你看到的__id在Relay内部使用，你不应该依赖它（这就是为什么它有__前缀）。

基本上，上ActivityTypeLists部件支柱viewer会产生完全比在ActivityTypeLists_viewer片段，请求没有任何其它片段从所引用有其它组分的查询相同的格式。

继电器现代节点不包含片段性质

相关推荐