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 };

.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 };

.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 };

.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 };

.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 };

.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 };

.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 };

.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 };