handle init state

Author: panteliselef

packages/shared/src/react/clerk-rq/use-clerk-query-client.ts

@@ -57,7 +57,7 @@ function createRecursiveProxy(label: string): RecursiveMock {
 
 const mockQueryClient = createRecursiveProxy('ClerkMockQueryClient') as unknown as QueryClient;
 
-const useClerkQueryClient = (): QueryClient => {
+const useClerkQueryClient = (): [QueryClient, boolean] => {
   const clerk = useClerkInstanceContext();
 
   // @ts-expect-error - __internal_queryClient is not typed
@@ -76,7 +76,9 @@ const useClerkQueryClient = (): QueryClient => {
     };
   }, [clerk, setQueryClientLoaded]);
 
-  return queryClient?.client || mockQueryClient;
+  const isLoaded = typeof queryClient === 'object' && '__tag' in queryClient && queryClient.__tag === 'clerk-rq-client';
+
+  return [queryClient?.client || mockQueryClient, isLoaded];
 };
 
 export { useClerkQueryClient };

packages/shared/src/react/clerk-rq/useBaseQuery.ts

@@ -4,22 +4,31 @@
  */
 
 'use client';
-import type { QueryKey, QueryObserver, QueryObserverResult } from '@tanstack/query-core';
+import type { DefaultedQueryObserverOptions, QueryKey, QueryObserver, QueryObserverResult } from '@tanstack/query-core';
 import { noop, notifyManager } from '@tanstack/query-core';
 import * as React from 'react';
 
 import type { UseBaseQueryOptions } from './types';
 import { useClerkQueryClient } from './use-clerk-query-client';
 
+export type DistributivePick<T, K extends PropertyKey> = T extends unknown ? Pick<T, Extract<K, keyof T>> : never;
+
+export type CommonQueryResult = 'data' | 'error' | 'isLoading' | 'isFetching' | 'status';
+
 /**
  *
  */
 export function useBaseQuery<TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey>(
   options: UseBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
   Observer: typeof QueryObserver,
-): QueryObserverResult<TData, TError> {
-  const client = useClerkQueryClient();
-  const defaultedOptions = client.defaultQueryOptions(options);
+): DistributivePick<QueryObserverResult<TData, TError>, CommonQueryResult> {
+  const [client, isQueryClientLoaded] = useClerkQueryClient();
+  const defaultedOptions = isQueryClientLoaded
+    ? client.defaultQueryOptions(options)
+    : (options as DefaultedQueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>);
+
+  // Make sure results are optimistically set in fetching state before subscribing or updating options
+  defaultedOptions._optimisticResults = 'optimistic';
 
   const observer = React.useMemo(() => {
     return new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(client, defaultedOptions);
@@ -50,6 +59,19 @@ export function useBaseQuery<TQueryFnData, TError, TData, TQueryData, TQueryKey
     observer.setOptions(defaultedOptions);
   }, [defaultedOptions, observer]);
 
+  if (!isQueryClientLoaded) {
+    // In this step we attempt to return a dummy result that matches RQ's pending state while on SSR or untill the query client is loaded on the client (after clerk-js loads).
+    // When the query client is not loaded, we return the result as if the query was not enabled.
+    // `isLoading` and `isFetching` need to be `false` because we can't know if the query will be enabled during SSR since most conditions really on client-only data that are available after clerk-js loads.
+    return {
+      data: undefined,
+      error: null,
+      isLoading: false,
+      isFetching: false,
+      status: 'pending',
+    };
+  }
+
   // Handle result property usage tracking
   return !defaultedOptions.notifyOnChangeProps ? observer.trackResult(result) : result;
 }

packages/shared/src/react/clerk-rq/useQuery.ts

@@ -4,6 +4,7 @@ import { QueryObserver } from '@tanstack/query-core';
 
 import type { DefinedInitialDataOptions, UndefinedInitialDataOptions } from './queryOptions';
 import type { DefinedUseQueryResult, UseQueryOptions, UseQueryResult } from './types';
+import type { CommonQueryResult, DistributivePick } from './useBaseQuery';
 import { useBaseQuery } from './useBaseQuery';
 
 export function useClerkQuery<
@@ -13,21 +14,25 @@ export function useClerkQuery<
   TQueryKey extends QueryKey = QueryKey,
 >(
   options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
-): DefinedUseQueryResult<NoInfer<TData>, TError>;
+): DistributivePick<DefinedUseQueryResult<NoInfer<TData>, TError>, CommonQueryResult>;
 
 export function useClerkQuery<
   TQueryFnData = unknown,
   TError = DefaultError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
->(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>): UseQueryResult<NoInfer<TData>, TError>;
+>(
+  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): DistributivePick<UseQueryResult<NoInfer<TData>, TError>, CommonQueryResult>;
 
 export function useClerkQuery<
   TQueryFnData = unknown,
   TError = DefaultError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
->(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>): UseQueryResult<NoInfer<TData>, TError>;
+>(
+  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+): DistributivePick<UseQueryResult<NoInfer<TData>, TError>, CommonQueryResult>;
 
 /**
  *

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

@@ -36,7 +36,7 @@ export function useSubscription(params?: UseSubscriptionParams): SubscriptionRes
     ? environment?.commerceSettings.billing.organization.enabled
     : environment?.commerceSettings.billing.user.enabled;
 
-  const queryClient = useClerkQueryClient();
+  const [queryClient] = useClerkQueryClient();
 
   const queryKey = useMemo(() => {
     return [
@@ -55,7 +55,7 @@ export function useSubscription(params?: UseSubscriptionParams): SubscriptionRes
       return clerk.billing.getSubscription(obj.args);
     },
     staleTime: 1_000 * 60,
-    enabled: Boolean(user?.id && billingEnabled),
+    enabled: Boolean(user?.id && billingEnabled) && ((params as any)?.enabled ?? true),
   });
 
   const revalidate = useCallback(() => queryClient.invalidateQueries({ queryKey }), [queryClient, queryKey]);

packages/shared/src/react/providers/SWRConfigCompat.rq.tsx

@@ -1,9 +1,10 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import { SWRConfig } from 'swr';
 
 /**
  * @internal
  */
-export function SWRConfigCompat({ children }: PropsWithChildren) {
-  return <>{children}</>;
+export function SWRConfigCompat({ swrConfig, children }: PropsWithChildren<{ swrConfig?: any }>) {
+  return <SWRConfig value={swrConfig}>{children}</SWRConfig>;
 }