chore(clerk-js, shared): Remove SWR from clerk-js and create variants for existing internal hooks (#7270)

Author: panteliselef

.changeset/early-clowns-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Removes SWR as direct dependency

.changeset/fuzzy-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Creates compatibility layer for SWR hooks that were previously inside `@clerk/clerk-js`

.github/workflows/ci.yml

@@ -310,7 +310,6 @@ jobs:
             'vue',
             'nuxt',
             'react-router',
-            'machine',
             'custom',
           ]
         test-project: ["chrome"]
@@ -321,6 +320,12 @@ jobs:
           - test-name: 'billing'
             test-project: 'chrome'
             clerk-use-rq: 'true'
+          - test-name: 'machine'
+            test-project: 'chrome'
+            clerk-use-rq: 'false'
+          - test-name: 'machine'
+            test-project: 'chrome'
+            clerk-use-rq: 'true'
           - test-name: 'nextjs'
             test-project: 'chrome'
             next-version: '14'

integration/tests/machine-auth/component.test.ts

@@ -82,8 +82,7 @@
     "dequal": "2.0.3",
     "input-otp": "1.4.2",
     "qrcode.react": "4.2.0",
-    "regenerator-runtime": "0.14.1",
-    "swr": "2.3.4"
+    "regenerator-runtime": "0.14.1"
   },
   "devDependencies": {
     "@clerk/testing": "workspace:^",

packages/clerk-js/package.json

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -69,6 +68,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
     fetchPage,
     pageCount,
     count: itemCount,
+    revalidate: invalidateAll,
   } = useAPIKeys({
     subject,
     pageSize: perPage ?? API_KEYS_PAGE_SIZE,
@@ -77,12 +77,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
     enabled: isOrg ? canReadAPIKeys : true,
   });
 
