繼電器現代節點不包含片段性質

我在我的陣營項目如下設置：繼電器現代節點不包含片段性質

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

然後數據也正確傳遞下來。所以碎片的東西一定是關閉的。

爲什麼是它的網絡調用完成並正確使用該片段的獲取數據，但節點對象從未得到所取得的數據？

來源

2017-07-18 Jojo Ilkischmilki

這確實是正確的行爲。

您的組件必須單獨指定它們自己的所有數據依賴性，中繼將只傳遞給它要求的數據的組件。由於你的組件沒有詢問任何數據，它正在接收一個空的對象。

你看到的__id在Relay內部使用，你不應該依賴它（這就是爲什麼它有__前綴）。

基本上，上ActivityTypeLists部件支柱viewer會產生完全比在ActivityTypeLists_viewer片段，請求沒有任何其它片段從所引用有其它組分的查詢相同的格式。

來源

2017-08-11 01:02:59 JCM

繼電器現代節點不包含片段性質

回答

相關問題