Revert "feat(shared): Remove SWR (#7455)"

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.90.16",
+    "@tanstack/query-core": "5.87.4",
     "@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,6 +2,7 @@
 // @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';
@@ -86,6 +87,7 @@ const unboundCreateFixtures = (
 
     const MockClerkProvider = (props: any) => {
       const { children } = props;
+      const [swrConfig] = useState(() => ({ provider: () => new Map() }));
 
       const componentsWithoutContext = [
         'UsernameSection',
@@ -106,7 +108,11 @@ const unboundCreateFixtures = (
       );
 
       return (
-        <CoreClerkContextWrapper clerk={clerkMock}>
+        <CoreClerkContextWrapper
+          clerk={clerkMock}
+          // Clear swr cache
+          swrConfig={swrConfig}
+        >
           <EnvironmentProvider value={environmentMock}>
             <OptionsProvider value={optionsMock}>
               <RouteContext.Provider value={routerMock}>

packages/shared/global.d.ts

@@ -4,6 +4,7 @@ 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"
+    "std-env": "^3.9.0",
+    "swr": "2.3.4"
   },
   "devDependencies": {
     "@base-org/account": "catalog:module-manager",
@@ -138,6 +138,7 @@
     "@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.rq.tsx

@@ -0,0 +1,76 @@
+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/useInitializePaymentMethod.swr.tsx

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import useSWRMutation from 'swr/mutation';
+
+import type { BillingInitializedPaymentMethodResource, ForPayerType } from '../../types';
+import { useOrganizationContext, useUserContext } from '../contexts';
+
+type InitializePaymentMethodOptions = {
+  for?: ForPayerType;
+};
+
+export type UseInitializePaymentMethodResult = {
+  initializedPaymentMethod: BillingInitializedPaymentMethodResource | undefined;
+  initializePaymentMethod: () => Promise<BillingInitializedPaymentMethodResource | undefined>;
+};
+
+/**
+ * This is the existing implementation of the payment method initializer using SWR.
+ * It is kept here for backwards compatibility until our next major version.
+ *
+ * @internal
+ */
+function useInitializePaymentMethod(options?: InitializePaymentMethodOptions): UseInitializePaymentMethodResult {
+  const { for: forType = 'user' } = options ?? {};
+  const { organization } = useOrganizationContext();
+  const user = useUserContext();
+
+  const resource = forType === 'organization' ? organization : user;
+
+  const { data, trigger } = useSWRMutation(
+    resource?.id
+      ? {
+          key: 'billing-payment-method-initialize',
+          resourceId: resource.id,
+          for: forType,
+        }
+      : null,
+    () => {
+      return resource?.initializePaymentMethod({
+        gateway: 'stripe',
+      });
+    },
+  );
+
+  useEffect(() => {
+    if (!resource?.id) {
+      return;
+    }
+
+    trigger().catch(() => {
+      // ignore errors
+    });
+  }, [resource?.id, trigger]);
+
+  return {
+    initializedPaymentMethod: data,
+    initializePaymentMethod: trigger,
+  };
+}
+
+export { useInitializePaymentMethod as __internal_useInitializePaymentMethod };

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

@@ -1,76 +1,2 @@
-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 };
+export type { UseInitializePaymentMethodResult } from 'virtual:data-hooks/useInitializePaymentMethod';
+export { __internal_useInitializePaymentMethod } from 'virtual:data-hooks/useInitializePaymentMethod';

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

@@ -0,0 +1,37 @@
+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;
+};
+
+/**
+ * @internal
+ */
+function useStripeClerkLibs(): StripeClerkLibs | null {
+  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 };

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

@@ -0,0 +1,39 @@
+import type { loadStripe } from '@stripe/stripe-js';
+
+import { useSWR } from '../clerk-swr';
+import { useClerk } from '../hooks/useClerk';
+
+type LoadStripeFn = typeof loadStripe;
+
+type StripeClerkLibs = {
+  loadStripe: LoadStripeFn;
+};
+
+export type UseStripeClerkLibsResult = StripeClerkLibs | null;
+
+/**
+ * This is the existing implementation of the Stripe libraries loader using SWR.
+ * It is kept here for backwards compatibility until our next major version.
+ *
+ * @internal
+ */
+function useStripeClerkLibs(): UseStripeClerkLibsResult {
+  const clerk = useClerk();
+
+  const swr = useSWR(
+    'clerk-stripe-sdk',
+    async () => {
+      const loadStripe = (await clerk.__internal_loadStripeJs()) as LoadStripeFn;
+      return { loadStripe };
+    },
+    {
+      keepPreviousData: true,
+      revalidateOnFocus: false,
+      dedupingInterval: Infinity,
+    },
+  );
+
+  return swr.data ?? null;
+}
+
+export { useStripeClerkLibs as __internal_useStripeClerkLibs };