Switch to @tanstack/react-query for GraphQL requests

.github/dependabot.yml

@@ -88,10 +88,6 @@ updates:
         patterns:
           - "jotai"
           - "jotai-*"
-      urql:
-        patterns:
-          - "urql"
-          - "@urql/*"
       graphql-codegen:
         patterns:
           - "@graphql-codegen/*"

biome.json

@@ -17,19 +17,25 @@
       "crates/**",
       "frontend/src/gql/**",
       "frontend/src/routeTree.gen.ts",
+      "frontend/.storybook/locales.ts",
+      "frontend/locales/*.json",
+      "frontend/stories/static/**",
       "**/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/main.ts

@@ -7,7 +7,9 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../{src,stories}/**/*.stories.@(js|jsx|ts|tsx)"],
+
+  staticDirs: ["../stories/static"],
 
   addons: [
     // Automatic docs pages
@@ -31,6 +33,9 @@ const config: StorybookConfig = {
     // Theme switch toolbar
     "@storybook/addon-toolbars",
 
+    // Interactions
+    "@storybook/addon-interactions",
+
     // i18next integration
     "storybook-react-i18next",
   ],
@@ -48,6 +53,10 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+
+  env: {
+    STORYBOOK: "true",
+  },
 };
 
 export default config;

frontend/.storybook/preview.tsx

@@ -11,14 +11,25 @@ import type {
   Preview,
 } from "@storybook/react";
 import { TooltipProvider } from "@vector-im/compound-web";
+import { initialize, mswLoader } from "msw-storybook-addon";
 import { useLayoutEffect } from "react";
 
 import "../src/shared.css";
-import i18n from "../src/i18n";
+import i18n, { setupI18n } from "../src/i18n";
 
 import { DummyRouter } from "../src/test-utils/router";
+import { handlers } from "../tests/mocks/handlers";
 import localazyMetadata from "./locales";
 
+initialize(
+  {
+    onUnhandledRequest: "bypass",
+  },
+  handlers,
+);
+
+setupI18n();
+
 export const parameters: Parameters = {
   controls: {
     matchers: {
@@ -74,15 +85,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 />
@@ -104,13 +115,14 @@ const locales = Object.fromEntries(
 );
 
 const preview: Preview = {
-  globals: {
+  initialGlobals: {
     locale: localazyMetadata.baseLocale,
     locales,
   },
   parameters: {
     i18n,
   },
+  loaders: [mswLoader],
 };
 
 export default preview;

frontend/codegen.ts

@@ -13,11 +13,14 @@ const config: CodegenConfig = {
   generates: {
     "./src/gql/": {
       preset: "client",
+      plugins: ["typescript-msw"],
       config: {
+        documentMode: "string",
         useTypeImports: true,
         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",