feat(shared): Remove SWR

.changeset/remove-swr-switches.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': major
+---
+
+Remove SWR hooks and env-based switchovers in favor of the React Query implementations; promote @tanstack/query-core to a runtime dependency.

packages/clerk-js/package.json

@@ -67,7 +67,7 @@
     "@solana/wallet-standard": "catalog:module-manager",
     "@stripe/stripe-js": "5.6.0",
     "@swc/helpers": "catalog:repo",
-    "@tanstack/query-core": "5.87.4",
+    "@tanstack/query-core": "5.90.16",
     "@wallet-standard/core": "catalog:module-manager",
     "@zxcvbn-ts/core": "catalog:module-manager",
     "@zxcvbn-ts/language-common": "catalog:module-manager",

packages/clerk-js/src/test/create-fixtures.tsx

@@ -2,7 +2,6 @@
 // @ts-nocheck
 
 import type { ClerkOptions, ClientJSON, EnvironmentJSON, LoadedClerk } from '@clerk/shared/types';
-import { useState } from 'react';
 import { vi } from 'vitest';
 
 import { Clerk as ClerkCtor } from '@/core/clerk';
@@ -87,7 +86,6 @@ const unboundCreateFixtures = (
 
     const MockClerkProvider = (props: any) => {
       const { children } = props;
-      const [swrConfig] = useState(() => ({ provider: () => new Map() }));
 
       const componentsWithoutContext = [
         'UsernameSection',
@@ -108,11 +106,7 @@ const unboundCreateFixtures = (
       );
 
       return (
-        <CoreClerkContextWrapper
-          clerk={clerkMock}
-          // Clear swr cache
-          swrConfig={swrConfig}
-        >
+        <CoreClerkContextWrapper clerk={clerkMock}>
           <EnvironmentProvider value={environmentMock}>
             <OptionsProvider value={optionsMock}>
               <RouteContext.Provider value={routerMock}>

packages/shared/global.d.ts

@@ -4,7 +4,6 @@ declare const JS_PACKAGE_VERSION: string;
 declare const UI_PACKAGE_VERSION: string;
 declare const __DEV__: boolean;
 declare const __BUILD_DISABLE_RHC__: boolean;
-declare const __CLERK_USE_RQ__: boolean;
 
 interface ImportMetaEnv {
   readonly [key: string]: string;

packages/shared/package.json

@@ -124,11 +124,11 @@
     "test:coverage": "vitest --collectCoverage && open coverage/lcov-report/index.html"
   },
   "dependencies": {
+    "@tanstack/query-core": "5.90.16",
     "dequal": "2.0.3",
     "glob-to-regexp": "0.4.1",
     "js-cookie": "3.0.5",
-    "std-env": "^3.9.0",
-    "swr": "2.3.4"
+    "std-env": "^3.9.0"
   },
   "devDependencies": {
     "@base-org/account": "catalog:module-manager",
@@ -138,7 +138,6 @@
     "@solana/wallet-standard": "catalog:module-manager",
     "@stripe/react-stripe-js": "3.1.1",
     "@stripe/stripe-js": "5.6.0",
-    "@tanstack/query-core": "5.87.4",
     "@types/glob-to-regexp": "0.4.4",
     "@types/js-cookie": "3.0.6",
     "@wallet-standard/core": "catalog:module-manager",

packages/shared/src/react/billing/useInitializePaymentMethod.tsx

@@ -1,2 +1,76 @@
-export type { UseInitializePaymentMethodResult } from 'virtual:data-hooks/useInitializePaymentMethod';
-export { __internal_useInitializePaymentMethod } from 'virtual:data-hooks/useInitializePaymentMethod';
+import { useCallback, useMemo } from 'react';
+
+import type { BillingInitializedPaymentMethodResource, ForPayerType } from '../../types';
+import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
+import { useClerkQueryClient } from '../clerk-rq/use-clerk-query-client';
+import { useClerkQuery } from '../clerk-rq/useQuery';
+import { useOrganizationContext, useUserContext } from '../contexts';
+import { useBillingHookEnabled } from '../hooks/useBillingHookEnabled';
+
+type InitializePaymentMethodOptions = {
+  for?: ForPayerType;
+};
+
+export type UseInitializePaymentMethodResult = {
+  initializedPaymentMethod: BillingInitializedPaymentMethodResource | undefined;
+  initializePaymentMethod: () => Promise<BillingInitializedPaymentMethodResource | undefined>;
+};
+
+/**
+ * @internal
+ */
+function useInitializePaymentMethod(options?: InitializePaymentMethodOptions): UseInitializePaymentMethodResult {
+  const { for: forType } = options ?? {};
+  const { organization } = useOrganizationContext();
+  const user = useUserContext();
+
+  const resource = forType === 'organization' ? organization : user;
+
+  const billingEnabled = useBillingHookEnabled(options);
+
+  const queryKey = useMemo(() => {
+    return ['billing-payment-method-initialize', { resourceId: resource?.id }] as const;
+  }, [resource?.id]);
+
+  const isEnabled = Boolean(resource?.id) && billingEnabled;
+
+  const query = useClerkQuery({
+    queryKey,
+    queryFn: async () => {
+      if (!resource) {
+        return undefined;
+      }
+
+      return resource.initializePaymentMethod({
+        gateway: 'stripe',
+      });
+    },
+    enabled: isEnabled,
+    staleTime: 1_000 * 60,
+    refetchOnWindowFocus: false,
+    placeholderData: defineKeepPreviousDataFn(true),
+  });
+
+  const [queryClient] = useClerkQueryClient();
+
+  const initializePaymentMethod = useCallback(async () => {
+    if (!resource) {
+      return undefined;
+    }
+
+    const result = await resource.initializePaymentMethod({
+      gateway: 'stripe',
+    });
+
+    queryClient.setQueryData(queryKey, result);
+
+    return result;
+  }, [queryClient, queryKey, resource]);
+
+  return {
+    initializedPaymentMethod: query.data ?? undefined,
+    initializePaymentMethod,
+  };
+}
+
+export { useInitializePaymentMethod as __internal_useInitializePaymentMethod };