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

)
  };

  return (
    <div>
      <span>{post.title}</span>
      <span>{post.description}</span>
      <button>
        Show comments
      </button>
      {renderComments()}
    </div>
  );
};

const PostRefetchContainer = createRefetchContainer(
  Post,
  {
    post: graphql`
      fragment Post_post on Post
      @argumentDefinition(
        showComments: { type: "Boolean!", defaultValue: false }
      ) {
        id
        title
        description
        comments(
          first: 10
        ) @include(if: $showComments) {
          edges {
            node {
              id

onEndReached={this.onEndReached}
          ListEmptyComponent={}
        />
         this.props.navigation.navigate(ROUTENAMES.EVENT_ADD)} />
         this.changeDistance(distance)}
          closeDistanceModal={() => this.setState({ isDistanceModalVisible: false })}
        />
      
    );
  }
}

const EventsScreenRefetchContainer = createRefetchContainer(
  EventsScreen,
  {
    query: graphql`
      fragment EventsScreen_query on Query @argumentDefinitions(
          search: { type: String }
          coordinates: { type: "[Float]" }
          distance: { type: Int }
          first: { type: Int, defaultValue: 10 }
          cursor: { type: String }
        ) {
        events(
          first: $first,
          after: $cursor
          search: $search,
          coordinates: $coordinates,
          distance: $distance

onClick={this.loadAfter}
                      onNext={this.loadNext}
                      scrollTo="#jumpto-ArtistHeader"
                    />
                  
                
              
            
          )
        }}
      
    )
  }
}

export const ArtistAuctionResultsRefetchContainer = createRefetchContainer(
  (props: AuctionResultsProps) => {
    return (
      
        {({ state }: AuctionResultsState) => {
          return 
        }}
      
    )
  },
  {
    artist: graphql`
      fragment ArtistAuctionResults_artist on Artist
        @argumentDefinitions(
          sort: { type: "AuctionResultSorts", defaultValue: DATE_DESC }
          first: { type: "Int", defaultValue: 10 }
          last: { type: "Int" }

const artists = get(viewer, v => v.search.edges, []).map(e => e.node)
    return (
      
        {artists.length === 0 ? (
          
            
          
        ) : (
          this.renderArtists()
        )}
      
    )
  }
}

export const SearchResultsArtistsRouteFragmentContainer = createRefetchContainer(
  SearchResultsArtistsRoute,
  {
    viewer: graphql`
      fragment SearchResultsArtists_viewer on Viewer
        @argumentDefinitions(
          term: { type: "String!", defaultValue: "" }
          first: { type: "Int", defaultValue: 10 }
          last: { type: "Int" }
          after: { type: "String" }
          before: { type: "String" }
          page: { type: "Int" }
        ) {
        search(
          query: $term
          first: $first
          after: $after

)
  }
}

export const PartnerContainer = createRefetchContainer(
  Partner,
  {
    partner: graphql`
      fragment Partner_partner on Partner {
        id
        slug
        profile {
          id
          isFollowed
          internalID
        }

        ...PartnerArtwork_partner
        ...PartnerOverview_partner
        ...PartnerShows_partner
        ...PartnerHeader_partner

preloadImageCount={0}
                      mediator={mediator}
                      onBrickClick={this.trackBrickClick.bind(this)}
                    />
                  )}
                
              
            )
          })}
        
      
    )
  }
}

export const RelatedWorksArtworkGridRefetchContainer = createRefetchContainer<
  RelatedWorksArtworkGridProps
>(
  withSystemContext(RelatedWorksArtworkGrid),
  {
    artwork: graphql`
      fragment RelatedWorksArtworkGrid_artwork on Artwork
        @argumentDefinitions(layerId: { type: "String" }) {
        layers {
          name
          id
        }
        layer(id: $layerId) {
          name
          artworksConnection(first: 8) {
            ...ArtworkGrid_artworks

relay.refetch({
      showDetails: true,
      id,
    });
  };
  return (
    <div>
      <span>{text + ' status: ' + status}</span>
      <span><button>check details</button></span>
      {details &amp;&amp; <span style="{{"> {details}</span>}
    </div>
  );
};


export default createRefetchContainer(TodoWithDetails,
  graphql`fragment TodoWithDetails_todo on Todo
      @argumentDefinitions(
          showDetails:{
            type:"Boolean!",
            defaultValue:false
          }
      ){
        id
        text
        status
        details @include(if: $showDetails)
    }`,
  graphql`
    query TodoWithDetailsBoChenRefetchQuery($id: ID!, $showDetails: Boolean!){
        node(id: $id){
          ... TodoWithDetails_todo @arguments(showDetails:$showDetails)

}

ConnectorsStatusComponent.propTypes = {
  classes: PropTypes.object,
  t: PropTypes.func,
  nsdt: PropTypes.func,
  data: PropTypes.object,
};

export const connectorsStatusQuery = graphql`
  query ConnectorsStatusQuery {
    ...ConnectorsStatus_data
  }
`;

const ConnectorsStatus = createRefetchContainer(
  ConnectorsStatusComponent,
  {
    data: graphql`
      fragment ConnectorsStatus_data on Query {
        connectors {
          id
          name
          active
          connector_type
          connector_scope
          updated_at
        }
      }
    `,
  },
  connectorsStatusQuery,

> => (component: React.ComponentType) =>
  createRefetchContainer(component, fragmentSpec, refetchQuery) as any;

heading='Polls'
  >
    <p>This is the polls app</p>
    <ul>

      {props.viewer.questions.edges ? props.viewer.questions.edges.map(
        ({ node }) =&gt;
          <li>
            
          </li>
      ) : 'loading..'}
    </ul>
  


const PollsListRefetchContainer = createRefetchContainer(PollsList, {
    viewer: graphql.experimental`
        fragment Polls_viewer on Viewer
        @argumentDefinitions(
            first: {type: "Int", defaultValue: 10},
        )
        {
            questions(first: $first){
                edges {
                    node {
                        id
                        ...Polls_question
                    }
                }
            }
        }
    `