リレー現代のノードは、フラグメントの特性

Question

が含まれていない私持っている私のリアクトプロジェクトでは以下のセットアップ：

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 

また、データも正しく渡されます。したがって、フラグメントを持つものはオフにする必要があります。

---

なぜそれがネットワーク呼び出しが完了したことで、データをフェッチするために正しくフラグメントを使用していますが、ノードオブジェクトは、フェッチされたデータを取得することはありませんか？

Answer 1

これは実際に正しい動作です。

各コンポーネントは個別にすべての独自のデータ依存関係を指定する必要があります。リレーは要求したデータのみをコンポーネントに渡します。コンポーネントはデータを要求していないため、空のオブジェクトを受け取ります。

これは__idです。これはRelayによって内部的に使用されているため、これに頼るべきではありません（接頭辞は__です）。

基本的には、ActivityTypeListsコンポーネント上の小道具viewerはActivityTypeLists_viewerフラグメント、あなたが参照している他のコンポーネントからのない任意の他のフラグメントに要求されたクエリよりも、まったく同じフォーマットを持つことになります。