chore(shared): Refactor clearing cache in RQ hooks (#7330)

Author: panteliselef

.changeset/smooth-lamps-raise.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': patch
+---
+
+Refactor clearing cache in RQ hooks when a use signs out.

packages/shared/src/react/hooks/createBillingPaginatedHook.tsx

@@ -129,7 +129,7 @@ export function createBillingPaginatedHook<TResource extends ClerkResource, TPar
         keepPreviousData: safeValues.keepPreviousData,
         infinite: safeValues.infinite,
         enabled: isEnabled,
-        ...(options?.unauthenticated ? {} : { isSignedIn: Boolean(user) }),
+        ...(options?.unauthenticated ? {} : { isSignedIn: user !== null }),
         __experimental_mode: safeValues.__experimental_mode,
         initialPage: safeValues.initialPage,
         pageSize: safeValues.pageSize,

packages/shared/src/react/hooks/useClearQueriesOnSignOut.ts

@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react';
+
+import { useClerkQueryClient } from '../clerk-rq/use-clerk-query-client';
+import { usePreviousValue } from './usePreviousValue';
+
+export const withInfiniteKey = <T extends string>(key: T) => [key, `${key}-inf`] as const;
+
+type ClearQueriesOnSignOutOptions = {
+  isSignedOut: boolean;
+  stableKeys: string | readonly string[];
+  /**
+   * Whether the queries for this hook are keyed as authenticated.
+   * If this is not `true`, the effect becomes a no-op.
+   */
+  authenticated?: boolean;
+  /**
+   * Optional callback that will run after queries are cleared on sign-out.
+   */
+  onCleanup?: () => void;
+};
+
+/**
+ * Clears React Query caches associated with the given stable prefixes when
+ * the authenticated state transitions from signed-in to signed-out.
+ *
+ * @internal
+ */
+export function useClearQueriesOnSignOut(options: ClearQueriesOnSignOutOptions) {
+  const { isSignedOut, stableKeys, authenticated = true, onCleanup } = options;
+  const stableKeysRef = useRef(stableKeys);
+
+  const [queryClient] = useClerkQueryClient();
+  const previousIsSignedIn = usePreviousValue(!isSignedOut);
+
+  // If this hook's cache keys are not authenticated, skip all cleanup logic.
+
+  if (authenticated !== true) {
+    return;
+  }
+
+  // Calling this effect conditionally because we make sure that `authenticated` is always the same throughout the component lifecycle.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    const isNowSignedOut = isSignedOut === true;
+
+    if (previousIsSignedIn && isNowSignedOut) {
+      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]);
+}

packages/shared/src/react/hooks/usePagesOrInfinite.rq.tsx

@@ -1,14 +1,14 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 import type { ClerkPaginatedResponse } from '../../types';
 import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
 import { useClerkQueryClient } from '../clerk-rq/use-clerk-query-client';
 import { useClerkInfiniteQuery } from '../clerk-rq/useInfiniteQuery';
 import { useClerkQuery } from '../clerk-rq/useQuery';
 import type { CacheSetter, ValueOrSetter } from '../types';
+import { useClearQueriesOnSignOut, withInfiniteKey } from './useClearQueriesOnSignOut';
 import type { UsePagesOrInfiniteSignature } from './usePageOrInfinite.types';
 import { useWithSafeValues } from './usePagesOrInfinite.shared';
-import { usePreviousValue } from './usePreviousValue';
 
 export const usePagesOrInfinite: UsePagesOrInfiniteSignature = params => {
   const { fetcher, config, keys } = params;
@@ -98,32 +98,18 @@ export const usePagesOrInfinite: UsePagesOrInfiniteSignature = params => {
     enabled: queriesEnabled && triggerInfinite,
   });
 
