// App.jsimport './App.css';import React,{useState, Suspense} from 'react';import graphql from 'babel-plugin-relay/macro';import {RelayEnvironmentProvider, useMutation} from 'react-relay/hooks';import RelayEnvironment from './RelayEnvironment';function App(props) {
  const [commit, isInFlight] = useMutation(graphql
                            `mutation AppMutation($newName:String) {setName(nn:$newName)}`);
  const [name, setN] = useState("student");
  if (isInFlight) return <h3>updating...</h3>;
  return (
    <button onClick={() => {commit({variables: {newName: "Andrew" },
                                                         onCompleted: d=>{setN(d.setName);}});}}
    >{name}</button>
  );}function AppRoot(props) {
  return (
    <RelayEnvironmentProvider environment={RelayEnvironment}>
      <Suspense fallback={'Loading...'}>
        <App />
      </Suspense>
    </RelayEnvironmentProvider>
  );}export default AppRoot;