add: add router and udpate App

client-react-ts-relay/package.json

@@ -10,9 +10,11 @@
     "@types/node": "^16.11.45",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@types/react-router-dom": "^5.3.3",
     "babel-plugin-relay": "^14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"

client-react-ts-relay/src/App.tsx

@@ -1,54 +1,32 @@
 import React, { Suspense } from "react";
-// import { useLazyLoadQuery } from "react-relay";
-import {graphql} from "babel-plugin-relay/macro";
-import { RelayEnvironmentProvider, usePreloadedQuery, loadQuery } from "react-relay";
+import { RelayEnvironmentProvider } from "react-relay";
 import RelayEnvironment from "./components/RelayEnv";
 import "./App.css";
-
-const CharacterQuery = graphql`
-  query AppCharacterQuery($characterId: ID!) {
-    character(id: $characterId) {
-      created
-      id
-      gender
-      image
-      name
-      species
-      status
-      type
-    }
-  }
-`
-
-const preloadedQuery = loadQuery(RelayEnvironment, CharacterQuery, {
-  /* query variables */
-  "characterId": 1
-});
-
+import CharacterList from "./components/CharacterList";
+import Character from "./components/Character";
+import { Routes, Route } from "react-router-dom";
 
 function App(props: any) {
-  const data: any = usePreloadedQuery(CharacterQuery, props.preloadedQuery);
-  console.log(data);
-
-  return <div className="App">
-    <header className="App-header">
-        <p>Name: {data.character.name}</p>
-        <p>Species: {data.character.species}</p>
-        <p>Status: {data.character.status}</p>
-        <img src={data.character.image} alt={data.character.name} />
-      </header>
-    <div></div>
-  </div>;
-};
+  return (
+    <Suspense fallback={"Loading..."}>
+      <div className="App">
+        <Routes>
+          <Route path="/" element={<CharacterList />} />
+          <Route path="/:id" element={<Character />} />
+        </Routes>
+      </div>
+    </Suspense>
+  );
+}
 
 function AppRoot() {
   return (
     <RelayEnvironmentProvider environment={RelayEnvironment}>
       <Suspense fallback={"Loading..."}>
-        <App preloadedQuery={preloadedQuery} />
+        <App />
       </Suspense>
     </RelayEnvironmentProvider>
   );
 }
 
-export default AppRoot;
+export default AppRoot;

client-react-ts-relay/src/components/Character.css

@@ -0,0 +1,11 @@
+.character{
+ display: flex;   
+}
+
+.character-content{
+    margin-left: 2rem;
+}
+
+.character-episode {
+    margin-top: 2rem;
+}

client-react-ts-relay/src/components/Character.tsx

@@ -0,0 +1,67 @@
+import React, { Suspense } from "react";
+import { graphql } from "babel-plugin-relay/macro";
+import { useLazyLoadQuery, useQueryLoader } from "react-relay";
+import "./Character.css";
+import { CharacterQuery as CharacterQueryType } from "./__generated__/CharacterQuery.graphql";
+import { useParams } from "react-router";
+
+const CharacterQuery = graphql`
+  query CharacterQuery($characterId: ID!) {
+    character(id: $characterId) {
+      created
+      id
+      gender
+      image
+      name
+      species
+      status
+      type
+      episode {
+        id
+        episode
+        name
+      }
+    }
+  }
+`;
+
+function Character() {
+  let { id } = useParams<{ id?: string }>();
+
+  const data: any = useLazyLoadQuery<CharacterQueryType>(CharacterQuery, {
+    characterId: id ? id : "4",
+  });
+
+  // const [queryRef, loadQuery] = useQueryLoader(CharacterQueryType);
+
+  const character = data.character;
+  console.log(character);
+
+  return (
+    <Suspense fallback={"Loading..."}>
+      <div className="character">
+        <img
+          src={character.image}
+          alt={character.name}
+          width={750}
+          height={750}
+        />
+        <div className="character-content">
+          <h1>{character.name}</h1>
+          <p>{character.gender}</p>
+          <div className="character-episode">
+            {character.episode.map((e: any, index: any) => {
+              return (
+                <div key={index}>
+                  {e.name} - {e.episode}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </Suspense>
+  );
+}
+
+export default Character;

client-react-ts-relay/src/components/CharacterList.css

@@ -0,0 +1,4 @@
+.character-list {
+    display: flex;
+    flex-wrap: wrap;
+}

client-react-ts-relay/src/components/CharacterList.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { graphql } from "babel-plugin-relay/macro";
+import {
+  useLazyLoadQuery,
+  usePreloadedQuery,
+  loadQuery,
+  PreloadedQuery,
+} from "react-relay";
+import type { CharacterListQuery as CharacterListQueryType } from "./__generated__/CharacterListQuery.graphql";
+import { Link } from "react-router-dom";
+import "./CharacterList.css";
+import RelayEnvironment from "../components/RelayEnv";
+
+const CharacterListQuery = graphql`
+  query CharacterListQuery {
+    characters {
+      results {
+        id
+        name
+        image
+      }
+    }
+  }
+`;
+
+const characterListQuery = loadQuery(RelayEnvironment, CharacterListQuery, {
+  /* query variables */
+});
+
+type Props = {
+  characterListQuery: PreloadedQuery<CharacterListQueryType>;
+};
+
+function CharacterList({ characterListQuery }: { characterListQuery: any }) {
+  const data: any = usePreloadedQuery(CharacterListQuery, characterListQuery);
+
+  // const data: any = useLazyLoadQuery<CharacterListQueryType>(
+  //   CharacterListQuery,
+  //   {}
+  // );
+
+  return (
+    <div className="">
+      <h1>Character List</h1>
+      <div className="character-list">
+        {data.characters.results.map((character: any, index: any) => {
+          return (
+            <Link to={`${character.id}`} key={index}>
+              <h2>{character.name}</h2>
+              <img src={character.image} alt={character.name} />
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const CharacterListRoot = () => {
+  return <CharacterList characterListQuery={characterListQuery} />;
+};
+
+export default CharacterListRoot;