-  const { invalidateAll } = useAPIKeysPagination({
+  useAPIKeysPagination({
     query,
     page,
     pageCount,
     isFetching,
-    subject,
     fetchPage,
   });
 
@@ -94,11 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
   };
   const card = useCardState();
   const clerk = useClerk();
-  const {
-    data: createdAPIKey,
-    trigger: createAPIKey,
-    isMutating,
-  } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+  const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
   const { t } = useLocalizations();
   const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
   const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -107,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
   const handleCreateAPIKey = async (params: OnCreateParams) => {
     try {
-      await createAPIKey({
+      card.setLoading();
+      const apiKey = await clerk.apiKeys.create({
         ...params,
         subject,
       });
       invalidateAll();
       card.setError(undefined);
       setIsCopyModalOpen(true);
+      setAPIKey(apiKey);
     } catch (err: any) {
       if (isClerkAPIResponseError(err)) {
         if (err.status === 409) {
           card.setError('API Key name already exists');
         }
       }
+    } finally {
+      card.setIdle();
     }
   };
 
@@ -181,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
         <Action.Open value='add-api-key'>
           <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
             <Action.Card sx={{ width: '100%' }}>
-              <CreateAPIKeyForm
-                onCreate={handleCreateAPIKey}
-                isSubmitting={isMutating}
-              />
+              <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
             </Action.Card>
           </Flex>
         </Action.Open>
@@ -193,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
           isOpen={isCopyModalOpen}
           onOpen={() => setIsCopyModalOpen(true)}
           onClose={() => setIsCopyModalOpen(false)}
-          apiKeyName={createdAPIKey?.name ?? ''}
-          apiKeySecret={createdAPIKey?.secret ?? ''}
+          apiKeyName={apiKey?.name || ''}
+          apiKeySecret={apiKey?.secret || ''}
           modalRoot={revokeModalRoot}
         />
       </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
   onCreate: (params: OnCreateParams) => void;
-  isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
   );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
   const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
   const { close: closeCardFn } = useActionContext();
   const { showDescription = false } = useAPIKeysContext();
+  const card = useCardState();
   const { t } = useLocalizations();
 
   const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
           submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
           isDisabled={!canSubmit}
           onReset={closeCardFn}
-          isLoading={isSubmitting}
+          isLoading={card.isLoading}
           elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
         />
       </Form.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useSWRConfig } from 'swr';
+import { useEffect, useRef } from 'react';
 
 type UseAPIKeysPaginationParams = {
   query: string;
   page: number;
   pageCount: number;
   isFetching: boolean;
-  subject: string;
   fetchPage: (page: number) => void;
 };
 
@@ -16,27 +14,7 @@ type UseAPIKeysPaginationParams = {
  * - Adjusts page when current page exceeds available pages (e.g., after deletion)
  * - Provides cache invalidation function for mutations
  */
-export const useAPIKeysPagination = ({
-  query,
-  page,
-  pageCount,
-  isFetching,
-  subject,
-  fetchPage,
-}: UseAPIKeysPaginationParams) => {
-  const { mutate } = useSWRConfig();
-
-  // Invalidate all cache entries for this user or organization
-  const invalidateAll = useCallback(() => {
-    void mutate(key => {
-      if (!key || typeof key !== 'object') {
-        return false;
-      }
-      // Match all apiKeys cache entries for this user or organization, regardless of page, pageSize, or query
-      return 'type' in key && key.type === 'apiKeys' && 'subject' in key && key.subject === subject;
-    });
-  }, [mutate, subject]);
-
+export const useAPIKeysPagination = ({ query, page, pageCount, isFetching, fetchPage }: UseAPIKeysPaginationParams) => {
   // Reset to first page when query changes
   const previousQueryRef = useRef(query);
   useEffect(() => {
@@ -53,8 +31,4 @@ export const useAPIKeysPagination = ({
       fetchPage(Math.max(1, pageCount));
     }
   }, [pageCount, page, isFetching, fetchPage]);
-
-  return {
-    invalidateAll,
-  };
 };

packages/clerk-js/src/ui/components/APIKeys/utils.ts

@@ -1,6 +1,5 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
+import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -31,28 +30,17 @@ export const PaymentAttemptPage = () => {
   const subscriberType = useSubscriberTypeContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const { t, translateError } = useLocalizations();
-  const clerk = useClerk();
-  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
-  const organizationCtx = useOrganizationContext();
+  const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
   const {
     data: paymentAttempt,
     isLoading,
     error,
-  } = useSWR(
-    params.paymentAttemptId
-      ? {
-          type: 'payment-attempt',
-          id: params.paymentAttemptId,
-          orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
-        }
-      : null,
-    () =>
-      clerk.billing.getPaymentAttempt({
-        id: params.paymentAttemptId,
-        orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
-      }),
-  );
+  } = __internal_usePaymentAttemptQuery({
+    paymentAttemptId: params.paymentAttemptId,
+    for: requesterType,
+    enabled: Boolean(params.paymentAttemptId),
+  });
 
   const subscriptionItem = paymentAttempt?.subscriptionItem;
 

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
 import type {
   __internal_PlanDetailsProps,
   BillingPlanResource,
@@ -7,7 +7,6 @@ import type {
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
@@ -79,24 +78,17 @@ const PlanDetailsInternal = ({
   plan: initialPlan,
   initialPlanPeriod = 'month',
 }: __internal_PlanDetailsProps) => {
-  const clerk = useClerk();
   const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(initialPlanPeriod);
 
   const {
     data: plan,
     isLoading,
     error,
-  } = useSWR<BillingPlanResource, ClerkAPIResponseError>(
-    planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
-    // @ts-expect-error we are handling it above
-    () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
-    {
-      fallbackData: initialPlan,
-      revalidateOnFocus: false,
-      shouldRetryOnError: false,
-      keepPreviousData: true,
-    },
-  );
+  } = __internal_usePlanDetailsQuery({
+    planId,
+    initialPlan,
+    enabled: Boolean(planId || initialPlan?.id),
+  });
 
   if (isLoading && !initialPlan) {
     return (