Implement the movie frontend using Relay

frontend/src/App.tsx

@@ -1,23 +1,63 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import {
   BrowserRouter as Router,
   Switch,
   Route,
 } from "react-router-dom";
 
+import { Environment, Store, RecordSource, Network } from 'relay-runtime';
+import { RelayEnvironmentProvider } from 'react-relay/hooks';
+
 import { Movie, Movies } from './Movie';
 
+
+const relayEnvironment = new Environment({
+  // TODO What are thooose?!
+  store: new Store(new RecordSource()),
+  network: Network.create(({ text: query }, variables) =>
+    fetch('/graphql', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ query, variables }),
+    }).then(response => response.json())),
+});
+
+class ErrorBoundary extends React.PureComponent<unknown, { error?: boolean }> {
+  constructor(props: unknown) {
+    super(props);
+    this.state = {};
+  }
+
+  static getDerivedStateFromError() {
+    return { error: true };
+  }
+
+  render() {
+    if (this.state.error) {
+      return <p>An error occured!</p>;
+    }
+
+    return this.props.children;
+  }
+}
+
 export const App: React.FC = () => {
   return (
-    <Router>
-      <Switch>
-        <Route path="/movie/:id">
-          <Movie />
-        </Route>
-        <Route path="/">
-          <Movies />
-        </Route>
-      </Switch>
-    </Router>
+    <RelayEnvironmentProvider environment={relayEnvironment}>
+      <ErrorBoundary>
+        <Suspense fallback="Loading ...">
+          <Router>
+            <Switch>
+              <Route path="/movie/:id">
+                <Movie />
+              </Route>
+              <Route path="/">
+                <Movies />
+              </Route>
+            </Switch>
+          </Router>
+        </Suspense>
+      </ErrorBoundary>
+    </RelayEnvironmentProvider>
   );
 };

frontend/src/Movie.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
 
+import { graphql, useLazyLoadQuery } from 'react-relay/hooks';
+import { MovieQuery } from './__generated__/MovieQuery.graphql';
+import { MoviesQuery } from './__generated__/MoviesQuery.graphql';
 
-const MOVIE = { id: 1, name: "Scott Pilgrim vs. the World", year: 2010 };
 
 export const Movies: React.FC = () => {
-  const loading = false, error = false;
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error!</p>;
-
-  const movies = [MOVIE];
+  const { movies } = useLazyLoadQuery<MoviesQuery>(graphql`
+    query MoviesQuery {
+      movies {
+        id
+        name
+        year
+      }
+    }
+  `, {});
 
   return <ul>
     {movies.map(({ id, name, year }) => (
@@ -23,11 +29,16 @@ export const Movies: React.FC = () => {
 export const Movie: React.FC = () => {
   const { id } = useParams();
 
-  const loading = false, error = false;
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error!</p>;
+  const { movie } = useLazyLoadQuery<MovieQuery>(graphql`
+    query MovieQuery($id: Int!) {
+      movie(id: $id) {
+        name
+        year
+      }
+    }
+  `, { id: Number(id) });
 
-  const movie = MOVIE;
+  if (!movie) throw new Error('Movie not found');
 
   return <div id={id}>
     Name: {movie.name}