add code from FB tutorial

client/src/fbTutorial/App.js

@@ -0,0 +1,63 @@
+import 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
+const RepositoryNameQuery = graphql`
+  query AppRepositoryNameQuery {
+    repository(owner: "facebook", name: "relay") {
+      name
+    }
+  }
+`;
+
+// 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 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.repository.name}</p>
+      </header>
+    </div>
+  );
+}
+
+// The above component needs to know how to access the Relay environment, and we
+// need to specify a fallback in case it suspends:
+// - <RelayEnvironmentProvider> tells child components how to talk to the current
+//   Relay Environment instance
+// - <Suspense> specifies a fallback in case a child suspends.
+function AppRoot(props) {
+  return (
+    <RelayEnvironmentProvider environment={RelayEnvironment}>
+      <Suspense fallback={"Loading..."}>
+        <App preloadedQuery={preloadedQuery} />
+      </Suspense>
+    </RelayEnvironmentProvider>
+  );
+}
+
+export default AppRoot;

client/src/fbTutorial/RelayEnvironment.js

@@ -0,0 +1,16 @@
+// https://relay.dev/docs/getting-started/step-by-step-guide/
+
+import { Environment, Network, RecordSource, Store } from "relay-runtime";
+import fetchGraphQL from "./fetchGraphQL";
+
+async function fetchRelay(params, variables) {
+  console.log(
+    `fetching query ${params.name} with ${JSON.stringify(variables)}`
+  );
+  return fetchGraphQL(params.text, variables);
+}
+
+export default new Environment({
+  network: Network.create(fetchRelay),
+  store: new Store(new RecordSource()),
+});

client/src/fbTutorial/fetchGraphQL.js

@@ -0,0 +1,19 @@
+async function fetchGraphQL(text, variables) {
+  const REACT_APP_GITHUB_AUTH_TOKEN = process.env.REACT_APP_GITHUB_AUTH_TOKEN;
+
+  const response = await fetch("https://api.github.com/graphql", {
+    method: "POST",
+    headers: {
+      Authorization: `bearer ${REACT_APP_GITHUB_AUTH_TOKEN}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      query: text,
+      variables,
+    }),
+  });
+
+  return await response.json();
+}
+
+export default fetchGraphQL;

client/src/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./fbTutorial/App";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />