chore(shared,clerk-js): Set defaultOptions to queryClient

Author: panteliselef

packages/clerk-js/package.json

@@ -71,7 +71,7 @@
     "@formkit/auto-animate": "^0.8.2",
     "@stripe/stripe-js": "5.6.0",
     "@swc/helpers": "^0.5.17",
-    "@tanstack/query-core": "5.87.4",
+    "@tanstack/query-core": "catalog:tanstack",
     "@zxcvbn-ts/core": "3.0.4",
     "@zxcvbn-ts/language-common": "3.0.4",
     "alien-signals": "2.0.6",

packages/clerk-js/src/core/clerk.ts

@@ -94,7 +94,7 @@ import type {
 } from '@clerk/shared/types';
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
-import type { QueryClient } from '@tanstack/query-core';
+import type { QueryClient, QueryClientConfig } from '@tanstack/query-core';
 
 import { debugLogger, initDebugLogger } from '@/utils/debug';
 
@@ -198,6 +198,24 @@ const defaultOptions: ClerkOptions = {
   newSubscriptionRedirectUrl: undefined,
 };
 
+const RQ_CLIENT_TAG = 'clerk-rq-client' as const;
+
+type ClerkRQClient = { __tag: typeof RQ_CLIENT_TAG; client: QueryClient };
+
+const clerkQueryClientConfig: QueryClientConfig = {
+  defaultOptions: {
+    queries: {
+      // use the retry logic that fapiClient uses
+      retry: false,
+      // Note: to refetch onWindowFocus, you need to call `queryClient.mount()`
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      // the query will refetch on mount if the data is stale
+      refetchOnMount: true,
+    },
+  },
+};
+
 export class Clerk implements ClerkInterface {
   public static mountComponentRenderer?: MountComponentRenderer;
 
@@ -243,23 +261,12 @@ export class Clerk implements ClerkInterface {
   #touchThrottledUntil = 0;
   #publicEventBus = createClerkEventBus();
 
-  get __internal_queryClient(): { __tag: 'clerk-rq-client'; client: QueryClient } | undefined {
-    if (!this.#queryClient) {
-      void import('./query-core')
-        .then(module => module.QueryClient)
-        .then(QueryClient => {
-          if (this.#queryClient) {
-            return;
-          }
-          this.#queryClient = new QueryClient();
-          // @ts-expect-error - queryClientStatus is not typed
-          this.#publicEventBus.emit('queryClientStatus', 'ready');
-        });
-    }
+  get __internal_queryClient(): ClerkRQClient | undefined {
+    this.#initQueryClient();
 
     return this.#queryClient
       ? {
-          __tag: 'clerk-rq-client',
+          __tag: RQ_CLIENT_TAG,
           client: this.#queryClient,
         }
       : undefined;
@@ -289,6 +296,25 @@ export class Clerk implements ClerkInterface {
 
   public __internal_setActiveInProgress = false;
 
+  #initQueryClient = (): void => {
+    if (this.#queryClient) {
+      return;
+    }
+
+    void import('./query-core')
+      .then(module => module.QueryClient)
+      .then(QueryClientCtor => {
+        if (this.#queryClient) {
+          return;
+        }
+
+        this.#queryClient = new QueryClientCtor(clerkQueryClientConfig);
+
+        // @ts-expect-error - queryClientStatus is not typed
+        this.#publicEventBus.emit('queryClientStatus', 'ready');
+      });
+  };
+
   get publishableKey(): string {
     return this.#publishableKey;
   }

packages/clerk-js/src/test/mock-helpers.ts

@@ -55,6 +55,9 @@ export const mockClerkMethods = (clerk: LoadedClerk): DeepVitestMocked<LoadedCle
           // Setting staleTime to Infinity will not cause issues between tests as long as each test
           // case has its own wrapper that initializes a Clerk instance with a new QueryClient.
           staleTime: Infinity,
+          refetchOnWindowFocus: false,
+          refetchOnReconnect: false,
+          refetchOnMount: false,
         },
       },
     }),

packages/shared/package.json

@@ -163,7 +163,7 @@
   "devDependencies": {
     "@stripe/react-stripe-js": "3.1.1",
     "@stripe/stripe-js": "5.6.0",
-    "@tanstack/query-core": "5.87.4",
+    "@tanstack/query-core": "catalog:tanstack",
     "@types/glob-to-regexp": "0.4.4",
     "@types/js-cookie": "3.0.6",
     "cross-fetch": "^4.1.0",

packages/shared/src/react/clerk-rq/use-clerk-query-client.ts

@@ -57,28 +57,47 @@ function createRecursiveProxy(label: string): RecursiveMock {
 
 const mockQueryClient = createRecursiveProxy('ClerkMockQueryClient') as unknown as QueryClient;
 
+type ClerkRQClient = { __tag: 'clerk-rq-client'; client: QueryClient };
+
+const isTaggedRQClient = (value: unknown): value is ClerkRQClient => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    '__tag' in (value as Record<string, unknown>) &&
+    (value as Record<string, unknown>).__tag === 'clerk-rq-client'
+  );
+};
+
+const getQueryClientState = (clerk: unknown): { client: QueryClient; isLoaded: boolean } => {
+  const internal = (clerk as { __internal_queryClient?: ClerkRQClient | undefined }).__internal_queryClient;
+
+  if (isTaggedRQClient(internal)) {
+    return { client: internal.client, isLoaded: true };
+  }
+
+  return { client: mockQueryClient, isLoaded: false };
+};
+
 const useClerkQueryClient = (): [QueryClient, boolean] => {
   const clerk = useClerkInstanceContext();
 
-  // @ts-expect-error - __internal_queryClient is not typed
-  const queryClient = clerk.__internal_queryClient as { __tag: 'clerk-rq-client'; client: QueryClient } | undefined;
-  const [, setQueryClientLoaded] = useState(
-    typeof queryClient === 'object' && '__tag' in queryClient && queryClient.__tag === 'clerk-rq-client',
-  );
+  const [state, setState] = useState<{ client: QueryClient; isLoaded: boolean }>(() => getQueryClientState(clerk));
 
   useEffect(() => {
-    const _setQueryClientLoaded = () => setQueryClientLoaded(true);
-    // @ts-expect-error - queryClientStatus is not typed
-    clerk.on('queryClientStatus', _setQueryClientLoaded);
-    return () => {
-      // @ts-expect-error - queryClientStatus is not typed
-      clerk.off('queryClientStatus', _setQueryClientLoaded);
+    const handleStatusChange = () => {
+      setState(getQueryClientState(clerk));
     };
-  }, [clerk, setQueryClientLoaded]);
 
-  const isLoaded = typeof queryClient === 'object' && '__tag' in queryClient && queryClient.__tag === 'clerk-rq-client';
+    // @ts-expect-error - queryClientStatus is not typed on Clerk
+    clerk.on('queryClientStatus', handleStatusChange);
+
+    return () => {
+      // @ts-expect-error - queryClientStatus is not typed on Clerk
+      clerk.off('queryClientStatus', handleStatusChange);
+    };
+  }, [clerk]);
 
-  return [queryClient?.client || mockQueryClient, isLoaded];
+  return [state.client, state.isLoaded];
 };
 
 export { useClerkQueryClient };

pnpm-lock.yaml

@@ -18,6 +18,10 @@ catalogs:
     react: ^18.0.0 || ^19.0.0 || ^19.0.0-0
     react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-0
 
+  # Can be referenced through "catalog:tanstack"
+  tanstack:
+    '@tanstack/query-core': 5.87.4
+
   # Can be referenced through "catalog:repo"
   repo:
     tslib: 2.8.1