-  // Track previous isSignedIn state to detect sign-out transitions
-  const previousIsSignedIn = usePreviousValue(isSignedIn);
-
-  // Detect sign-out and clear queries
-  useEffect(() => {
-    const isNowSignedOut = isSignedIn === false;
-
-    if (previousIsSignedIn && isNowSignedOut) {
-      queryClient.removeQueries({
-        predicate: query => {
-          const [stablePrefix, authenticated] = query.queryKey;
-          return (
-            authenticated === true &&
-            typeof stablePrefix === 'string' &&
-            (stablePrefix === keys.queryKey[0] || stablePrefix === keys.queryKey[0] + '-inf')
-          );
-        },
-      });
-
+  useClearQueriesOnSignOut({
+    isSignedOut: isSignedIn === false,
+    authenticated: keys.authenticated,
+    stableKeys: withInfiniteKey(keys.stableKey),
+    onCleanup: () => {
       // Reset paginated page to initial
       setPaginatedPage(initialPageRef.current);
 
       // Force re-render to reflect cache changes
       void Promise.resolve().then(() => forceUpdate(n => n + 1));
-    }
-  }, [isSignedIn, queryClient, previousIsSignedIn, forceUpdate]);
+    },
+  });
 
   // Compute data, count and page from the same data source to ensure consistency
   const computedValues = useMemo(() => {

packages/shared/src/react/hooks/usePaymentAttemptQuery.rq.tsx

@@ -2,6 +2,7 @@ import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
 import { useClerkQuery } from '../clerk-rq/useQuery';
 import { useClerkInstanceContext, useOrganizationContext, useUserContext } from '../contexts';
 import { useBillingHookEnabled } from './useBillingHookEnabled';
+import { useClearQueriesOnSignOut } from './useClearQueriesOnSignOut';
 import { usePaymentAttemptQueryCacheKeys } from './usePaymentAttemptQuery.shared';
 import type { PaymentAttemptQueryResult, UsePaymentAttemptQueryParams } from './usePaymentAttemptQuery.types';
 
@@ -17,7 +18,7 @@ function usePaymentAttemptQuery(params: UsePaymentAttemptQueryParams): PaymentAt
   const organizationId = forType === 'organization' ? (organization?.id ?? null) : null;
   const userId = user?.id ?? null;
 
-  const { queryKey } = usePaymentAttemptQueryCacheKeys({
+  const { queryKey, stableKey, authenticated } = usePaymentAttemptQueryCacheKeys({
     paymentAttemptId,
     userId,
     orgId: organizationId,
@@ -28,6 +29,12 @@ function usePaymentAttemptQuery(params: UsePaymentAttemptQueryParams): PaymentAt
 
   const queryEnabled = Boolean(paymentAttemptId) && billingEnabled;
 
+  useClearQueriesOnSignOut({
+    isSignedOut: user === null, // works with the transitive state
+    authenticated,
+    stableKeys: stableKey,
+  });
+
   const query = useClerkQuery({
     queryKey,
     queryFn: ({ queryKey }) => {

packages/shared/src/react/hooks/useStatementQuery.rq.tsx

@@ -2,6 +2,7 @@ import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
 import { useClerkQuery } from '../clerk-rq/useQuery';
 import { useClerkInstanceContext, useOrganizationContext, useUserContext } from '../contexts';
 import { useBillingHookEnabled } from './useBillingHookEnabled';
+import { useClearQueriesOnSignOut } from './useClearQueriesOnSignOut';
 import { useStatementQueryCacheKeys } from './useStatementQuery.shared';
 import type { StatementQueryResult, UseStatementQueryParams } from './useStatementQuery.types';
 
@@ -17,7 +18,7 @@ function useStatementQuery(params: UseStatementQueryParams = {}): StatementQuery
   const organizationId = forType === 'organization' ? (organization?.id ?? null) : null;
   const userId = user?.id ?? null;
 
-  const { queryKey } = useStatementQueryCacheKeys({
+  const { queryKey, stableKey, authenticated } = useStatementQueryCacheKeys({
     statementId,
     userId,
     orgId: organizationId,
@@ -28,6 +29,12 @@ function useStatementQuery(params: UseStatementQueryParams = {}): StatementQuery
 
   const queryEnabled = Boolean(statementId) && billingEnabled;
 
+  useClearQueriesOnSignOut({
+    isSignedOut: user === null,
+    authenticated,
+    stableKeys: stableKey,
+  });
+
   const query = useClerkQuery({
     queryKey,
     queryFn: () => {

packages/shared/src/react/hooks/useSubscription.rq.tsx

@@ -11,6 +11,7 @@ import {
   useUserContext,
 } from '../contexts';
 import { useBillingHookEnabled } from './useBillingHookEnabled';
+import { useClearQueriesOnSignOut } from './useClearQueriesOnSignOut';
 import { useSubscriptionCacheKeys } from './useSubscription.shared';
 import type { SubscriptionResult, UseSubscriptionParams } from './useSubscription.types';
 
@@ -37,13 +38,18 @@ export function useSubscription(params?: UseSubscriptionParams): SubscriptionRes
 
   const [queryClient] = useClerkQueryClient();
 
-  const { queryKey, invalidationKey } = useSubscriptionCacheKeys({
+  const { queryKey, invalidationKey, stableKey, authenticated } = 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,