Add support for inspecting multiple clients (#1418)

apollographql · Jul 22, 2024 · ce416bd · ce416bd
1 parent c223f14
commit ce416bd
Show file tree

Hide file tree

Showing 47 changed files with 2,698 additions and 1,535 deletions.
diff --git a/codegen.ts b/codegen.ts
@@ -22,8 +22,9 @@ const config: CodegenConfig = {
         },
         nonOptionalTypename: true,
         omitOperationSuffix: true,
+        useTypeImports: true,
         scalars: {
-          ID: "number",
+          Cache: "./scalars#Cache",
           QueryData: "./scalars#QueryData",
           Variables: "./scalars#Variables",
           QueryOptions: "./scalars#QueryOptions",
@@ -33,6 +34,43 @@ const config: CodegenConfig = {
         skipTypeNameForRoot: true,
       },
       plugins: ["typescript", "typescript-operations"],
+      hooks: {
+        afterOneFileWrite: ["prettier --write"],
+      },
+    },
+    "./src/application/types/resolvers.ts": {
+      config: {
+        defaultScalarType: "unknown",
+        rootValueType: "never",
+        useTypeImports: true,
+        scalars: {
+          QueryData: "./scalars#QueryData",
+          Variables: "./scalars#Variables",
+          QueryOptions: "./scalars#QueryOptions",
+        },
+        mappers: {
+          Client: "../../types.ts#ApolloClientInfo",
+          ClientQueries: "../../types.ts#ApolloClientInfo",
+          ClientMutations: "../../types.ts#ApolloClientInfo",
+          SerializedApolloError:
+            "../../extension/tab/helpers#SerializedApolloError as RpcSerializedApolloError",
+          SerializedError:
+            "../../extension/tab/helpers#SerializedError as RpcSerializedError",
+          SerializedGraphQLError: "graphql#GraphQLFormattedError",
+        },
+      },
+      plugins: [
+        {
+          add: {
+            content: "/* eslint-disable @typescript-eslint/ban-types */",
+          },
+        },
+        "typescript",
+        "typescript-resolvers",
+      ],
+      hooks: {
+        afterOneFileWrite: ["prettier --write"],
+      },
     },
   },
   hooks: {

diff --git a/development/client/package-lock.json b/development/client/package-lock.json
diff --git a/development/client/package.json b/development/client/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "3.10.8",
+    "@apollo/client": "3.11.0-rc.1",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",

diff --git a/development/client/src/App.js b/development/client/src/App.js
@@ -5,81 +5,110 @@ import {
   ApolloProvider,
   InMemoryCache,
   makeReference,
-  useQuery,
 } from "@apollo/client";
 import ColorSchemeGenerator from "./ColorSchemeGenerator";
 import Favorites from "./Favorites";
 import ColorLookup from "./ColorLookup";
-import { GET_SAVED_COLORS } from "./queries";
 import "./App.css";
 
 function App() {
-  const [client, setClient] = useState(() => createClient());
+  const [clients, setClients] = useState(() => [createClient("Root client")]);
+  const [selectedClientIndex, setSelectedClientIndex] = useState(0);
+  let client = clients[selectedClientIndex];
 
-  if (!client) {
+  if (clients.length === 0) {
     return (
       <div style={{ textAlign: "center" }}>
         <h1>Client was terminated</h1>
-        <button onClick={() => setClient(createClient())}>
+        <button
+          onClick={() => {
+            setClients([createClient("Root client")]);
+          }}
+        >
           Recreate client
         </button>
       </div>
     );
   }
 
+  if (!client) {
+    setSelectedClientIndex(0);
+    client = clients[0];
+  }
+
   return (
     <ApolloProvider client={client}>
       <BrowserRouter>
-        <Layout onChangeClient={(client) => setClient(client)} />
+        <div className="App">
+          <header style={{ display: "flex" }}>
+            <Link to="/">
+              <h1>Colors</h1>
+            </Link>
+            <nav style={{ flex: 1 }}>
+              <Link to="/favorites">Favorites</Link>
+              <Link to="/lookup">Lookup</Link>
+            </nav>
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <select
+                value={clients.indexOf(client)}
+                onChange={(e) => setSelectedClientIndex(Number(e.target.value))}
+              >
+                {clients.map((_, index) => (
+                  <option key={index} value={index}>
+                    Client {index}
+                  </option>
+                ))}
+              </select>
+              <button
+                onClick={() =>
+                  setClients((c) => [
+                    ...c,
+                    createClient(`Added client ${c.length}`),
+                  ])
+                }
+              >
+                Add client
+              </button>
+              <button onClick={() => setClients((c) => [...c, createClient()])}>
+                Add anonymous client
+              </button>
+              <button
+                onClick={() => {
+                  client.stop();
+                  setClients((c) => [
+                    ...c.slice(0, selectedClientIndex),
+                    createClient(`Recreated client ${selectedClientIndex}`),
+                    ...c.slice(selectedClientIndex + 1),
+                  ]);
+                }}
+              >
+                Recreate client
+              </button>
+              <button
+                onClick={() => {
+                  client.stop();
+                  setClients((clients) => clients.filter((c) => c !== client));
+                  setSelectedClientIndex(0);
+                }}
+              >
+                Terminate client
+              </button>
+            </div>
+          </header>
+          <main>
+            <Routes>
+              <Route path="/favorites" element={<Favorites />} />
+              <Route path="/lookup" element={<ColorLookup />} />
+              <Route path="/" element={<ColorSchemeGenerator />} />
+            </Routes>
+          </main>
+        </div>
       </BrowserRouter>
     </ApolloProvider>
   );
 }
 
-function Layout({ onChangeClient }) {
-  const { client } = useQuery(GET_SAVED_COLORS);
-
-  return (
-    <div className="App">
-      <header style={{ display: "flex" }}>
-        <Link to="/">
-          <h1>Colors</h1>
-        </Link>
-        <nav style={{ flex: 1 }}>
-          <Link to="/favorites">Favorites</Link>
-          <Link to="/lookup">Lookup</Link>
-        </nav>
-        <div style={{ display: "flex", gap: "1rem" }}>
-          <button
-            onClick={() => {
-              client.stop();
-              onChangeClient(createClient());
-            }}
-          >
-            Recreate client
-          </button>
-          <button
-            onClick={() => {
-              client.stop();
-              onChangeClient(null);
-            }}
-          >
-            Terminate client
-          </button>
-        </div>
-      </header>
-      <main>
-        <Routes>
-          <Route path="/favorites" element={<Favorites />} />
-          <Route path="/lookup" element={<ColorLookup />} />
-          <Route path="/" element={<ColorSchemeGenerator />} />
-        </Routes>
-      </main>
-    </div>
-  );
-}
-
-function createClient() {
+function createClient(name) {
   return new ApolloClient({
     cache: new InMemoryCache({
       typePolicies: {
@@ -89,10 +118,9 @@ function createClient() {
             saved: {
               read(_, { readField }) {
                 const hex = readField("hex");
-                const favoritedColors = readField(
-                  "favoritedColors",
-                  makeReference("ROOT_QUERY")
-                );
+                const favoritedColors =
+                  readField("favoritedColors", makeReference("ROOT_QUERY")) ??
+                  [];
                 return favoritedColors.some((colorRef) => {
                   return hex === readField("hex", colorRef);
                 });
@@ -103,6 +131,10 @@ function createClient() {
       },
     }),
     uri: "http://localhost:4000",
+    devtools: {
+      enabled: true,
+      name,
+    },
   });
 }
 

diff --git a/jest.config.js b/jest.config.js
@@ -37,6 +37,9 @@ export default {
     "/node_modules/",
     "/development/",
   ],
+  transform: {
+    "\\.graphql$": "<rootDir>/jest/graphqlTransform.js",
+  },
   transformIgnorePatterns: [`/node_modules/(?!${esModules})/`],
   moduleNameMapper: {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":

diff --git a/jest/graphqlTransform.js b/jest/graphqlTransform.js
@@ -0,0 +1,5 @@
+export default {
+  process(source) {
+    return { code: `module.exports = ${JSON.stringify(source)}` };
+  },
+};