chore(shared): Proper return type of useSubscription (#7147)

Author: panteliselef

.changeset/fancy-poems-pay.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -61,6 +61,8 @@ describe('useSubscription', () => {
     expect(result.current.isLoading).toBe(false);
     expect(result.current.isFetching).toBe(false);
     expect(result.current.data).toBeUndefined();
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.revalidate).toBeInstanceOf(Function);
   });
 
   it('fetches user subscription when billing enabled (no org)', async () => {
@@ -81,6 +83,7 @@ describe('useSubscription', () => {
     expect(getSubscriptionSpy).toHaveBeenCalledTimes(1);
     expect(getSubscriptionSpy).toHaveBeenCalledWith({ orgId: 'org_1' });
     expect(result.current.data).toEqual({ id: 'sub_org_org_1' });
+    expect(result.current.error).toBeUndefined();
   });
 
   it('hides stale data on sign-out', async () => {

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

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { eventMethodCalled } from '../../telemetry/events';
-import type { BillingSubscriptionResource, EnvironmentResource } from '../../types';
+import type { EnvironmentResource } from '../../types';
 import { useClerkQueryClient } from '../clerk-rq/use-clerk-query-client';
 import { useClerkQuery } from '../clerk-rq/useQuery';
 import {
@@ -15,11 +15,12 @@ import type { SubscriptionResult, UseSubscriptionParams } from './useSubscriptio
 const hookName = 'useSubscription';
 
 /**
- * @internal
  * This is the new implementation of useSubscription using React Query.
  * It is exported only if the package is build with the `CLERK_USE_RQ` environment variable set to `true`.
+ *
+ * @internal
  */
-export function useSubscription(params?: UseSubscriptionParams): SubscriptionResult<BillingSubscriptionResource> {
+export function useSubscription(params?: UseSubscriptionParams): SubscriptionResult {
   useAssertWrappedByClerkProvider(hookName);
 
   const clerk = useClerkInstanceContext();
@@ -62,7 +63,9 @@ export function useSubscription(params?: UseSubscriptionParams): SubscriptionRes
 
   return {
     data: query.data,
-    error: query.error,
+    // Our existing types for SWR return undefined when there is no error, but React Query returns null.
+    // So we need to convert the error to undefined, for backwards compatibility.
+    error: query.error ?? undefined,
     isLoading: query.isLoading,
     isFetching: query.isFetching,
     revalidate,

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

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { eventMethodCalled } from '../../telemetry/events';
-import type { BillingSubscriptionResource, EnvironmentResource } from '../../types';
+import type { EnvironmentResource } from '../../types';
 import { useSWR } from '../clerk-swr';
 import {
   useAssertWrappedByClerkProvider,
@@ -14,11 +14,12 @@ import type { SubscriptionResult, UseSubscriptionParams } from './useSubscriptio
 const hookName = 'useSubscription';
 
 /**
- * @internal
  * This is the existing implementation of useSubscription using SWR.
  * It is kept here for backwards compatibility until our next major version.
+ *
+ * @internal
  */
-export function useSubscription(params?: UseSubscriptionParams): SubscriptionResult<BillingSubscriptionResource> {
+export function useSubscription(params?: UseSubscriptionParams): SubscriptionResult {
   useAssertWrappedByClerkProvider(hookName);
 
   const clerk = useClerkInstanceContext();

packages/shared/src/react/hooks/useSubscription.types.ts

@@ -1,4 +1,4 @@
-import type { ForPayerType } from '../../types';
+import type { BillingSubscriptionResource, ForPayerType } from '../../types';
 
 export type UseSubscriptionParams = {
   for?: ForPayerType;
@@ -9,9 +9,9 @@ export type UseSubscriptionParams = {
   keepPreviousData?: boolean;
 };
 
-export type SubscriptionResult<TData> = {
-  data: TData | undefined | null;
-  error: unknown;
+export type SubscriptionResult = {
+  data: BillingSubscriptionResource | undefined | null;
+  error: Error | undefined;
   isLoading: boolean;
   isFetching: boolean;
   /**