wip

Author: panteliselef

packages/clerk-js/src/core/lazy-query-client.ts

@@ -0,0 +1,47 @@
+import type { QueryClient } from './query-core';
+
+type TaggedQueryClient = { __tag: 'clerk-rq-client'; client: QueryClient };
+
+class LazyQueryController {
+  #queryClient: QueryClient | undefined;
+  #requested = false;
+  static #instance: LazyQueryController | undefined;
+
+  static get(): LazyQueryController {
+    if (!this.#instance) {
+      this.#instance = new LazyQueryController();
+    }
+    return this.#instance;
+  }
+
+  constructor() {}
+
+  get client(): TaggedQueryClient | undefined {
+    if (!this.#requested) {
+      void import('./query-core')
+        .then(module => module.QueryClient)
+        .then(QueryClient => {
+          if (this.#queryClient) {
+            return;
+          }
+          this.#queryClient = new QueryClient();
+          // @ts-expect-error - queryClientStatus is not typed
+          this.#publicEventBus.emit('queryClientStatus', 'ready');
+        });
+    }
+
+    return this.#queryClient
+      ? {
+          __tag: 'clerk-rq-client',
+          client: this.#queryClient,
+        }
+      : undefined;
+  }
+
+  invalidate(...params: Parameters<QueryClient['invalidateQueries']>): void {
+    // Only invalidate if the query client exists
+    this.#queryClient?.invalidateQueries(...params);
+  }
+}
+
+export const lazyQueryController = LazyQueryController.get();

packages/clerk-js/src/core/resources/BillingCheckout.ts

@@ -12,6 +12,7 @@ import type {
 import { unixEpochToDate } from '@/utils/date';
 
 import { billingTotalsFromJSON } from '../../utils';
+import { lazyQueryController } from '../lazy-query-client';
 import { BillingPayer } from './BillingPayer';
 import { BaseResource, BillingPaymentSource, BillingPlan } from './internal';
 
@@ -54,11 +55,11 @@ export class BillingCheckout extends BaseResource implements BillingCheckoutReso
     return this;
   }
 
-  confirm = (params: ConfirmCheckoutParams): Promise<this> => {
+  confirm = async (params: ConfirmCheckoutParams): Promise<this> => {
     // Retry confirmation in case of a 500 error
     // This will retry up to 3 times with an increasing delay
     // It retries at 2s, 4s, 6s and 8s
-    return retry(
+    const result = await retry(
       () =>
         this._basePatch({
           path: this.payer.organizationId
@@ -85,5 +86,9 @@ export class BillingCheckout extends BaseResource implements BillingCheckoutReso
         },
       },
     );
+
+    // TODO: We can use the public bus instead.
+    lazyQueryController.invalidate({ queryKey: ['commerce-subscription'] });
+    return result;
   };
 }

packages/clerk-js/src/core/resources/BillingSubscription.ts

@@ -13,6 +13,7 @@ import type {
 import { unixEpochToDate } from '@/utils/date';
 
 import { billingMoneyAmountFromJSON } from '../../utils';
+import { lazyQueryController } from '../lazy-query-client';
 import { BaseResource, BillingPlan, DeletedObject } from './internal';
 
 export class BillingSubscription extends BaseResource implements BillingSubscriptionResource {
@@ -117,6 +118,7 @@ export class BillingSubscriptionItem extends BaseResource implements BillingSubs
       })
     )?.response as unknown as DeletedObjectJSON;
 
+    lazyQueryController.invalidate({ queryKey: ['commerce-subscription'] });
     return new DeletedObject(json);
   }
 }

packages/clerk-js/src/ui/contexts/components/Plans.tsx

@@ -115,7 +115,7 @@ export const usePlansContext = () => {
     return false;
   }, [clerk, subscriberType]);
 
-  const { subscriptionItems, revalidate: revalidateSubscriptions, data: topLevelSubscription } = useSubscription();
+  const { subscriptionItems, data: topLevelSubscription } = useSubscription();
 
   // Invalidates cache but does not fetch immediately
   const { data: plans, revalidate: revalidatePlans } = usePlans({ mode: 'cache' });
@@ -127,11 +127,10 @@ export const usePlansContext = () => {
 
   const revalidateAll = useCallback(() => {
     // Revalidate the plans and subscriptions
-    void revalidateSubscriptions();
     void revalidatePlans();
     void revalidateStatements();
     void revalidatePaymentSources();
-  }, [revalidateSubscriptions, revalidatePlans, revalidateStatements, revalidatePaymentSources]);
+  }, [revalidatePlans, revalidateStatements, revalidatePaymentSources]);
 
   // should the default plan be shown as active
   const isDefaultPlanImplicitlyActiveOrUpcoming = useMemo(() => {