@clerk/shared 4.0.0-canary.v20260108181859 → 4.0.0-canary.v20260108195515

package/dist/runtime/react/index.js

@@ -13,8 +13,13 @@ const require_telemetry = require('../telemetry-CXXDXYfo.js');
 const require_createDeferredPromise = require('../createDeferredPromise-CFgXzt9g.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
-let __tanstack_query_core = require("@tanstack/query-core");
+let swr = require("swr");
+swr = require_chunk.__toESM(swr);
+let swr_infinite = require("swr/infinite");
+swr_infinite = require_chunk.__toESM(swr_infinite);
 let dequal = require("dequal");
+let swr_mutation = require("swr/mutation");
+swr_mutation = require_chunk.__toESM(swr_mutation);
 
 //#region src/react/hooks/createContextAndHook.ts
 /**
@@ -54,6 +59,15 @@ const createContextAndHook = (displayName, options) => {
 	];
 };
 
+//#endregion
+//#region src/react/providers/SWRConfigCompat.swr.tsx
+/**
+* @internal
+*/
+function SWRConfigCompat({ swrConfig, children }) {
+	return /* @__PURE__ */ react.default.createElement(swr.SWRConfig, { value: swrConfig }, children);
+}
+
 //#endregion
 //#region src/react/contexts.tsx
 const [ClerkInstanceContext, useClerkInstanceContext] = createContextAndHook("ClerkInstanceContext");
@@ -74,8 +88,8 @@ function useOptionsContext() {
 	return context;
 }
 const [OrganizationContextInternal, useOrganizationContext] = createContextAndHook("OrganizationContext");
-const OrganizationProvider = ({ children, organization }) => {
-	return /* @__PURE__ */ react.default.createElement(OrganizationContextInternal.Provider, { value: { value: { organization } } }, children);
+const OrganizationProvider = ({ children, organization, swrConfig }) => {
+	return /* @__PURE__ */ react.default.createElement(SWRConfigCompat, { swrConfig }, /* @__PURE__ */ react.default.createElement(OrganizationContextInternal.Provider, { value: { value: { organization } } }, children));
 };
 /**
 * @internal
@@ -161,123 +175,83 @@ function createCacheKeys(params) {
 		authenticated: params.authenticated
 	};
 }
-
-//#endregion
-//#region src/react/clerk-rq/keep-previous-data.ts
 /**
 * @internal
 */
-function defineKeepPreviousDataFn(enabled) {
-	if (enabled) return function KeepPreviousDataFn(previousData) {
-		return previousData;
+function toSWRQuery(keys) {
+	const { queryKey } = keys;
+	return {
+		type: queryKey[0],
+		...queryKey[2],
+		...queryKey[3].args
 	};
 }
 
 //#endregion
-//#region src/react/clerk-rq/use-clerk-query-client.ts
-/**
-* Creates a recursively self-referential Proxy that safely handles:
-* - Arbitrary property access (e.g., obj.any.prop.path)
-* - Function calls at any level (e.g., obj.a().b.c())
-* - Construction (e.g., new obj.a.b())
-*
-* Always returns itself to allow infinite chaining without throwing.
-*/
-function createRecursiveProxy(label) {
-	const callableTarget = function noop$1() {};
-	let self;
-	self = new Proxy(callableTarget, {
-		get(_target, prop) {
-			if (prop === "then") return;
-			if (prop === "toString") return () => `[${label}]`;
-			if (prop === Symbol.toPrimitive) return () => 0;
-			return self;
-		},
-		apply() {
-			return self;
-		},
-		construct() {
-			return self;
-		},
-		has() {
-			return false;
-		},
-		set() {
-			return false;
-		}
-	});
-	return self;
-}
-const mockQueryClient = createRecursiveProxy("ClerkMockQueryClient");
-const useClerkQueryClient = () => {
-	const clerk = useClerkInstanceContext();
-	const queryClient = clerk.__internal_queryClient;
-	const [, setQueryClientLoaded] = (0, react.useState)(typeof queryClient === "object" && "__tag" in queryClient && queryClient.__tag === "clerk-rq-client");
-	(0, react.useEffect)(() => {
-		const _setQueryClientLoaded = () => setQueryClientLoaded(true);
-		clerk.on("queryClientStatus", _setQueryClientLoaded);
-		return () => {
-			clerk.off("queryClientStatus", _setQueryClientLoaded);
-		};
-	}, [clerk, setQueryClientLoaded]);
-	const isLoaded = typeof queryClient === "object" && "__tag" in queryClient && queryClient.__tag === "clerk-rq-client";
-	return [queryClient?.client || mockQueryClient, isLoaded];
-};
-
-//#endregion
-//#region src/react/clerk-rq/useBaseQuery.ts
-/**
-* Stripped down version of useBaseQuery from @tanstack/query-core.
-* This implementation allows for an observer to be created every time a query client changes.
-*/
+//#region src/react/hooks/usePagesOrInfinite.shared.ts
 /**
-* An alternative `useBaseQuery` implementation that allows for an observer to be created every time a query client changes.
+* A hook that safely merges user-provided pagination options with default values.
+* It caches initial pagination values (page and size) until component unmount to prevent unwanted rerenders.
 *
 * @internal
+*
+* @example
+* ```typescript
+* // Example 1: With user-provided options
+* const userOptions = { initialPage: 2, pageSize: 20, infinite: true };
+* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
+* useWithSafeValues(userOptions, defaults);
+* // Returns { initialPage: 2, pageSize: 20, infinite: true }
+*
+* // Example 2: With boolean true (use defaults)
+* const params = true;
+* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
+* useWithSafeValues(params, defaults);
+* // Returns { initialPage: 1, pageSize: 10, infinite: false }
+*
+* // Example 3: With undefined options (fallback to defaults)
+* const params = undefined;
+* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
+* useWithSafeValues(params, defaults);
+* // Returns { initialPage: 1, pageSize: 10, infinite: false }
+* ```
 */
-function useBaseQuery(options, Observer) {
-	const [client, isQueryClientLoaded] = useClerkQueryClient();
-	const defaultedOptions = isQueryClientLoaded ? client.defaultQueryOptions(options) : options;
-	defaultedOptions._optimisticResults = "optimistic";
-	const observer = react.useMemo(() => {
-		return new Observer(client, defaultedOptions);
-	}, [client]);
-	const result = observer.getOptimisticResult(defaultedOptions);
-	const shouldSubscribe = options.subscribed !== false;
-	react.useSyncExternalStore(react.useCallback((onStoreChange) => {
-		const unsubscribe = shouldSubscribe ? observer.subscribe(__tanstack_query_core.notifyManager.batchCalls(onStoreChange)) : __tanstack_query_core.noop;
-		observer.updateResult();
-		return unsubscribe;
-	}, [observer, shouldSubscribe]), () => observer.getCurrentResult(), () => observer.getCurrentResult());
-	react.useEffect(() => {
-		observer.setOptions(defaultedOptions);
-	}, [defaultedOptions, observer]);
-	if (!isQueryClientLoaded) return {
-		data: void 0,
-		error: null,
-		isLoading: false,
-		isFetching: false,
-		status: "pending"
+const useWithSafeValues = (params, defaultValues) => {
+	const shouldUseDefaults = typeof params === "boolean" && params;
+	const initialPageRef = (0, react.useRef)(shouldUseDefaults ? defaultValues.initialPage : params?.initialPage ?? defaultValues.initialPage);
+	const pageSizeRef = (0, react.useRef)(shouldUseDefaults ? defaultValues.pageSize : params?.pageSize ?? defaultValues.pageSize);
+	const newObj = {};
+	for (const key of Object.keys(defaultValues)) newObj[key] = shouldUseDefaults ? defaultValues[key] : params?.[key] ?? defaultValues[key];
+	return {
+		...newObj,
+		initialPage: initialPageRef.current,
+		pageSize: pageSizeRef.current
 	};
-	return !defaultedOptions.notifyOnChangeProps ? observer.trackResult(result) : result;
-}
-
-//#endregion
-//#region src/react/clerk-rq/useInfiniteQuery.ts
+};
 /**
+* Returns an object containing only the keys from the first object that are not present in the second object.
+* Useful for extracting unique parameters that should be passed to a request while excluding common cache keys.
 *
-*/
-function useClerkInfiniteQuery(options) {
-	return useBaseQuery(options, __tanstack_query_core.InfiniteQueryObserver);
-}
-
-//#endregion
-//#region src/react/clerk-rq/useQuery.ts
-/**
+* @internal
 *
+* @example
+* ```typescript
+* // Example 1: Basic usage
+* const obj1 = { name: 'John', age: 30, city: 'NY' };
+* const obj2 = { name: 'John', age: 30 };
+* getDifferentKeys(obj1, obj2); // Returns { city: 'NY' }
+*
+* // Example 2: With cache keys
+* const requestParams = { page: 1, limit: 10, userId: '123' };
+* const cacheKeys = { userId: '123' };
+* getDifferentKeys(requestParams, cacheKeys); // Returns { page: 1, limit: 10 }
+* ```
 */
-function useClerkQuery(options) {
-	return useBaseQuery(options, __tanstack_query_core.QueryObserver);
+function getDifferentKeys(obj1, obj2) {
+	const keysSet = new Set(Object.keys(obj2));
+	const differentKeysObject = {};
+	for (const key1 of Object.keys(obj1)) if (!keysSet.has(key1)) differentKeysObject[key1] = obj1[key1];
+	return differentKeysObject;
 }
 
 //#endregion
@@ -308,249 +282,114 @@ function usePreviousValue(value) {
 }
 
 //#endregion
-//#region src/react/hooks/useClearQueriesOnSignOut.ts
-const withInfiniteKey = (key) => [key, `${key}-inf`];
-/**
-* Clears React Query caches associated with the given stable prefixes when
-* the authenticated state transitions from signed-in to signed-out.
-*
-* @internal
-*/
-function useClearQueriesOnSignOut(options) {
-	const { isSignedOut, stableKeys, authenticated = true, onCleanup } = options;
-	const stableKeysRef = (0, react.useRef)(stableKeys);
-	const [queryClient] = useClerkQueryClient();
-	const previousIsSignedIn = usePreviousValue(!isSignedOut);
-	if (authenticated !== true) return;
-	(0, react.useEffect)(() => {
-		if (previousIsSignedIn && isSignedOut === true) {
-			queryClient.removeQueries({ predicate: (query) => {
-				const [cachedStableKey, queryAuthenticated] = query.queryKey;
-				return queryAuthenticated === true && typeof cachedStableKey === "string" && (Array.isArray(stableKeysRef.current) ? stableKeysRef.current.includes(cachedStableKey) : stableKeysRef.current === cachedStableKey);
-			} });
-			onCleanup?.();
-		}
-	}, [
-		isSignedOut,
-		previousIsSignedIn,
-		queryClient
-	]);
-}
-
-//#endregion
-//#region src/react/hooks/usePagesOrInfinite.shared.ts
+//#region src/react/hooks/usePagesOrInfinite.swr.tsx
+const cachingSWROptions = {
+	dedupingInterval: 1e3 * 60,
+	focusThrottleInterval: 1e3 * 60 * 2
+};
+const cachingSWRInfiniteOptions = {
+	...cachingSWROptions,
+	revalidateFirstPage: false
+};
 /**
-* A hook that safely merges user-provided pagination options with default values.
-* It caches initial pagination values (page and size) until component unmount to prevent unwanted rerenders.
+* A flexible pagination hook that supports both traditional pagination and infinite loading.
+* It provides a unified API for handling paginated data fetching, with built-in caching through SWR.
+* The hook can operate in two modes:
+* - Traditional pagination: Fetches one page at a time with page navigation
+* - Infinite loading: Accumulates data as more pages are loaded.
+*
+* Features:
+* - Cache management with SWR
+* - Loading and error states
+* - Page navigation helpers
+* - Data revalidation and updates
+* - Support for keeping previous data while loading.
 *
 * @internal
-*
-* @example
-* ```typescript
-* // Example 1: With user-provided options
-* const userOptions = { initialPage: 2, pageSize: 20, infinite: true };
-* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
-* useWithSafeValues(userOptions, defaults);
-* // Returns { initialPage: 2, pageSize: 20, infinite: true }
-*
-* // Example 2: With boolean true (use defaults)
-* const params = true;
-* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
-* useWithSafeValues(params, defaults);
-* // Returns { initialPage: 1, pageSize: 10, infinite: false }
-*
-* // Example 3: With undefined options (fallback to defaults)
-* const params = undefined;
-* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
-* useWithSafeValues(params, defaults);
-* // Returns { initialPage: 1, pageSize: 10, infinite: false }
-* ```
 */
-const useWithSafeValues = (params, defaultValues) => {
-	const shouldUseDefaults = typeof params === "boolean" && params;
-	const initialPageRef = (0, react.useRef)(shouldUseDefaults ? defaultValues.initialPage : params?.initialPage ?? defaultValues.initialPage);
-	const pageSizeRef = (0, react.useRef)(shouldUseDefaults ? defaultValues.pageSize : params?.pageSize ?? defaultValues.pageSize);
-	const newObj = {};
-	for (const key of Object.keys(defaultValues)) newObj[key] = shouldUseDefaults ? defaultValues[key] : params?.[key] ?? defaultValues[key];
-	return {
-		...newObj,
-		initialPage: initialPageRef.current,
-		pageSize: pageSizeRef.current
-	};
-};
-
-//#endregion
-//#region src/react/hooks/usePagesOrInfinite.tsx
 const usePagesOrInfinite = (params) => {
 	const { fetcher, config, keys } = params;
 	const [paginatedPage, setPaginatedPage] = (0, react.useState)(config.initialPage ?? 1);
 	const initialPageRef = (0, react.useRef)(config.initialPage ?? 1);
 	const pageSizeRef = (0, react.useRef)(config.pageSize ?? 10);
 	const enabled = config.enabled ?? true;
-	const isSignedIn = config.isSignedIn;
-	const triggerInfinite = config.infinite ?? false;
 	const cacheMode = config.__experimental_mode === "cache";
+	const triggerInfinite = config.infinite ?? false;
 	const keepPreviousData = config.keepPreviousData ?? false;
-	const [queryClient] = useClerkQueryClient();
-	const queriesEnabled = enabled && Boolean(fetcher) && !cacheMode && isSignedIn !== false;
-	const [forceUpdateCounter, setForceUpdateCounter] = (0, react.useState)(0);
-	const forceUpdate = (0, react.useCallback)((updater) => {
-		setForceUpdateCounter(updater);
-	}, []);
-	const pagesQueryKey = (0, react.useMemo)(() => {
-		const [stablePrefix, authenticated, tracked, untracked] = keys.queryKey;
-		return [
-			stablePrefix,
-			authenticated,
-			tracked,
-			{
-				...untracked,
-				args: {
-					...untracked.args,
-					initialPage: paginatedPage,
-					pageSize: pageSizeRef.current
-				}
-			}
-		];
-	}, [keys.queryKey, paginatedPage]);
-	const singlePageQuery = useClerkQuery({
-		queryKey: pagesQueryKey,
-		queryFn: ({ queryKey }) => {
-			const { args } = queryKey[3];
-			if (!fetcher) return;
-			return fetcher(args);
-		},
-		staleTime: 6e4,
-		enabled: queriesEnabled && !triggerInfinite,
-		placeholderData: defineKeepPreviousDataFn(keepPreviousData)
-	});
-	const infiniteQueryKey = (0, react.useMemo)(() => {
-		const [stablePrefix, authenticated, tracked, untracked] = keys.queryKey;
-		return [
-			stablePrefix + "-inf",
-			authenticated,
-			tracked,
-			untracked
-		];
-	}, [keys.queryKey]);
-	const infiniteQuery = useClerkInfiniteQuery({
-		queryKey: infiniteQueryKey,
-		initialPageParam: config.initialPage ?? 1,
-		getNextPageParam: (lastPage, allPages, lastPageParam) => {
-			const total = lastPage?.total_count ?? 0;
-			return (allPages.length + (config.initialPage ? config.initialPage - 1 : 0)) * (config.pageSize ?? 10) < total ? lastPageParam + 1 : void 0;
-		},
-		queryFn: ({ pageParam, queryKey }) => {
-			const { args } = queryKey[3];
-			if (!fetcher) return;
-			return fetcher({
-				...args,
-				initialPage: pageParam,
-				pageSize: pageSizeRef.current
-			});
-		},
-		staleTime: 6e4,
-		enabled: queriesEnabled && triggerInfinite
-	});
-	useClearQueriesOnSignOut({
-		isSignedOut: isSignedIn === false,
-		authenticated: keys.authenticated,
-		stableKeys: withInfiniteKey(keys.stableKey),
-		onCleanup: () => {
-			setPaginatedPage(initialPageRef.current);
-			Promise.resolve().then(() => forceUpdate((n) => n + 1));
-		}
+	const isSignedIn = config.isSignedIn;
+	const pagesCacheKey = {
+		...toSWRQuery(keys),
+		initialPage: paginatedPage,
+		pageSize: pageSizeRef.current
+	};
+	const previousIsSignedIn = usePreviousValue(isSignedIn);
+	const shouldFetch = !triggerInfinite && enabled && (!cacheMode ? !!fetcher : true);
+	const { data: swrData, isValidating: swrIsValidating, isLoading: swrIsLoading, error: swrError, mutate: swrMutate } = (0, swr.default)(typeof isSignedIn === "boolean" ? previousIsSignedIn === true && isSignedIn === false ? pagesCacheKey : isSignedIn ? shouldFetch ? pagesCacheKey : null : null : shouldFetch ? pagesCacheKey : null, !cacheMode && !!fetcher ? (cacheKeyParams) => {
+		if (isSignedIn === false || shouldFetch === false) return null;
+		return fetcher(getDifferentKeys(cacheKeyParams, {
+			type: keys.queryKey[0],
+			...keys.queryKey[2]
+		}));
+	} : null, {
+		keepPreviousData,
+		...cachingSWROptions
 	});
-	const { data, count, page } = (0, react.useMemo)(() => {
-		if (triggerInfinite) {
-			const cachedData = queryClient.getQueryData(infiniteQueryKey);
-			const pages = queriesEnabled ? infiniteQuery.data?.pages ?? cachedData?.pages ?? [] : cachedData?.pages ?? [];
-			const validPages = Array.isArray(pages) ? pages.filter(Boolean) : [];
-			return {
-				data: validPages.map((a) => a?.data).flat().filter(Boolean) ?? [],
-				count: validPages[validPages.length - 1]?.total_count ?? 0,
-				page: validPages.length > 0 ? validPages.length : initialPageRef.current
-			};
-		}
-		const pageData = queriesEnabled ? singlePageQuery.data ?? queryClient.getQueryData(pagesQueryKey) : queryClient.getQueryData(pagesQueryKey);
+	const { data: swrInfiniteData, isLoading: swrInfiniteIsLoading, isValidating: swrInfiniteIsValidating, error: swrInfiniteError, size, setSize, mutate: swrInfiniteMutate } = (0, swr_infinite.default)((pageIndex) => {
+		if (!triggerInfinite || !enabled || isSignedIn === false) return null;
 		return {
-			data: Array.isArray(pageData?.data) ? pageData.data : [],
-			count: typeof pageData?.total_count === "number" ? pageData.total_count : 0,
-			page: paginatedPage
+			...toSWRQuery(keys),
+			initialPage: initialPageRef.current + pageIndex,
+			pageSize: pageSizeRef.current
 		};
+	}, (cacheKeyParams) => {
+		const requestParams = getDifferentKeys(cacheKeyParams, {
+			type: keys.queryKey[0],
+			...keys.queryKey[2]
+		});
+		return fetcher?.(requestParams);
+	}, cachingSWRInfiniteOptions);
+	const page = (0, react.useMemo)(() => {
+		if (triggerInfinite) return size;
+		return paginatedPage;
 	}, [
-		queriesEnabled,
-		forceUpdateCounter,
 		triggerInfinite,
-		infiniteQuery.data?.pages,
-		singlePageQuery.data,
-		queryClient,
-		infiniteQueryKey,
-		pagesQueryKey,
+		size,
 		paginatedPage
 	]);
 	const fetchPage = (0, react.useCallback)((numberOrgFn) => {
 		if (triggerInfinite) {
-			const next = typeof numberOrgFn === "function" ? numberOrgFn(page) : numberOrgFn;
-			const targetCount = Math.max(0, next);
-			const cachedData = queryClient.getQueryData(infiniteQueryKey);
-			if (targetCount - (infiniteQuery.data?.pages ?? cachedData?.pages ?? []).length > 0) infiniteQuery.fetchNextPage({ cancelRefetch: false });
+			setSize(numberOrgFn);
 			return;
 		}
 		return setPaginatedPage(numberOrgFn);
+	}, [setSize, triggerInfinite]);
+	const data = (0, react.useMemo)(() => {
+		if (triggerInfinite) return swrInfiniteData?.map((a) => a?.data).flat() ?? [];
+		return swrData?.data ?? [];
+	}, [
+		triggerInfinite,
+		swrData,
+		swrInfiniteData
+	]);
+	const count = (0, react.useMemo)(() => {
+		if (triggerInfinite) return swrInfiniteData?.[swrInfiniteData?.length - 1]?.total_count || 0;
+		return swrData?.total_count ?? 0;
 	}, [
-		infiniteQuery,
-		page,
 		triggerInfinite,
-		queryClient,
-		infiniteQueryKey
+		swrData,
+		swrInfiniteData
 	]);
-	const isLoading = triggerInfinite ? infiniteQuery.isLoading : singlePageQuery.isLoading;
-	const isFetching = triggerInfinite ? infiniteQuery.isFetching : singlePageQuery.isFetching;
-	const error = (triggerInfinite ? infiniteQuery.error : singlePageQuery.error) ?? null;
+	const isLoading = triggerInfinite ? swrInfiniteIsLoading : swrIsLoading;
+	const isFetching = triggerInfinite ? swrInfiniteIsValidating : swrIsValidating;
+	const error = (triggerInfinite ? swrInfiniteError : swrError) ?? null;
 	const isError = !!error;
 	const fetchNext = (0, react.useCallback)(() => {
-		if (triggerInfinite) {
-			infiniteQuery.fetchNextPage({ cancelRefetch: false });
-			return;
-		}
-		setPaginatedPage((n) => Math.max(0, n + 1));
-	}, [infiniteQuery, triggerInfinite]);
+		fetchPage((n) => Math.max(0, n + 1));
+	}, [fetchPage]);
 	const fetchPrevious = (0, react.useCallback)(() => {
-		if (triggerInfinite) return;
-		setPaginatedPage((n) => Math.max(0, n - 1));
-	}, [triggerInfinite]);
+		fetchPage((n) => Math.max(0, n - 1));
+	}, [fetchPage]);
 	const offsetCount = (initialPageRef.current - 1) * pageSizeRef.current;
-	const pageCount = Math.ceil((count - offsetCount) / pageSizeRef.current);
-	const hasNextPage = triggerInfinite ? Boolean(infiniteQuery.hasNextPage) : count - offsetCount * pageSizeRef.current > page * pageSizeRef.current;
-	const hasPreviousPage = triggerInfinite ? Boolean(infiniteQuery.hasPreviousPage) : (page - 1) * pageSizeRef.current > offsetCount * pageSizeRef.current;
-	const setData = (value) => {
-		if (triggerInfinite) {
-			queryClient.setQueryData(infiniteQueryKey, (prevValue = {}) => {
-				const prevPages = Array.isArray(prevValue?.pages) ? prevValue.pages : [];
-				const nextPages = typeof value === "function" ? value(prevPages) : value;
-				return {
-					...prevValue,
-					pages: nextPages
-				};
-			});
-			forceUpdate((n) => n + 1);
-			return Promise.resolve();
-		}
-		queryClient.setQueryData(pagesQueryKey, (prevValue = {
-			data: [],
-			total_count: 0
-		}) => {
-			return typeof value === "function" ? value(prevValue) : value;
-		});
-		forceUpdate((n) => n + 1);
-		return Promise.resolve();
-	};
-	const revalidate = async () => {
-		await queryClient.invalidateQueries({ queryKey: keys.invalidationKey });
-		const [stablePrefix, ...rest] = keys.invalidationKey;
-		return queryClient.invalidateQueries({ queryKey: [stablePrefix + "-inf", ...rest] });
-	};
 	return {
 		data,
 		count,
@@ -559,19 +398,19 @@ const usePagesOrInfinite = (params) => {
 		isFetching,
 		isError,
 		page,
-		pageCount,
+		pageCount: Math.ceil((count - offsetCount) / pageSizeRef.current),
 		fetchPage,
 		fetchNext,
 		fetchPrevious,
-		hasNextPage,
-		hasPreviousPage,
-		revalidate,
-		setData
+		hasNextPage: count - offsetCount * pageSizeRef.current > page * pageSizeRef.current,
+		hasPreviousPage: (page - 1) * pageSizeRef.current > offsetCount * pageSizeRef.current,
+		revalidate: triggerInfinite ? () => swrInfiniteMutate() : () => swrMutate(),
+		setData: triggerInfinite ? (value) => swrInfiniteMutate(value, { revalidate: false }) : (value) => swrMutate(value, { revalidate: false })
 	};
 };
 
 //#endregion
-//#region src/react/hooks/useAPIKeys.tsx
+//#region src/react/hooks/useAPIKeys.swr.tsx
 /**
 * @internal
 *
@@ -632,7 +471,7 @@ function useAPIKeys(params) {
 		...safeValues.query ? { query: safeValues.query } : {}
 	};
 	const isEnabled = (safeValues.enabled ?? true) && clerk.loaded;
-	return usePagesOrInfinite({
+	const result = usePagesOrInfinite({
 		fetcher: clerk.apiKeys?.getAll ? (params$1) => clerk.apiKeys.getAll({
 			...params$1,
 			subject: safeValues.subject
@@ -652,6 +491,17 @@ function useAPIKeys(params) {
 			untracked: { args: hookParams }
 		})
 	});
+	const { mutate } = (0, swr.useSWRConfig)();
+	const invalidateAll = (0, react.useCallback)(() => {
+		return mutate((key) => {
+			if (!key || typeof key !== "object") return false;
+			return "type" in key && key.type === "apiKeys" && "subject" in key && key.subject === safeValues.subject;
+		});
+	}, [mutate, safeValues.subject]);
+	return {
+		...result,
+		revalidate: invalidateAll
+	};
 }
 
 //#endregion
@@ -1292,7 +1142,7 @@ const useSafeLayoutEffect = typeof window !== "undefined" ? react.default.useLay
 
 //#endregion
 //#region src/react/hooks/useSession.ts
-const hookName$2 = `useSession`;
+const hookName$3 = `useSession`;
 /**
 * The `useSession()` hook provides access to the current user's [`Session`](https://clerk.com/docs/reference/javascript/session) object, as well as helpers for setting the active session.
 *
@@ -1342,10 +1192,10 @@ const hookName$2 = `useSession`;
 * </Tabs>
 */
 const useSession = () => {
-	useAssertWrappedByClerkProvider(hookName$2);
+	useAssertWrappedByClerkProvider(hookName$3);
 	const session = useSessionContext();
 	const clerk = useClerkInstanceContext();
-	clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName$2));
+	clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName$3));
 	if (session === void 0) return {
 		isLoaded: false,
 		isSignedIn: void 0,
@@ -1365,7 +1215,7 @@ const useSession = () => {
 
 //#endregion
 //#region src/react/hooks/useSessionList.ts
-const hookName$1 = "useSessionList";
+const hookName$2 = "useSessionList";
 /**
 * The `useSessionList()` hook returns an array of [`Session`](https://clerk.com/docs/reference/javascript/session) objects that have been registered on the client device.
 *
@@ -1410,10 +1260,10 @@ const hookName$1 = "useSessionList";
 * </Tabs>
 */
 const useSessionList = () => {
-	useAssertWrappedByClerkProvider(hookName$1);
+	useAssertWrappedByClerkProvider(hookName$2);
 	const isomorphicClerk = useClerkInstanceContext();
 	const client = useClientContext();
-	useClerkInstanceContext().telemetry?.record(require_telemetry.eventMethodCalled(hookName$1));
+	useClerkInstanceContext().telemetry?.record(require_telemetry.eventMethodCalled(hookName$2));
 	if (!client) return {
 		isLoaded: false,
 		sessions: void 0,
@@ -1428,7 +1278,7 @@ const useSessionList = () => {
 
 //#endregion
 //#region src/react/hooks/useUser.ts
-const hookName = "useUser";
+const hookName$1 = "useUser";
 /**
 * The `useUser()` hook provides access to the current user's [`User`](https://clerk.com/docs/reference/javascript/user) object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.
 *
@@ -1560,9 +1410,9 @@ const hookName = "useUser";
 * </Tabs>
 */
 function useUser() {
-	useAssertWrappedByClerkProvider(hookName);
+	useAssertWrappedByClerkProvider(hookName$1);
 	const user = useUserContext();
-	useClerkInstanceContext().telemetry?.record(require_telemetry.eventMethodCalled(hookName));
+	useClerkInstanceContext().telemetry?.record(require_telemetry.eventMethodCalled(hookName$1));
 	if (user === void 0) return {
 		isLoaded: false,
 		isSignedIn: void 0,
@@ -1765,11 +1615,11 @@ function useBillingHookEnabled(params) {
 *
 * @internal
 */
-function createBillingPaginatedHook({ hookName: hookName$3, resourceType, useFetcher, options }) {
+function createBillingPaginatedHook({ hookName: hookName$4, resourceType, useFetcher, options }) {
 	return function useBillingHook(params) {
 		const { for: _for, enabled: externalEnabled,...paginationParams } = params || {};
 		const safeFor = _for || "user";
-		useAssertWrappedByClerkProvider(hookName$3);
+		useAssertWrappedByClerkProvider(hookName$4);
 		const fetchFn = useFetcher(safeFor);
 		const safeValues = useWithSafeValues(paginationParams, {
 			initialPage: 1,
@@ -1781,7 +1631,7 @@ function createBillingPaginatedHook({ hookName: hookName$3, resourceType, useFet
 		const clerk = useClerkInstanceContext();
 		const user = useUserContext();
 		const { organization } = useOrganizationContext();
-		clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName$3));
+		clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName$4));
 		const isForOrganization = safeFor === "organization";
 		const billingEnabled = useBillingHookEnabled({
 			for: safeFor,
@@ -1810,7 +1660,7 @@ function createBillingPaginatedHook({ hookName: hookName$3, resourceType, useFet
 				authenticated: !options?.unauthenticated,
 				tracked: options?.unauthenticated ? { for: safeFor } : {
 					userId: user?.id,
-					...isForOrganization ? { orgId: organization?.id } : {}
+					...isForOrganization ? { ["_orgId"]: organization?.id } : {}
 				},
 				untracked: { args: hookParams }
 			})
@@ -1904,53 +1754,44 @@ function useSubscriptionCacheKeys(params) {
 }
 
 //#endregion
-//#region src/react/hooks/useSubscription.tsx
-const HOOK_NAME = "useSubscription";
+//#region src/react/hooks/useSubscription.swr.tsx
+const hookName = "useSubscription";
 /**
+* This is the existing implementation of useSubscription using SWR.
+* It is kept here for backwards compatibility until our next major version.
+*
 * @internal
 */
 function useSubscription(params) {
-	useAssertWrappedByClerkProvider(HOOK_NAME);
+	useAssertWrappedByClerkProvider(hookName);
 	const clerk = useClerkInstanceContext();
 	const user = useUserContext();
 	const { organization } = useOrganizationContext();
-	const billingEnabled = useBillingHookEnabled(params);
-	const recordedRef = (0, react.useRef)(false);
-	(0, react.useEffect)(() => {
-		if (!recordedRef.current && clerk?.telemetry) {
-			clerk.telemetry.record(require_telemetry.eventMethodCalled(HOOK_NAME));
-			recordedRef.current = true;
-		}
-	}, [clerk]);
-	const keepPreviousData = params?.keepPreviousData ?? false;
-	const [queryClient] = useClerkQueryClient();
-	const { queryKey, invalidationKey, stableKey, authenticated } = useSubscriptionCacheKeys({
+	const environment = clerk.__internal_environment;
+	clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName));
+	const billingEnabled = params?.for === "organization" ? environment?.commerceSettings.billing.organization.enabled : environment?.commerceSettings.billing.user.enabled;
+	const isEnabled = (params?.enabled ?? true) && billingEnabled;
+	const { queryKey } = useSubscriptionCacheKeys({
 		userId: user?.id,
 		orgId: organization?.id,
 		for: params?.for
 	});
-	const queriesEnabled = Boolean(user?.id && billingEnabled);
-	useClearQueriesOnSignOut({
-		isSignedOut: user === null,
-		authenticated,
-		stableKeys: stableKey
-	});
-	const query = useClerkQuery({
-		queryKey,
-		queryFn: ({ queryKey: queryKey$1 }) => {
-			const obj = queryKey$1[3];
-			return clerk.billing.getSubscription(obj.args);
-		},
-		staleTime: 1e3 * 60,
-		enabled: queriesEnabled,
-		placeholderData: defineKeepPreviousDataFn(keepPreviousData && queriesEnabled)
+	const swr$1 = (0, swr.default)(isEnabled ? { queryKey } : null, ({ queryKey: queryKey$1 }) => {
+		const args = queryKey$1[3].args;
+		if (queryKey$1[2].userId) return clerk.billing.getSubscription(args);
+		return null;
+	}, {
+		dedupingInterval: 1e3 * 60,
+		keepPreviousData: params?.keepPreviousData
 	});
-	const revalidate = (0, react.useCallback)(() => queryClient.invalidateQueries({ queryKey: invalidationKey }), [queryClient, invalidationKey]);
+	const revalidate = (0, react.useCallback)(() => {
+		swr$1.mutate();
+	}, [swr$1]);
 	return {
-		data: query.data,
-		error: query.error ?? void 0,
-		isLoading: query.isLoading,
-		isFetching: query.isFetching,
+		data: swr$1.data,
+		error: swr$1.error,
+		isLoading: swr$1.isLoading,
+		isFetching: swr$1.isValidating,
 		revalidate
 	};
 }
@@ -2030,47 +1871,40 @@ function useStatementQueryCacheKeys(params) {
 }
 
 //#endregion
-//#region src/react/hooks/useStatementQuery.tsx
+//#region src/react/hooks/useStatementQuery.swr.tsx
 /**
+* This is the existing implementation of useStatementQuery using SWR.
+* It is kept here for backwards compatibility until our next major version.
+*
 * @internal
 */
-function useStatementQuery(params = {}) {
-	const { statementId = null, keepPreviousData = false, for: forType = "user" } = params;
+function __internal_useStatementQuery(params = {}) {
+	const { statementId = null, enabled = true, keepPreviousData = false, for: forType = "user" } = params;
 	const clerk = useClerkInstanceContext();
 	const user = useUserContext();
 	const { organization } = useOrganizationContext();
 	const organizationId = forType === "organization" ? organization?.id ?? null : null;
-	const { queryKey, stableKey, authenticated } = useStatementQueryCacheKeys({
+	const { queryKey } = useStatementQueryCacheKeys({
 		statementId,
 		userId: user?.id ?? null,
 		orgId: organizationId,
 		for: forType
 	});
-	const billingEnabled = useBillingHookEnabled(params);
-	const queryEnabled = Boolean(statementId) && billingEnabled;
-	useClearQueriesOnSignOut({
-		isSignedOut: user === null,
-		authenticated,
-		stableKeys: stableKey
-	});
-	const query = useClerkQuery({
-		queryKey,
-		queryFn: () => {
-			if (!statementId) throw new Error("statementId is required to fetch a statement");
-			return clerk.billing.getStatement({
-				id: statementId,
-				orgId: organizationId ?? void 0
-			});
-		},
-		enabled: queryEnabled,
-		placeholderData: defineKeepPreviousDataFn(keepPreviousData),
-		staleTime: 1e3 * 60
+	const swr$1 = (0, swr.default)(Boolean(statementId) && enabled && (forType !== "organization" || Boolean(organizationId)) ? queryKey : null, () => {
+		if (!statementId) throw new Error("statementId is required to fetch a statement");
+		return clerk.billing.getStatement({
+			id: statementId,
+			orgId: organizationId ?? void 0
+		});
+	}, {
+		dedupingInterval: 1e3 * 60,
+		keepPreviousData
 	});
 	return {
-		data: query.data,
-		error: query.error ?? null,
-		isLoading: query.isLoading,
-		isFetching: query.isFetching
+		data: swr$1.data,
+		error: swr$1.error ?? null,
+		isLoading: swr$1.isLoading,
+		isFetching: swr$1.isValidating
 	};
 }
 
@@ -2089,32 +1923,31 @@ function usePlanDetailsQueryCacheKeys(params) {
 }
 
 //#endregion
-//#region src/react/hooks/usePlanDetailsQuery.tsx
+//#region src/react/hooks/usePlanDetailsQuery.swr.tsx
 /**
+* This is the existing implementation of usePlanDetailsQuery using SWR.
+* It is kept here for backwards compatibility until our next major version.
+*
 * @internal
 */
-function __internal_usePlanDetailsQuery(params = {}) {
-	const { planId, initialPlan = null, keepPreviousData = true } = params;
+function usePlanDetailsQuery(params = {}) {
+	const { planId, initialPlan = null, enabled = true, keepPreviousData = true } = params;
 	const clerk = useClerkInstanceContext();
 	const targetPlanId = planId ?? initialPlan?.id ?? null;
 	const { queryKey } = usePlanDetailsQueryCacheKeys({ planId: targetPlanId });
-	const billingEnabled = useBillingHookEnabled({ authenticated: false });
-	const query = useClerkQuery({
-		queryKey,
-		queryFn: () => {
-			if (!targetPlanId) throw new Error("planId is required to fetch plan details");
-			return clerk.billing.getPlan({ id: targetPlanId });
-		},
-		enabled: Boolean(targetPlanId) && billingEnabled,
-		initialData: initialPlan ?? void 0,
-		placeholderData: defineKeepPreviousDataFn(keepPreviousData),
-		initialDataUpdatedAt: 0
+	const swr$1 = (0, swr.default)(Boolean(targetPlanId) && enabled ? queryKey : null, () => {
+		if (!targetPlanId) throw new Error("planId is required to fetch plan details");
+		return clerk.billing.getPlan({ id: targetPlanId });
+	}, {
+		dedupingInterval: 1e3 * 60,
+		keepPreviousData,
+		fallbackData: initialPlan ?? void 0
 	});
 	return {
-		data: query.data,
-		error: query.error ?? null,
-		isLoading: query.isLoading,
-		isFetching: query.isFetching
+		data: swr$1.data,
+		error: swr$1.error ?? null,
+		isLoading: swr$1.isLoading,
+		isFetching: swr$1.isValidating
 	};
 }
 
@@ -2146,44 +1979,37 @@ function usePaymentAttemptQueryCacheKeys(params) {
 }
 
 //#endregion
-//#region src/react/hooks/usePaymentAttemptQuery.tsx
+//#region src/react/hooks/usePaymentAttemptQuery.swr.tsx
 /**
+* This is the existing implementation of usePaymentAttemptQuery using SWR.
+* It is kept here for backwards compatibility until our next major version.
+*
 * @internal
 */
-function usePaymentAttemptQuery(params) {
-	const { paymentAttemptId, keepPreviousData = false, for: forType = "user" } = params;
+function __internal_usePaymentAttemptQuery(params) {
+	const { paymentAttemptId, enabled = true, keepPreviousData = false, for: forType = "user" } = params;
 	const clerk = useClerkInstanceContext();
 	const user = useUserContext();
 	const { organization } = useOrganizationContext();
 	const organizationId = forType === "organization" ? organization?.id ?? null : null;
-	const { queryKey, stableKey, authenticated } = usePaymentAttemptQueryCacheKeys({
+	const { queryKey } = usePaymentAttemptQueryCacheKeys({
 		paymentAttemptId,
 		userId: user?.id ?? null,
 		orgId: organizationId,
 		for: forType
 	});
-	const billingEnabled = useBillingHookEnabled(params);
-	const queryEnabled = Boolean(paymentAttemptId) && billingEnabled;
-	useClearQueriesOnSignOut({
-		isSignedOut: user === null,
-		authenticated,
-		stableKeys: stableKey
-	});
-	const query = useClerkQuery({
-		queryKey,
-		queryFn: ({ queryKey: queryKey$1 }) => {
-			const args = queryKey$1[3].args;
-			return clerk.billing.getPaymentAttempt(args);
-		},
-		enabled: queryEnabled,
-		placeholderData: defineKeepPreviousDataFn(keepPreviousData),
-		staleTime: 1e3 * 60
+	const swr$1 = (0, swr.default)(Boolean(paymentAttemptId) && enabled && (forType !== "organization" || Boolean(organizationId)) ? { queryKey } : null, ({ queryKey: queryKey$1 }) => {
+		const args = queryKey$1[3].args;
+		return clerk.billing.getPaymentAttempt(args);
+	}, {
+		dedupingInterval: 1e3 * 60,
+		keepPreviousData
 	});
 	return {
-		data: query.data,
-		error: query.error ?? null,
-		isLoading: query.isLoading,
-		isFetching: query.isFetching
+		data: swr$1.data,
+		error: swr$1.error ?? null,
+		isLoading: swr$1.isLoading,
+		isFetching: swr$1.isValidating
 	};
 }
 
@@ -2437,90 +2263,74 @@ const createElementComponent = (type, isServer) => {
 const PaymentElement$1 = createElementComponent("payment", typeof window === "undefined");
 
 //#endregion
-//#region src/react/billing/useInitializePaymentMethod.tsx
+//#region src/react/billing/useInitializePaymentMethod.swr.tsx
 /**
+* 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) {
-	const { for: forType } = options ?? {};
+	const { for: forType = "user" } = options ?? {};
 	const { organization } = useOrganizationContext();
 	const user = useUserContext();
 	const resource = forType === "organization" ? organization : user;
-	const billingEnabled = useBillingHookEnabled(options);
-	const queryKey = (0, react.useMemo)(() => {
-		return ["billing-payment-method-initialize", { resourceId: resource?.id }];
-	}, [resource?.id]);
-	const query = useClerkQuery({
-		queryKey,
-		queryFn: async () => {
-			if (!resource) return;
-			return resource.initializePaymentMethod({ gateway: "stripe" });
-		},
-		enabled: Boolean(resource?.id) && billingEnabled,
-		staleTime: 1e3 * 60,
-		refetchOnWindowFocus: false,
-		placeholderData: defineKeepPreviousDataFn(true)
+	const { data, trigger } = (0, swr_mutation.default)(resource?.id ? {
+		key: "billing-payment-method-initialize",
+		resourceId: resource.id,
+		for: forType
+	} : null, () => {
+		return resource?.initializePaymentMethod({ gateway: "stripe" });
 	});
-	const [queryClient] = useClerkQueryClient();
-	const initializePaymentMethod = (0, react.useCallback)(async () => {
-		if (!resource) return;
-		const result = await resource.initializePaymentMethod({ gateway: "stripe" });
-		queryClient.setQueryData(queryKey, result);
-		return result;
-	}, [
-		queryClient,
-		queryKey,
-		resource
-	]);
+	(0, react.useEffect)(() => {
+		if (!resource?.id) return;
+		trigger().catch(() => {});
+	}, [resource?.id, trigger]);
 	return {
-		initializedPaymentMethod: query.data ?? void 0,
-		initializePaymentMethod
+		initializedPaymentMethod: data,
+		initializePaymentMethod: trigger
 	};
 }
 
 //#endregion
-//#region src/react/billing/useStripeClerkLibs.tsx
+//#region src/react/billing/useStripeClerkLibs.swr.tsx
 /**
+* 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() {
 	const clerk = useClerk();
-	return useClerkQuery({
-		queryKey: ["clerk-stripe-sdk"],
-		queryFn: async () => {
-			return { loadStripe: await clerk.__internal_loadStripeJs() };
-		},
-		enabled: useBillingHookEnabled(),
-		staleTime: Infinity,
-		refetchOnWindowFocus: false,
-		placeholderData: defineKeepPreviousDataFn(true)
+	return (0, swr.default)("clerk-stripe-sdk", async () => {
+		return { loadStripe: await clerk.__internal_loadStripeJs() };
+	}, {
+		keepPreviousData: true,
+		revalidateOnFocus: false,
+		dedupingInterval: Infinity
 	}).data ?? null;
 }
 
 //#endregion
-//#region src/react/billing/useStripeLoader.tsx
+//#region src/react/billing/useStripeLoader.swr.tsx
 /**
+* This is the existing implementation of the Stripe instance loader using SWR.
+* It is kept here for backwards compatibility until our next major version.
+*
 * @internal
 */
 function useStripeLoader(options) {
 	const { stripeClerkLibs, externalGatewayId, stripePublishableKey } = options;
-	const queryKey = (0, react.useMemo)(() => {
-		return ["stripe-sdk", {
-			externalGatewayId,
-			stripePublishableKey
-		}];
-	}, [externalGatewayId, stripePublishableKey]);
-	const billingEnabled = useBillingHookEnabled({ authenticated: true });
-	return useClerkQuery({
-		queryKey,
-		queryFn: () => {
-			if (!stripeClerkLibs || !externalGatewayId || !stripePublishableKey) return null;
-			return stripeClerkLibs.loadStripe(stripePublishableKey, { stripeAccount: externalGatewayId });
-		},
-		enabled: Boolean(stripeClerkLibs && externalGatewayId && stripePublishableKey) && billingEnabled,
-		staleTime: 1e3 * 60,
-		refetchOnWindowFocus: false,
-		placeholderData: defineKeepPreviousDataFn(true)
+	return (0, swr.default)(stripeClerkLibs && externalGatewayId && stripePublishableKey ? {
+		key: "stripe-sdk",
+		externalGatewayId,
+		stripePublishableKey
+	} : null, ({ stripePublishableKey: stripePublishableKey$1, externalGatewayId: externalGatewayId$1 }) => {
+		return stripeClerkLibs?.loadStripe(stripePublishableKey$1, { stripeAccount: externalGatewayId$1 });
+	}, {
+		keepPreviousData: true,
+		revalidateOnFocus: false,
+		dedupingInterval: 1e3 * 60
 	}).data;
 }
 
@@ -2710,9 +2520,9 @@ exports.__experimental_usePaymentMethods = usePaymentMethods;
 exports.__experimental_usePlans = usePlans;
 exports.__experimental_useStatements = useStatements;
 exports.__experimental_useSubscription = useSubscription;
-exports.__internal_usePaymentAttemptQuery = usePaymentAttemptQuery;
-exports.__internal_usePlanDetailsQuery = __internal_usePlanDetailsQuery;
-exports.__internal_useStatementQuery = useStatementQuery;
+exports.__internal_usePaymentAttemptQuery = __internal_usePaymentAttemptQuery;
+exports.__internal_usePlanDetailsQuery = usePlanDetailsQuery;
+exports.__internal_useStatementQuery = __internal_useStatementQuery;
 exports.assertContextExists = assertContextExists;
 exports.createContextAndHook = createContextAndHook;
 exports.isDeeplyEqual = isDeeplyEqual;