wip

Author: panteliselef

packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx

@@ -52,8 +52,8 @@ export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JS
       <ClientContext.Provider value={clientCtx}>
         <SessionContext.Provider value={sessionCtx}>
           <OrganizationProvider
-            // @ts-expect-error - __internal_queryClient is not typed
-            queryClient={clerk.__internal_queryClient}
+            // // @ts-expect-error - __internal_queryClient is not typed
+            // queryClient={clerk.__internal_queryClient}
             {...organizationCtx.value}
             swrConfig={props.swrConfig}
           >

packages/react/src/contexts/ClerkContextProvider.tsx

@@ -103,7 +103,7 @@ export function ClerkContextProvider(props: ClerkContextProvider) {
     return clerk.__internal_queryClient;
   }, [queryStatus, clerkStatus]);
 
-  console.log('queryStatus', queryStatus, queryClient);
+  // console.log('queryStatus', queryStatus, queryClient);
 
   return (
     // @ts-expect-error value passed is of type IsomorphicClerk where the context expects LoadedClerk
@@ -113,7 +113,7 @@ export function ClerkContextProvider(props: ClerkContextProvider) {
           <OrganizationProvider
             key={clerkStatus + queryStatus}
             {...organizationCtx.value}
-            queryClient={queryClient}
+            // queryClient={queryClient}
           >
             <AuthContext.Provider value={authCtx}>
               <UserContext.Provider value={userCtx}>

packages/shared/src/react/contexts.tsx

@@ -10,7 +10,6 @@ import type {
   SignedInSessionResource,
   UserResource,
 } from '@clerk/types';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 
@@ -60,27 +59,24 @@ const OrganizationProvider = ({
   children,
   organization,
   swrConfig,
-  queryClient,
+  // queryClient,
 }: PropsWithChildren<
   OrganizationContextProps & {
     // Exporting inferred types  directly from SWR will result in error while building declarations
     swrConfig?: any;
-    queryClient?: QueryClient;
+    // queryClient?: QueryClient;
   }
 >) => {
-  const [defaultClient] = React.useState(() => new QueryClient());
   return (
-    <QueryClientProvider client={queryClient || defaultClient}>
-      <SWRConfig value={swrConfig}>
-        <OrganizationContextInternal.Provider
-          value={{
-            value: { organization },
-          }}
-        >
-          {children}
-        </OrganizationContextInternal.Provider>
-      </SWRConfig>
-    </QueryClientProvider>
+    <SWRConfig value={swrConfig}>
+      <OrganizationContextInternal.Provider
+        value={{
+          value: { organization },
+        }}
+      >
+        {children}
+      </OrganizationContextInternal.Provider>
+    </SWRConfig>
   );
 };
 

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

@@ -1,6 +1,6 @@
 import type { EnvironmentResource, ForPayerType } from '@clerk/types';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { eventMethodCalled } from '../../telemetry/events';
 import { useSWR } from '../clerk-swr';
@@ -80,6 +80,26 @@ export const useSubscriptionPrev = (params?: UseSubscriptionParams) => {
   };
 };
 
+const useClerkQueryClient = () => {
+  const clerk = useClerkInstanceContext();
+  const [queryStatus, setQueryStatus] = useState('loading');
+  useEffect(() => {
+    // @ts-expect-error - queryClientStatus is not typed
+    clerk.on('queryClientStatus', setQueryStatus);
+    return () => {
+      // @ts-expect-error - queryClientStatus is not typed
+      clerk.off('queryClientStatus', setQueryStatus);
+    };
+  }, [clerk]);
+
+  const queryClient = useMemo(() => {
+    // @ts-expect-error - __internal_queryClient is not typed
+    return clerk.__internal_queryClient;
+  }, [queryStatus, clerk.status]);
+
+  return queryClient;
+};
+
 export const useSubscription = (params?: UseSubscriptionParams) => {
   useAssertWrappedByClerkProvider(hookName);
 
@@ -99,7 +119,9 @@ export const useSubscription = (params?: UseSubscriptionParams) => {
     ? environment?.commerceSettings.billing.organization.enabled
     : environment?.commerceSettings.billing.user.enabled;
 
-  const queryClient = useQueryClient();
+  const queryClient = useClerkQueryClient();
+  // console.log('useInfiniteQuery', useInfiniteQuery);
+  // console.log('useInfiniteQuery', useMutation);
 
   const queryKey = useMemo(() => {
     return [
@@ -111,20 +133,23 @@ export const useSubscription = (params?: UseSubscriptionParams) => {
     ];
   }, [user?.id, isOrganization, organization?.id]);
 
-  const query = useQuery({
-    queryKey,
-    queryFn: ({ queryKey }) => {
-      const obj = queryKey[1] as {
-        args: {
-          orgId?: string;
+  const query = useQuery(
+    {
+      queryKey,
+      queryFn: ({ queryKey }) => {
+        const obj = queryKey[1] as {
+          args: {
+            orgId?: string;
+          };
         };
-      };
-      return clerk.billing.getSubscription(obj.args);
+        return clerk.billing.getSubscription(obj.args);
+      },
+      staleTime: 1_0000 * 60,
+      enabled: Boolean(user?.id && billingEnabled) && clerk.status === 'ready',
+      // placeholderData
     },
-    staleTime: 1_0000 * 60,
-    enabled: Boolean(user?.id && billingEnabled) && clerk.status === 'ready',
-    // placeholderData
-  });
+    queryClient,
+  );
 
   const revalidate = useCallback(() => queryClient.invalidateQueries({ queryKey }), [queryClient, queryKey]);