// App.jsimport React from 'react';import './App.css';import graphql from 'babel-plugin-relay/macro';import {
  RelayEnvironmentProvider,
  loadQuery,
  usePreloadedQuery,} from 'react-relay/hooks';import RelayEnvironment from './RelayEnvironment';const { Suspense } = React;// Define a query (AppQuery:thisFilename+'Query')const RepositoryNameQuery = graphql`
  query AppQuery {
    address{
      city
    }
  }`;// Immediately load the query as our app starts. For a real app, we'd move this// into our routing configuration, preloading data as we transition to new routes.const preloadedQuery = loadQuery(RelayEnvironment, RepositoryNameQuery, {
  /* query variables */});// Inner component that reads the preloaded query results via `usePreloadedQuery()`.// This works as follows:// - If the query has been completed, it returns the results of the query.// - If the query is still pending, it "suspends" (indicates to React that the//
   component isn't ready to render yet). This will show the nearest <Suspense>//
   fallback.// - If the query failed, it throws the failure error. For simplicity we aren't//
   handling the failure case here.function App(props) {
  const data = usePreloadedQuery(RepositoryNameQuery, props.preloadedQuery);
  return (
    <div className="App">
      <header className="App-header">
        <p>{data.address.city}</p>
      </header>
    </div>
  );}function AppRoot(props) {
  return (
    <RelayEnvironmentProvider environment={RelayEnvironment}>
      <Suspense fallback={'Loading...'}>
        <App preloadedQuery={preloadedQuery} />
      </Suspense>
    </RelayEnvironmentProvider>
  );}export default AppRoot;