Skip to content

Commit ce416bd

Browse files
jerelmillerjerelmiller
authored
Add support for inspecting multiple clients (#1418)
1 parent c223f14 commit ce416bd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+2698
-1535
lines changed

‎codegen.ts

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ const config: CodegenConfig = {
2222
},
2323
nonOptionalTypename: true,
2424
omitOperationSuffix: true,
25+
useTypeImports: true,
2526
scalars: {
26-
ID: "number",
27+
Cache: "./scalars#Cache",
2728
QueryData: "./scalars#QueryData",
2829
Variables: "./scalars#Variables",
2930
QueryOptions: "./scalars#QueryOptions",
@@ -33,6 +34,43 @@ const config: CodegenConfig = {
3334
skipTypeNameForRoot: true,
3435
},
3536
plugins: ["typescript", "typescript-operations"],
37+
hooks: {
38+
afterOneFileWrite: ["prettier --write"],
39+
},
40+
},
41+
"./src/application/types/resolvers.ts": {
42+
config: {
43+
defaultScalarType: "unknown",
44+
rootValueType: "never",
45+
useTypeImports: true,
46+
scalars: {
47+
QueryData: "./scalars#QueryData",
48+
Variables: "./scalars#Variables",
49+
QueryOptions: "./scalars#QueryOptions",
50+
},
51+
mappers: {
52+
Client: "../../types.ts#ApolloClientInfo",
53+
ClientQueries: "../../types.ts#ApolloClientInfo",
54+
ClientMutations: "../../types.ts#ApolloClientInfo",
55+
SerializedApolloError:
56+
"../../extension/tab/helpers#SerializedApolloError as RpcSerializedApolloError",
57+
SerializedError:
58+
"../../extension/tab/helpers#SerializedError as RpcSerializedError",
59+
SerializedGraphQLError: "graphql#GraphQLFormattedError",
60+
},
61+
},
62+
plugins: [
63+
{
64+
add: {
65+
content: "/* eslint-disable @typescript-eslint/ban-types */",
66+
},
67+
},
68+
"typescript",
69+
"typescript-resolvers",
70+
],
71+
hooks: {
72+
afterOneFileWrite: ["prettier --write"],
73+
},
3674
},
3775
},
3876
hooks: {

‎development/client/package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎development/client/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@apollo/client": "3.10.8",
6+
"@apollo/client": "3.11.0-rc.1",
77
"@testing-library/jest-dom": "^6.0.0",
88
"@testing-library/react": "^16.0.0",
99
"@testing-library/user-event": "^14.0.0",

‎development/client/src/App.js

Lines changed: 86 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,81 +5,110 @@ import {
55
ApolloProvider,
66
InMemoryCache,
77
makeReference,
8-
useQuery,
98
} from "@apollo/client";
109
import ColorSchemeGenerator from "./ColorSchemeGenerator";
1110
import Favorites from "./Favorites";
1211
import ColorLookup from "./ColorLookup";
13-
import { GET_SAVED_COLORS } from "./queries";
1412
import "./App.css";
1513

1614
function App() {
17-
const [client, setClient] = useState(() => createClient());
15+
const [clients, setClients] = useState(() => [createClient("Root client")]);
16+
const [selectedClientIndex, setSelectedClientIndex] = useState(0);
17+
let client = clients[selectedClientIndex];
1818

19-
if (!client) {
19+
if (clients.length === 0) {
2020
return (
2121
<div style={{ textAlign: "center" }}>
2222
<h1>Client was terminated</h1>
23-
<button onClick={() => setClient(createClient())}>
23+
<button
24+
onClick={() => {
25+
setClients([createClient("Root client")]);
26+
}}
27+
>
2428
Recreate client
2529
</button>
2630
</div>
2731
);
2832
}
2933

34+
if (!client) {
35+
setSelectedClientIndex(0);
36+
client = clients[0];
37+
}
38+
3039
return (
3140
<ApolloProvider client={client}>
3241
<BrowserRouter>
33-
<Layout onChangeClient={(client) => setClient(client)} />
42+
<div className="App">
43+
<header style={{ display: "flex" }}>
44+
<Link to="/">
45+
<h1>Colors</h1>
46+
</Link>
47+
<nav style={{ flex: 1 }}>
48+
<Link to="/favorites">Favorites</Link>
49+
<Link to="/lookup">Lookup</Link>
50+
</nav>
51+
<div style={{ display: "flex", gap: "1rem" }}>
52+
<select
53+
value={clients.indexOf(client)}
54+
onChange={(e) => setSelectedClientIndex(Number(e.target.value))}
55+
>
56+
{clients.map((_, index) => (
57+
<option key={index} value={index}>
58+
Client {index}
59+
</option>
60+
))}
61+
</select>
62+
<button
63+
onClick={() =>
64+
setClients((c) => [
65+
...c,
66+
createClient(`Added client ${c.length}`),
67+
])
68+
}
69+
>
70+
Add client
71+
</button>
72+
<button onClick={() => setClients((c) => [...c, createClient()])}>
73+
Add anonymous client
74+
</button>
75+
<button
76+
onClick={() => {
77+
client.stop();
78+
setClients((c) => [
79+
...c.slice(0, selectedClientIndex),
80+
createClient(`Recreated client ${selectedClientIndex}`),
81+
...c.slice(selectedClientIndex + 1),
82+
]);
83+
}}
84+
>
85+
Recreate client
86+
</button>
87+
<button
88+
onClick={() => {
89+
client.stop();
90+
setClients((clients) => clients.filter((c) => c !== client));
91+
setSelectedClientIndex(0);
92+
}}
93+
>
94+
Terminate client
95+
</button>
96+
</div>
97+
</header>
98+
<main>
99+
<Routes>
100+
<Route path="/favorites" element={<Favorites />} />
101+
<Route path="/lookup" element={<ColorLookup />} />
102+
<Route path="/" element={<ColorSchemeGenerator />} />
103+
</Routes>
104+
</main>
105+
</div>
34106
</BrowserRouter>
35107
</ApolloProvider>
36108
);
37109
}
38110

39-
function Layout({ onChangeClient }) {
40-
const { client } = useQuery(GET_SAVED_COLORS);
41-
42-
return (
43-
<div className="App">
44-
<header style={{ display: "flex" }}>
45-
<Link to="/">
46-
<h1>Colors</h1>
47-
</Link>
48-
<nav style={{ flex: 1 }}>
49-
<Link to="/favorites">Favorites</Link>
50-
<Link to="/lookup">Lookup</Link>
51-
</nav>
52-
<div style={{ display: "flex", gap: "1rem" }}>
53-
<button
54-
onClick={() => {
55-
client.stop();
56-
onChangeClient(createClient());
57-
}}
58-
>
59-
Recreate client
60-
</button>
61-
<button
62-
onClick={() => {
63-
client.stop();
64-
onChangeClient(null);
65-
}}
66-
>
67-
Terminate client
68-
</button>
69-
</div>
70-
</header>
71-
<main>
72-
<Routes>
73-
<Route path="/favorites" element={<Favorites />} />
74-
<Route path="/lookup" element={<ColorLookup />} />
75-
<Route path="/" element={<ColorSchemeGenerator />} />
76-
</Routes>
77-
</main>
78-
</div>
79-
);
80-
}
81-
82-
function createClient() {
111+
function createClient(name) {
83112
return new ApolloClient({
84113
cache: new InMemoryCache({
85114
typePolicies: {
@@ -89,10 +118,9 @@ function createClient() {
89118
saved: {
90119
read(_, { readField }) {
91120
const hex = readField("hex");
92-
const favoritedColors = readField(
93-
"favoritedColors",
94-
makeReference("ROOT_QUERY")
95-
);
121+
const favoritedColors =
122+
readField("favoritedColors", makeReference("ROOT_QUERY")) ??
123+
[];
96124
return favoritedColors.some((colorRef) => {
97125
return hex === readField("hex", colorRef);
98126
});
@@ -103,6 +131,10 @@ function createClient() {
103131
},
104132
}),
105133
uri: "http://localhost:4000",
134+
devtools: {
135+
enabled: true,
136+
name,
137+
},
106138
});
107139
}
108140

‎jest.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ export default {
3737
"/node_modules/",
3838
"/development/",
3939
],
40+
transform: {
41+
"\\.graphql$": "<rootDir>/jest/graphqlTransform.js",
42+
},
4043
transformIgnorePatterns: [`/node_modules/(?!${esModules})/`],
4144
moduleNameMapper: {
4245
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":

‎jest/graphqlTransform.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
process(source) {
3+
return { code: `module.exports = ${JSON.stringify(source)}` };
4+
},
5+
};

0 commit comments

Comments
 (0)