Switch to Tanstack Query

Author: sandhose

biome.json

@@ -17,19 +17,24 @@
       "crates/**",
       "frontend/src/gql/**",
       "frontend/src/routeTree.gen.ts",
+      "frontend/.storybook/locales.ts",
+      "frontend/locales/*.json",
       "**/coverage/**",
       "**/dist/**"
     ]
   },
   "formatter": {
     "enabled": true,
-    "useEditorconfig": true,
-    "ignore": ["frontend/.storybook/locales.ts", "frontend/locales/*.json"]
+    "useEditorconfig": true
   },
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "correctness": {
+        "noUnusedImports": "warn",
+        "noUnusedVariables": "warn"
+      }
     }
   }
 }

frontend/.storybook/preview.tsx

@@ -74,15 +74,15 @@ const withThemeProvider: Decorator = (Story, context) => {
   );
 };
 
-const withDummyRouter: Decorator = (Story, context) => {
+const withDummyRouter: Decorator = (Story, _context) => {
   return (
     <DummyRouter>
       <Story />
     </DummyRouter>
   );
 };
 
-const withTooltipProvider: Decorator = (Story, context) => {
+const withTooltipProvider: Decorator = (Story, _context) => {
   return (
     <TooltipProvider>
       <Story />

frontend/codegen.ts

@@ -18,6 +18,7 @@ const config: CodegenConfig = {
         enumsAsTypes: true,
         // By default, unknown scalars are generated as `any`. This is not ideal for catching potential bugs.
         defaultScalarType: "unknown",
+        maybeValue: "T | null | undefined",
         scalars: {
           DateTime: "string",
           Url: "string",

frontend/package-lock.json

@@ -21,6 +21,7 @@
     "@fontsource/inter": "^5.1.0",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
+    "@tanstack/react-query": "^5.59.20",
     "@tanstack/react-router": "^1.81.4",
     "@tanstack/router-zod-adapter": "^1.81.4",
     "@urql/core": "^5.0.8",
@@ -34,6 +35,7 @@
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "graphql": "^16.9.0",
+    "graphql-request": "^7.1.2",
     "i18next": "^23.16.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -56,6 +58,7 @@
     "@storybook/addon-essentials": "^8.4.2",
     "@storybook/react": "^8.4.2",
     "@storybook/react-vite": "^8.4.2",
+    "@tanstack/react-query-devtools": "^5.59.20",
     "@tanstack/router-devtools": "^1.81.4",
     "@tanstack/router-vite-plugin": "^1.79.0",
     "@testing-library/react": "^16.0.1",

frontend/package.json

@@ -11,11 +11,11 @@ import { Badge } from "@vector-im/compound-web";
 import { parseISO } from "date-fns";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { useMutation } from "urql";
 
 import { type FragmentType, graphql, useFragment } from "../gql";
-import type { DeviceType } from "../gql/graphql";
 
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { graphqlClient } from "../graphql";
 import DateTime from "./DateTime";
 import EndSessionButton from "./Session/EndSessionButton";
 import LastActive from "./Session/LastActive";
@@ -58,14 +58,26 @@ export const useEndBrowserSession = (
   sessionId: string,
   isCurrent: boolean,
 ): (() => Promise<void>) => {
-  const [, endSession] = useMutation(END_SESSION_MUTATION);
+  const queryClient = useQueryClient();
+  const endSession = useMutation({
+    mutationFn: (id: string) =>
+      graphqlClient.request(END_SESSION_MUTATION, { id }),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["sessionsOverview"] });
+      queryClient.invalidateQueries({ queryKey: ["browserSessionList"] });
+      queryClient.invalidateQueries({
+        queryKey: ["sessionDetail", data.endBrowserSession.browserSession?.id],
+      });
+
+      if (isCurrent) {
+        window.location.reload();
+      }
+    },
+  });
 
   const onSessionEnd = useCallback(async (): Promise<void> => {
-    await endSession({ id: sessionId });
-    if (isCurrent) {
-      window.location.reload();
-    }
-  }, [isCurrent, endSession, sessionId]);
+    await endSession.mutateAsync(sessionId);
+  }, [endSession.mutateAsync, sessionId]);
 
   return onSessionEnd;
 };

frontend/src/components/BrowserSession.tsx

@@ -4,13 +4,11 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Please see LICENSE in the repository root for full details.
 
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { parseISO } from "date-fns";
 import { useTranslation } from "react-i18next";
-import { useMutation } from "urql";
-
 import { type FragmentType, graphql, useFragment } from "../gql";
-import { DeviceType } from "../gql/graphql";
-
+import { graphqlClient } from "../graphql";
 import { browserLogoUri } from "./BrowserSession";
 import DateTime from "./DateTime";
 import EndSessionButton from "./Session/EndSessionButton";
@@ -44,7 +42,6 @@ export const END_SESSION_MUTATION = graphql(/* GraphQL */ `
       status
       compatSession {
         id
-        finishedAt
       }
     }
   }
@@ -54,7 +51,7 @@ export const simplifyUrl = (url: string): string => {
   let parsed: URL;
   try {
     parsed = new URL(url);
-  } catch (e) {
+  } catch (_e) {
     // Not a valid URL, return the original
     return url;
   }
@@ -76,10 +73,21 @@ const CompatSession: React.FC<{
 }> = ({ session }) => {
   const { t } = useTranslation();
   const data = useFragment(FRAGMENT, session);
-  const [, endCompatSession] = useMutation(END_SESSION_MUTATION);
+  const queryClient = useQueryClient();
+  const endSession = useMutation({
+    mutationFn: (id: string) =>
+      graphqlClient.request(END_SESSION_MUTATION, { id }),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["sessionsOverview"] });
+      queryClient.invalidateQueries({ queryKey: ["appSessionList"] });
+      queryClient.invalidateQueries({
+        queryKey: ["sessionDetail", data.endCompatSession.compatSession?.id],
+      });
+    },
+  });
 
   const onSessionEnd = async (): Promise<void> => {
-    await endCompatSession({ id: data.id });
+    await endSession.mutateAsync(data.id);
   };
 
   const clientName = data.ssoLogin?.redirectUri

frontend/src/components/CompatSession.tsx

@@ -6,11 +6,12 @@
 
 import cx from "classnames";
 import { Suspense } from "react";
-import { useQuery } from "urql";
 
 import { graphql } from "../../gql";
 import Footer from "../Footer";
 
+import { queryOptions, useQuery } from "@tanstack/react-query";
+import { graphqlClient } from "../../graphql";
 import styles from "./Layout.module.css";
 
 const QUERY = graphql(/* GraphQL */ `
@@ -22,10 +23,13 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
+export const query = queryOptions({
+  queryKey: ["footer"],
+  queryFn: ({ signal }) => graphqlClient.request({ document: QUERY, signal }),
+});
+
 const AsyncFooter: React.FC = () => {
-  const [result] = useQuery({
-    query: QUERY,
-  });
+  const result = useQuery(query);
 
   if (result.error) {
     // We probably prefer to render an empty footer in case of an error

frontend/src/components/Layout/Layout.tsx

@@ -4,4 +4,4 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Please see LICENSE in the repository root for full details.
 
-export { default } from "./Layout";
+export { default, query } from "./Layout";