chore: update to react query v5

frontend/package.json

@@ -14,7 +14,7 @@
     "@mantine/form": "^7.16.0",
     "@mantine/hooks": "^7.16.0",
     "@mantine/notifications": "^7.16.0",
-    "@tanstack/react-query": "4",
+    "@tanstack/react-query": "5",
     "axios": "^1.7.9",
     "i18next": "^25.0.0",
     "i18next-browser-languagedetector": "^8.0.4",

frontend/src/components/auth/login-forn.tsx

@@ -4,12 +4,12 @@ import { LoginFormValues, loginSchema } from "../../schemas/login-schema";
 import { useTranslation } from "react-i18next";
 
 interface LoginFormProps {
-  isLoading: boolean;
+  isPending: boolean;
   onSubmit: (values: LoginFormValues) => void;
 }
 
 export const LoginForm = (props: LoginFormProps) => {
-  const { isLoading, onSubmit } = props;
+  const { isPending, onSubmit } = props;
   const { t } = useTranslation();
 
   const form = useForm({
@@ -27,7 +27,7 @@ export const LoginForm = (props: LoginFormProps) => {
         label={t("loginUsername")}
         placeholder="username"
         required
-        disabled={isLoading}
+        disabled={isPending}
         key={form.key("username")}
         {...form.getInputProps("username")}
       />
@@ -36,11 +36,11 @@ export const LoginForm = (props: LoginFormProps) => {
         placeholder="password"
         required
         mt="md"
-        disabled={isLoading}
+        disabled={isPending}
         key={form.key("password")}
         {...form.getInputProps("password")}
       />
-      <Button fullWidth mt="xl" type="submit" loading={isLoading}>
+      <Button fullWidth mt="xl" type="submit" loading={isPending}>
         {t("loginSubmit")}
       </Button>
     </form>

frontend/src/components/auth/oauth-buttons.tsx

@@ -5,13 +5,13 @@ import { OAuthIcon } from "../../icons/oauth";
 
 interface OAuthButtonsProps {
   oauthProviders: string[];
-  isLoading: boolean;
+  isPending: boolean;
   mutate: (provider: string) => void;
   genericName: string;
 }
 
 export const OAuthButtons = (props: OAuthButtonsProps) => {
-  const { oauthProviders, isLoading, genericName, mutate } = props;
+  const { oauthProviders, isPending, genericName, mutate } = props;
   return (
     <Grid mb="md" mt="md" align="center" justify="center">
       {oauthProviders.includes("google") && (
@@ -21,7 +21,7 @@ export const OAuthButtons = (props: OAuthButtonsProps) => {
             leftSection={<GoogleIcon style={{ width: 14, height: 14 }} />}
             variant="default"
             onClick={() => mutate("google")}
-            loading={isLoading}
+            loading={isPending}
           >
             Google
           </Button>
@@ -34,7 +34,7 @@ export const OAuthButtons = (props: OAuthButtonsProps) => {
             leftSection={<GithubIcon style={{ width: 14, height: 14 }} />}
             variant="default"
             onClick={() => mutate("github")}
-            loading={isLoading}
+            loading={isPending}
           >
             Github
           </Button>
@@ -47,7 +47,7 @@ export const OAuthButtons = (props: OAuthButtonsProps) => {
             leftSection={<OAuthIcon style={{ width: 14, height: 14 }} />}
             variant="default"
             onClick={() => mutate("generic")}
-            loading={isLoading}
+            loading={isPending}
           >
             {genericName}
           </Button>

frontend/src/components/auth/totp-form.tsx

@@ -10,11 +10,11 @@ type FormValues = z.infer<typeof schema>;
 
 interface TotpFormProps {
   onSubmit: (values: FormValues) => void;
-  isLoading: boolean;
+  isPending: boolean;
 }
 
 export const TotpForm = (props: TotpFormProps) => {
-  const { onSubmit, isLoading } = props;
+  const { onSubmit, isPending } = props;
 
   const form = useForm({
     mode: "uncontrolled",
@@ -32,7 +32,7 @@ export const TotpForm = (props: TotpFormProps) => {
         placeholder=""
         {...form.getInputProps("code")}
       />
-      <Button type="submit" mt="xl" loading={isLoading} fullWidth>
+      <Button type="submit" mt="xl" loading={isPending} fullWidth>
         Verify
       </Button>
     </form>

frontend/src/context/app-context.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import React, { createContext, useContext } from "react";
 import axios from "axios";
 import { AppContextSchemaType } from "../schemas/app-context-schema";
@@ -14,7 +14,7 @@ export const AppContextProvider = ({
     data: userContext,
     isLoading,
     error,
-  } = useQuery({
+  } = useSuspenseQuery({
     queryKey: ["appContext"],
     queryFn: async () => {
       const res = await axios.get("/api/app");

frontend/src/context/user-context.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import React, { createContext, useContext } from "react";
 import axios from "axios";
 import { UserContextSchemaType } from "../schemas/user-context-schema";
@@ -14,7 +14,7 @@ export const UserContextProvider = ({
     data: userContext,
     isLoading,
     error,
-  } = useQuery({
+  } = useSuspenseQuery({
     queryKey: ["userContext"],
     queryFn: async () => {
       const res = await axios.get("/api/user");

frontend/src/main.tsx

@@ -19,13 +19,7 @@ import { TotpPage } from "./pages/totp-page.tsx";
 import { AppContextProvider } from "./context/app-context.tsx";
 import "./lib/i18n/i18n.ts";
 
-const queryClient = new QueryClient({
+const queryClient = new QueryClient();
-  defaultOptions: {
-    queries: {
-      suspense: true,
-    },
-  },
-});
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

frontend/src/pages/login-page.tsx

@@ -113,7 +113,7 @@ export const LoginPage = () => {
             </Text>
             <OAuthButtons
               oauthProviders={oauthProviders}
-              isLoading={loginOAuthMutation.isLoading}
+              isPending={loginOAuthMutation.isPending}
               mutate={loginOAuthMutation.mutate}
               genericName={genericName}
             />
@@ -128,7 +128,7 @@ export const LoginPage = () => {
         )}
         {configuredProviders.includes("username") && (
           <LoginForm
-            isLoading={loginMutation.isLoading}
+            isPending={loginMutation.isPending}
             onSubmit={handleSubmit}
           />
         )}

frontend/src/pages/logout-page.tsx

@@ -74,7 +74,7 @@ export const LogoutPage = () => {
           fullWidth
           mt="xl"
           onClick={() => logoutMutation.mutate()}
-          loading={logoutMutation.isLoading}
+          loading={logoutMutation.isPending}
         >
           {t("logoutTitle")}
         </Button>

frontend/src/pages/totp-page.tsx

@@ -57,7 +57,7 @@ export const TotpPage = () => {
           {t("totpTitle")}
         </Text>
         <TotpForm
-          isLoading={totpMutation.isLoading}
+          isPending={totpMutation.isPending}
           onSubmit={(values) => totpMutation.mutate(values)}
         />
       </Paper>