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

} else {
        this._interval = setInterval(() => {
          this.forceUpdate();
        }, 1000);
      }
    } else {
      // Clear the interval now that nothing is running
      if (this._interval) {
        clearInterval(this._interval);
        delete this._interval;
      }
    }
  }
}

export default createFragmentContainer(Graph, graphql`
  fragment Graph_pipeline on Pipeline @argumentDefinitions(
    includeGraphData: {type: "Boolean!"},
  ) {
    builds(
      first: 30,
      branch: "%default",
      state: [ SCHEDULED, RUNNING, PASSED, FAILED, CANCELED, CANCELING, BLOCKED ]
    ) @include(if: $includeGraphData) {
      edges {
        node {
          id
          state
          url
          startedAt
          finishedAt
          canceledAt

const teamIndex = this.state.teams.indexOf(team.uuid);

    if (teamIndex === -1) {
      // adding
      teams = this.state.teams.concat([team.uuid]);
    } else {
      // removing
      teams = this.state.teams.concat();
      teams.splice(teamIndex, 1);
    }

    this.setState({ teams });
  };
}

export default createFragmentContainer(PipelineNewTeams, {
  organization: graphql`
    fragment PipelineNewTeams_organization on Organization {
      teams(first: 50) {
        edges {
          node {
            ...MemberTeamRow_team
            uuid
            permissions {
              pipelineView {
                allowed
              }
            }
          }
        }
      }
    }

)
        })}
      
    );
  }

  onOrganizationClick = (event, organization) => {
    event.preventDefault();

    this.setState({ currentOrganization: organization });
    this.organizationDropdownComponent.setShowing(false);
  };
}

export default createFragmentContainer(GraphQLExplorerExamples, {
  viewer: graphql`
    fragment GraphQLExplorerExamples_viewer on Viewer {
      organizations(first: 100) {
        edges {
          node {
            id
            name
            slug
          }
        }
      }
    }
  `
});

<div>
            {product.category &amp;&amp; product.category.name} (id:{product.categoryID})
          </div>
          <div>
            {product.supplier &amp;&amp; product.supplier.companyName} (id:{product.supplierID})
          </div>
          <div>${product.unitPrice}</div>
          <div>{product.unitsInStock} pcs</div>
        
        {product.productID &amp;&amp; }
      
    );
  }
}

export default createFragmentContainer(
  ProductConnectionItem,
  graphql`
    fragment ProductConnectionItem_product on Product {
      id
      name
      categoryID
      category {
        name
      }
      supplierID
      supplier {
        companyName
      }
      productID
      quantityPerUnit
      unitPrice

2FA
          
        
      );
    }

    return nodes;
  }
}

export default createFragmentContainer(
  MemberRow,
  graphql`
    fragment Row_organization on Organization {
      slug
    }
    fragment Row_organizationMember on OrganizationMember {
      uuid
      role
      sso {
        mode
      }
      security {
        twoFactorEnabled
      }
      user {
        name

renderReconfigure = () => {
    return "Youʼre about to reconfigure two-factor authentication.\
      This will invalidate your existing two-factor authentication configuration and recovery codes.\
      We’d suggest saving your recovery codes into a secure password manager, or printing them off and storing them\
      somewhere safe.\
      They should be treated just like your password!";
  }

  renderConfigure = () => {
    return "Recovery codes should be treated just like your password!\
    We’d suggest saving them into a secure password manager, or printing them off and storing them somewhere safe.";
  }
}

export default createFragmentContainer(TwoFactorConfigureRecoveryCodes, {
  recoveryCodes: graphql`
    fragment TwoFactorConfigureRecoveryCodes_recoveryCodes on RecoveryCodeBatch {
      ...RecoveryCodeList_recoveryCodes
      codes {
        code
        consumed
      }
    }
  `
});

},
      },
    },
  } = {},
) =>
   x.node)}
    projectsCountData={viewer.projects.hits}
    primarySitesCountData={viewer.projects.aggregations}
    casesCountData={viewer.repository.cases.hits}
    filesCountData={viewer.repository.files.hits}
    genesCountData={viewer.explore.genes.hits}
    ssmsCountData={viewer.explore.ssms.hits}
  />;

const HomePage = createFragmentContainer(HomePageComponent, {
  viewer: graphql`
      fragment HomePage_viewer on Root {
        projects {
          aggregations {
            primary_site {
              buckets {
                key
              }
            }
          }
          hits(first: 1000) {
            edges {
              node {
                id
                project_id
                primary_site

<li>
              <code style="{{">
                {code}
              </code>
            </li>
          ))
        }
      
    );
  }
}

export default createFragmentContainer(RecoveryCodeList, {
  recoveryCodes: graphql`
    fragment RecoveryCodeList_recoveryCodes on RecoveryCodeBatch {
      codes {
        code
        consumed
      }
    }
  `
});

);
    } else if (this.props.metric.value) {
      return (
        <span>{this.props.metric.value}</span>
      );
    }


    return (
      <span>-</span>
    );
  }
}

export default createFragmentContainer(Metric, graphql`
  fragment Metric_metric on PipelineMetric {
    label
    value
    url
  }
`);

{this.renderPublicBadge()}
        
      );
    }
  }

  renderPublicBadge() {
    if (this.props.agentToken.public) {
      return (
        Public
      );
    }
  }
}

export default createFragmentContainer(AgentTokenItem, {
  agentToken: graphql`
    fragment AgentTokenItem_agentToken on AgentToken {
      id
      description
      public
      token
    }
  `
});