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

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

@@ -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';
@@ -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/CreateAPIKeyForm.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/PaymentAttempts/PaymentAttemptPage.tsx

@@ -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/Plans/PlanDetails.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 (

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,5 +1,4 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
-import useSWR from 'swr';
+import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -25,28 +24,17 @@ export const StatementPage = () => {
   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: statement,
     isLoading,
     error,
-  } = useSWR(
-    params.statementId
-      ? {
-          type: 'statement',
-          id: params.statementId,
-          orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
-        }
-      : null,
-    () =>
-      clerk.billing.getStatement({
-        id: params.statementId,
-        orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
-      }),
-  );
+  } = __internal_useStatementQuery({
+    statementId: params.statementId,
+    for: requesterType,
+    enabled: Boolean(params.statementId),
+  });
 
   if (isLoading) {
     return (