How to use the react-relay.createFragmentContainer function in react-relay

text: {
    fontSize: 20,
  },
  count: {
    color: colors["gray-semibold"],
  },
  section: {
    marginBottom: 40,
  },
  sectionSeparator: {
    marginTop: 40, // FIXME: This is because the above `section.marginBottom` didn’t work before the separator.
    marginBottom: 20,
  },
})

export default createFragmentContainer(Artworks, {
  artist: graphql`
    fragment Artworks_artist on Artist {
      counts {
        artworks
        for_sale_artworks
      }
      ...ArtistForSaleArtworksGrid_artist
      ...ArtistNotForSaleArtworksGrid_artist
    }
  `,
})

title: 'Assignee',
          getSortingValue: row => row.assignedTo?.email,
          render: row => row.assignedTo?.email || null,
        },
        {
          key: 'closeDate',
          title: 'Close Time',
          getSortingValue: row => row.closeDate,
          render: row => DateTimeFormat.dateTime(row.closeDate),
        },
      ]}
    />
  );
};

export default createFragmentContainer(WorkOrdersView, {
  workOrder: graphql`
    fragment WorkOrdersView_workOrder on WorkOrder @relay(plural: true) {
      id
      name
      description
      owner {
        id
        email
      }
      creationDate
      installDate
      status
      assignedTo {
        id
        email
      }

);
  }
}

CampaignOverviewComponent.propTypes = {
  campaign: PropTypes.object,
  classes: PropTypes.object,
  t: PropTypes.func,
  fld: PropTypes.func,
};

const CampaignOverview = createFragmentContainer(CampaignOverviewComponent, {
  campaign: graphql`
    fragment CampaignOverview_campaign on Campaign {
      id
      name
      description
      created
      modified
      markingDefinitions {
        edges {
          node {
            id
            definition
          }
        }
      }
      createdByRef {

onPress={() => navigate('SingleBooking', { booking: node })}
      separator={showSeparator}
    >
      
    
  );
}

export default createFragmentContainer(
  BookingListRowWithoutData,
  graphql`
    fragment AllBookingsListRow_node on Booking {
      departure {
        localTime
        ...RouteStop
      }
      arrival {
        ...RouteStop
      }
    }
  `,
);

)}
        />
      
    );
  }
}

ThreatActorIndicatorsComponent.propTypes = {
  threatActor: PropTypes.object,
  location: PropTypes.object,
  classes: PropTypes.object,
  t: PropTypes.func,
};

const ThreatActorIndicators = createFragmentContainer(
  ThreatActorIndicatorsComponent,
  {
    threatActor: graphql`
      fragment ThreatActorIndicators_threatActor on ThreatActor {
        id
        name
        alias
      }
    `,
  },
);

export default compose(
  inject18n,
  withRouter,
  withStyles(styles),

LIVE
                
              )}
            
            <footer>
              
            </footer>
          
        
      
    )
  }
}

export default createFragmentContainer(SaleListItem, {
  sale: graphql`
    fragment SaleListItem_sale on Sale {
      name
      href
      liveURLIfOpen
      liveStartAt
      displayTimelyAt
      coverImage {
        url(version: "large")
      }
    }
  `,
})

Our partners are responsible for providing accurate classification information for all works.
            
            
              <button> SwitchBoard.dismissNavigationViewController(this)} block&gt;
                OK
              </button>
            
          
        
      
    )
  }
}

export const ArtworkAttributionClassFAQContainer = createFragmentContainer(ArtworkAttributionClassFAQ, {
  artworkAttributionClasses: graphql`
    fragment ArtworkAttributionClassFAQ_artworkAttributionClasses on AttributionClass @relay(plural: true) {
      name
      longDescription
    }
  `,
})

export const ArtworkAttributionClassFAQRenderer: React.SFC&lt;{ safeAreaInsets: SafeAreaInsets }&gt; = props =&gt; {
  return (
    
      environment={defaultEnvironment}
      query={graphql`
        query ArtworkAttributionClassFAQRendererQuery {
          artworkAttributionClasses {
            ...ArtworkAttributionClassFAQ_artworkAttributionClasses

<footer>
            
          

          <div id="lightbox-container">
          
            {({ mediator }) =&gt; &lt;&gt;{this.enableIntercomForBuyers(mediator)}}
          
        
      
    )
  }
}

export const ArtworkAppFragmentContainer = createFragmentContainer(
  ArtworkApp,
  graphql`
    fragment ArtworkApp_artwork on Artwork {
      id
      _id
      is_acquireable
      is_offerable
      availability
      price
      is_in_auction
      artists {
        _id
        id
      }
      artist {
        id</div></footer>

}}
          />
        );
      }}
      getFeatureHoverPopoutContent={feature => (
        
      )}
    />
  );
};

export default withRouter(
  createFragmentContainer(WorkOrdersMap, {
    workOrders: graphql`
      fragment WorkOrdersMap_workOrders on WorkOrder @relay(plural: true) {
        id
        name
        description
        owner {
          id
          email
        }
        status
        priority
        assignedTo {
          id
          email
        }
        installDate

} else {
      const myLastMaxBid = hasBid && myLotStanding.mostRecentBid.maxBid.cents
      const increments = saleArtwork.increments.filter(increment => increment.cents > (myLastMaxBid || 0))
      const firstIncrement = increments && increments.length && increments[0]
      const incrementCents = firstIncrement && firstIncrement.cents

      return (
        <button size="large" width="{100}"> this.redirectToBid(incrementCents)}&gt;
          {hasBid ? "Increase max bid" : "Bid"}
        </button>
      )
    }
  }
}

export const BidButtonFragmentContainer = createFragmentContainer(BidButton, {
  artwork: graphql`
    fragment BidButton_artwork on Artwork {
      slug
      sale {
        slug
        registrationStatus {
          qualifiedForBidding
        }
        isPreview
        isLiveOpen
        isClosed
        isRegistrationClosed
      }
      myLotStanding(live: true) {
        mostRecentBid {
          maxBid {