Bump frontend dependencies & setup better urql cache

frontend/codegen.ts

@@ -9,6 +9,9 @@ const config: CodegenConfig = {
       preset: "client",
       plugins: [],
     },
+    "./src/gql/schema.ts": {
+      plugins: ["urql-introspection"],
+    },
   },
   hooks: { afterAllFileWrite: ["eslint --fix"] },
 };

frontend/package.json

@@ -17,29 +17,31 @@
   },
   "dependencies": {
     "@urql/core": "^4.0.4",
+    "@urql/exchange-graphcache": "^6.0.1",
     "date-fns": "^2.29.3",
     "graphql": "^16.6.0",
     "jotai": "^2.0.4",
     "jotai-location": "^0.5.1",
-    "jotai-urql": "^0.6.0",
+    "jotai-urql": "^0.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^3.3.0",
     "@graphql-codegen/client-preset": "^3.0.0",
+    "@graphql-codegen/urql-introspection": "^2.2.1",
     "@graphql-eslint/eslint-plugin": "^3.18.0",
-    "@storybook/addon-actions": "^7.0.5",
+    "@storybook/addon-actions": "^7.0.6",
-    "@storybook/addon-backgrounds": "^7.0.5",
+    "@storybook/addon-backgrounds": "^7.0.6",
-    "@storybook/addon-controls": "^7.0.5",
+    "@storybook/addon-controls": "^7.0.6",
-    "@storybook/addon-docs": "^7.0.5",
+    "@storybook/addon-docs": "^7.0.6",
-    "@storybook/addon-essentials": "^7.0.5",
+    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-measure": "^7.0.5",
+    "@storybook/addon-measure": "^7.0.6",
-    "@storybook/addon-outline": "^7.0.5",
+    "@storybook/addon-outline": "^7.0.6",
-    "@storybook/addon-toolbars": "^7.0.5",
+    "@storybook/addon-toolbars": "^7.0.6",
-    "@storybook/addon-viewport": "^7.0.5",
+    "@storybook/addon-viewport": "^7.0.6",
-    "@storybook/react": "^7.0.5",
+    "@storybook/react": "^7.0.6",
-    "@storybook/react-vite": "^7.0.5",
+    "@storybook/react-vite": "^7.0.6",
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
@@ -54,7 +56,7 @@
     "postcss": "^8.4.22",
     "prettier": "^2.8.7",
     "react-test-renderer": "^18.2.0",
-    "storybook": "^7.0.5",
+    "storybook": "^7.0.6",
     "tailwindcss": "^3.3.1",
     "typescript": "^5.0.4",
     "vite": "^4.2.2",

frontend/src/graphql.ts

@@ -12,14 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {
+import { createClient, fetchExchange } from "@urql/core";
-  createClient,
+import { cacheExchange } from "@urql/exchange-graphcache";
-  dedupExchange,
+
-  cacheExchange,
+import schema from "./gql/schema";
-  fetchExchange,
-} from "@urql/core";
 
 export const client = createClient({
   url: "/graphql",
-  exchanges: [dedupExchange, cacheExchange, fetchExchange],
+  exchanges: [cacheExchange({ schema }), fetchExchange],
 });

frontend/src/pages/BrowserSession.tsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { useAtomValue } from "jotai";
-import { atomsWithQuery } from "jotai-urql";
+import { atomWithQuery } from "jotai-urql";
 import { useMemo } from "react";
 import { graphql } from "../gql";
 
@@ -35,10 +35,19 @@ const QUERY = graphql(/* GraphQL */ `
 `);
 
 const BrowserSession: React.FC<{ id: string }> = ({ id }) => {
-  const data = useAtomValue(
+  const result = useAtomValue(
-    useMemo(() => atomsWithQuery(QUERY, () => ({ id })), [id])[0]
+    useMemo(
+      () => atomWithQuery({ query: QUERY, getVariables: () => ({ id }) }),
+      [id]
+    )
   );
 
+  if (result.error) {
+    throw result.error;
+  }
+
+  const data = result.data!!;
+
   return (
     <pre>
       <code>{JSON.stringify(data.browserSession, null, 2)}</code>

frontend/src/pages/Home.tsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { useAtomValue } from "jotai";
-import { atomsWithQuery } from "jotai-urql";
+import { atomWithQuery } from "jotai-urql";
 
 import BrowserSessionList from "../components/BrowserSessionList";
 import CompatSsoLoginList from "../components/CompatSsoLoginList";
@@ -37,10 +37,19 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-const [homeDataAtom] = atomsWithQuery(QUERY, () => ({ count: 10 }));
+const homeDataAtom = atomWithQuery({
+  query: QUERY,
+  getVariables: () => ({ count: 10 }),
+});
 
 const Home: React.FC = () => {
-  const data = useAtomValue(homeDataAtom);
+  const result = useAtomValue(homeDataAtom);
+
+  if (result.error) {
+    throw result.error;
+  }
+
+  const data = result.data!!;
 
   if (data.currentBrowserSession) {
     const session = data.currentBrowserSession;

frontend/src/pages/OAuth2Client.tsx

@@ -14,7 +14,7 @@
 
 import { useAtomValue } from "jotai";
 import { useMemo } from "react";
-import { atomsWithQuery } from "jotai-urql";
+import { atomWithQuery } from "jotai-urql";
 import { graphql } from "../gql";
 
 const QUERY = graphql(/* GraphQL */ `
@@ -32,10 +32,19 @@ const QUERY = graphql(/* GraphQL */ `
 `);
 
 const OAuth2Client: React.FC<{ id: string }> = ({ id }) => {
-  const data = useAtomValue(
+  const result = useAtomValue(
-    useMemo(() => atomsWithQuery(QUERY, () => ({ id })), [id])[0]
+    useMemo(
+      () => atomWithQuery({ query: QUERY, getVariables: () => ({ id }) }),
+      [id]
+    )
   );
 
+  if (result.error) {
+    throw result.error;
+  }
+
+  const data = result.data!!;
+
   return (
     <pre>
       <code>{JSON.stringify(data.oauth2Client, null, 2)}</code>