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

@@ -64,7 +64,7 @@
     "@coinbase/wallet-sdk": "catalog:module-manager",
     "@stripe/stripe-js": "5.6.0",
     "@swc/helpers": "^0.5.17",
-    "@tanstack/query-core": "5.87.4",
+    "@tanstack/query-core": "5.90.12",
     "@zxcvbn-ts/core": "catalog:module-manager",
     "@zxcvbn-ts/language-common": "catalog:module-manager",
     "alien-signals": "2.0.6",

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,18 +124,17 @@
     "test:coverage": "vitest --collectCoverage && open coverage/lcov-report/index.html"
   },
   "dependencies": {
+    "@tanstack/query-core": "5.90.12",
     "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",
     "@coinbase/wallet-sdk": "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",
     "@zxcvbn-ts/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 };

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

@@ -1,2 +1,39 @@
-export type { UseStripeClerkLibsResult } from 'virtual:data-hooks/useStripeClerkLibs';
-export { __internal_useStripeClerkLibs } from 'virtual:data-hooks/useStripeClerkLibs';
+import type { loadStripe } from '@stripe/stripe-js';
+
+import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
+import { useClerkQuery } from '../clerk-rq/useQuery';
+import { useBillingHookEnabled } from '../hooks/useBillingHookEnabled';
+import { useClerk } from '../hooks/useClerk';
+
+type LoadStripeFn = typeof loadStripe;
+
+type StripeClerkLibs = {
+  loadStripe: LoadStripeFn;
+};
+
+export type UseStripeClerkLibsResult = StripeClerkLibs | null;
+
+/**
+ * @internal
+ */
+function useStripeClerkLibs(): UseStripeClerkLibsResult {
+  const clerk = useClerk();
+
+  const billingEnabled = useBillingHookEnabled();
+
+  const query = useClerkQuery({
+    queryKey: ['clerk-stripe-sdk'],
+    queryFn: async () => {
+      const loadStripe = (await clerk.__internal_loadStripeJs()) as LoadStripeFn;
+      return { loadStripe };
+    },
+    enabled: billingEnabled,
+    staleTime: Infinity,
+    refetchOnWindowFocus: false,
+    placeholderData: defineKeepPreviousDataFn(true),
+  });
+
+  return query.data ?? null;
+}
+
+export { useStripeClerkLibs as __internal_useStripeClerkLibs };