feat(packages): refactor query client (#544)

* feat(packages): Refactor QueryClient initialization in Providers component to use createQueryClient function for improved configuration.

Author: jonybur

services/vault/src/config/queryClient.ts

@@ -0,0 +1,67 @@
+import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
+
+const calculateRetryDelay = (attemptIndex: number): number => {
+  return Math.min(1000 * 2 ** attemptIndex, 30000);
+};
+
+const shouldRetry = (failureCount: number, error: Error): boolean => {
+  if (failureCount >= 3) {
+    return false;
+  }
+
+  if (error.message?.includes("rejected")) {
+    return false;
+  }
+
+  if (error.message?.includes("User rejected")) {
+    return false;
+  }
+
+  return true;
+};
+
+const logError = (error: Error, context?: string): void => {
+  const errorContext = context ? `[${context}]` : "";
+  console.error(`React Query Error ${errorContext}:`, {
+    message: error.message,
+    stack: error.stack,
+    name: error.name,
+  });
+};
+
+export const createQueryClient = (): QueryClient => {
+  const queryCache = new QueryCache({
+    onError: (error) => {
+      logError(error, "Query");
+    },
+  });
+
+  const mutationCache = new MutationCache({
+    onError: (error) => {
+      logError(error, "Mutation");
+    },
+  });
+
+  return new QueryClient({
+    queryCache,
+    mutationCache,
+    defaultOptions: {
+      queries: {
+        retry: (failureCount, error) => {
+          return shouldRetry(failureCount, error as Error);
+        },
+        retryDelay: calculateRetryDelay,
+        staleTime: 60000,
+        gcTime: 5 * 60 * 1000,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: true,
+      },
+      mutations: {
+        retry: (failureCount, error) => {
+          return shouldRetry(failureCount, error as Error);
+        },
+        retryDelay: calculateRetryDelay,
+      },
+    },
+  });
+};

services/vault/src/providers.tsx

@@ -1,15 +1,16 @@
 import { CoreUIProvider, ScrollLocker } from "@babylonlabs-io/core-ui";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ThemeProvider } from "next-themes";
 import { Suspense, useEffect, useRef, useState } from "react";
 
 import { NotificationContainer } from "@/components/NotificationContainer";
+import { createQueryClient } from "@/config/queryClient";
 import { VaultWalletConnectionProvider } from "@/context/wallet";
 import { AppState } from "@/state/AppState";
 
 function Providers({ children }: React.PropsWithChildren) {
-  const [client] = useState(new QueryClient());
+  const [client] = useState(() => createQueryClient());
   const appRootRef = useRef<HTMLDivElement>(null);
   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
     null,