Skip to content

Commit ea9fa85

Browse files
jacekradkojacekradko
authored
Revert "feat(shared): Remove SWR (#7455)" (#7565)
1 parent 879772a commit ea9fa85

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1690
-714
lines changed

‎.changeset/remove-swr-switches.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/clerk-js/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"@solana/wallet-standard": "catalog:module-manager",
6868
"@stripe/stripe-js": "5.6.0",
6969
"@swc/helpers": "catalog:repo",
70-
"@tanstack/query-core": "5.90.16",
70+
"@tanstack/query-core": "5.87.4",
7171
"@wallet-standard/core": "catalog:module-manager",
7272
"@zxcvbn-ts/core": "catalog:module-manager",
7373
"@zxcvbn-ts/language-common": "catalog:module-manager",

‎packages/clerk-js/src/test/create-fixtures.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// @ts-nocheck
33

44
import type { ClerkOptions, ClientJSON, EnvironmentJSON, LoadedClerk } from '@clerk/shared/types';
5+
import { useState } from 'react';
56
import { vi } from 'vitest';
67

78
import { Clerk as ClerkCtor } from '@/core/clerk';
@@ -86,6 +87,7 @@ const unboundCreateFixtures = (
8687

8788
const MockClerkProvider = (props: any) => {
8889
const { children } = props;
90+
const [swrConfig] = useState(() => ({ provider: () => new Map() }));
8991

9092
const componentsWithoutContext = [
9193
'UsernameSection',
@@ -106,7 +108,11 @@ const unboundCreateFixtures = (
106108
);
107109

108110
return (
109-
<CoreClerkContextWrapper clerk={clerkMock}>
111+
<CoreClerkContextWrapper
112+
clerk={clerkMock}
113+
// Clear swr cache
114+
swrConfig={swrConfig}
115+
>
110116
<EnvironmentProvider value={environmentMock}>
111117
<OptionsProvider value={optionsMock}>
112118
<RouteContext.Provider value={routerMock}>

‎packages/shared/global.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ declare const JS_PACKAGE_VERSION: string;
44
declare const UI_PACKAGE_VERSION: string;
55
declare const __DEV__: boolean;
66
declare const __BUILD_DISABLE_RHC__: boolean;
7+
declare const __CLERK_USE_RQ__: boolean;
78

89
interface ImportMetaEnv {
910
readonly [key: string]: string;

‎packages/shared/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,11 +124,11 @@
124124
"test:coverage": "vitest --collectCoverage && open coverage/lcov-report/index.html"
125125
},
126126
"dependencies": {
127-
"@tanstack/query-core": "5.90.16",
128127
"dequal": "2.0.3",
129128
"glob-to-regexp": "0.4.1",
130129
"js-cookie": "3.0.5",
131-
"std-env": "^3.9.0"
130+
"std-env": "^3.9.0",
131+
"swr": "2.3.4"
132132
},
133133
"devDependencies": {
134134
"@base-org/account": "catalog:module-manager",
@@ -138,6 +138,7 @@
138138
"@solana/wallet-standard": "catalog:module-manager",
139139
"@stripe/react-stripe-js": "3.1.1",
140140
"@stripe/stripe-js": "5.6.0",
141+
"@tanstack/query-core": "5.87.4",
141142
"@types/glob-to-regexp": "0.4.4",
142143
"@types/js-cookie": "3.0.6",
143144
"@wallet-standard/core": "catalog:module-manager",

‎packages/shared/src/react/billing/useInitializePaymentMethod.rq.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { useCallback, useMemo } from 'react';
2+
3+
import type { BillingInitializedPaymentMethodResource, ForPayerType } from '../../types';
4+
import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
5+
import { useClerkQueryClient } from '../clerk-rq/use-clerk-query-client';
6+
import { useClerkQuery } from '../clerk-rq/useQuery';
7+
import { useOrganizationContext, useUserContext } from '../contexts';
8+
import { useBillingHookEnabled } from '../hooks/useBillingHookEnabled';
9+
10+
type InitializePaymentMethodOptions = {
11+
for?: ForPayerType;
12+
};
13+
14+
export type UseInitializePaymentMethodResult = {
15+
initializedPaymentMethod: BillingInitializedPaymentMethodResource | undefined;
16+
initializePaymentMethod: () => Promise<BillingInitializedPaymentMethodResource | undefined>;
17+
};
18+
19+
/**
20+
* @internal
21+
*/
22+
function useInitializePaymentMethod(options?: InitializePaymentMethodOptions): UseInitializePaymentMethodResult {
23+
const { for: forType } = options ?? {};
24+
const { organization } = useOrganizationContext();
25+
const user = useUserContext();
26+
27+
const resource = forType === 'organization' ? organization : user;
28+
29+
const billingEnabled = useBillingHookEnabled(options);
30+
31+
const queryKey = useMemo(() => {
32+
return ['billing-payment-method-initialize', { resourceId: resource?.id }] as const;
33+
}, [resource?.id]);
34+
35+
const isEnabled = Boolean(resource?.id) && billingEnabled;
36+
37+
const query = useClerkQuery({
38+
queryKey,
39+
queryFn: async () => {
40+
if (!resource) {
41+
return undefined;
42+
}
43+
44+
return resource.initializePaymentMethod({
45+
gateway: 'stripe',
46+
});
47+
},
48+
enabled: isEnabled,
49+
staleTime: 1_000 * 60,
50+
refetchOnWindowFocus: false,
51+
placeholderData: defineKeepPreviousDataFn(true),
52+
});
53+
54+
const [queryClient] = useClerkQueryClient();
55+
56+
const initializePaymentMethod = useCallback(async () => {
57+
if (!resource) {
58+
return undefined;
59+
}
60+
61+
const result = await resource.initializePaymentMethod({
62+
gateway: 'stripe',
63+
});
64+
65+
queryClient.setQueryData(queryKey, result);
66+
67+
return result;
68+
}, [queryClient, queryKey, resource]);
69+
70+
return {
71+
initializedPaymentMethod: query.data ?? undefined,
72+
initializePaymentMethod,
73+
};
74+
}
75+
76+
export { useInitializePaymentMethod as __internal_useInitializePaymentMethod };

‎packages/shared/src/react/billing/useInitializePaymentMethod.swr.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { useEffect } from 'react';
2+
import useSWRMutation from 'swr/mutation';
3+
4+
import type { BillingInitializedPaymentMethodResource, ForPayerType } from '../../types';
5+
import { useOrganizationContext, useUserContext } from '../contexts';
6+
7+
type InitializePaymentMethodOptions = {
8+
for?: ForPayerType;
9+
};
10+
11+
export type UseInitializePaymentMethodResult = {
12+
initializedPaymentMethod: BillingInitializedPaymentMethodResource | undefined;
13+
initializePaymentMethod: () => Promise<BillingInitializedPaymentMethodResource | undefined>;
14+
};
15+
16+
/**
17+
* This is the existing implementation of the payment method initializer using SWR.
18+
* It is kept here for backwards compatibility until our next major version.
19+
*
20+
* @internal
21+
*/
22+
function useInitializePaymentMethod(options?: InitializePaymentMethodOptions): UseInitializePaymentMethodResult {
23+
const { for: forType = 'user' } = options ?? {};
24+
const { organization } = useOrganizationContext();
25+
const user = useUserContext();
26+
27+
const resource = forType === 'organization' ? organization : user;
28+
29+
const { data, trigger } = useSWRMutation(
30+
resource?.id
31+
? {
32+
key: 'billing-payment-method-initialize',
33+
resourceId: resource.id,
34+
for: forType,
35+
}
36+
: null,
37+
() => {
38+
return resource?.initializePaymentMethod({
39+
gateway: 'stripe',
40+
});
41+
},
42+
);
43+
44+
useEffect(() => {
45+
if (!resource?.id) {
46+
return;
47+
}
48+
49+
trigger().catch(() => {
50+
// ignore errors
51+
});
52+
}, [resource?.id, trigger]);
53+
54+
return {
55+
initializedPaymentMethod: data,
56+
initializePaymentMethod: trigger,
57+
};
58+
}
59+
60+
export { useInitializePaymentMethod as __internal_useInitializePaymentMethod };

‎packages/shared/src/react/billing/useInitializePaymentMethod.tsx‎

Lines changed: 2 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,2 @@
1-
import { useCallback, useMemo } from 'react';
2-
3-
import type { BillingInitializedPaymentMethodResource, ForPayerType } from '../../types';
4-
import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
5-
import { useClerkQueryClient } from '../clerk-rq/use-clerk-query-client';
6-
import { useClerkQuery } from '../clerk-rq/useQuery';
7-
import { useOrganizationContext, useUserContext } from '../contexts';
8-
import { useBillingHookEnabled } from '../hooks/useBillingHookEnabled';
9-
10-
type InitializePaymentMethodOptions = {
11-
for?: ForPayerType;
12-
};
13-
14-
export type UseInitializePaymentMethodResult = {
15-
initializedPaymentMethod: BillingInitializedPaymentMethodResource | undefined;
16-
initializePaymentMethod: () => Promise<BillingInitializedPaymentMethodResource | undefined>;
17-
};
18-
19-
/**
20-
* @internal
21-
*/
22-
function useInitializePaymentMethod(options?: InitializePaymentMethodOptions): UseInitializePaymentMethodResult {
23-
const { for: forType } = options ?? {};
24-
const { organization } = useOrganizationContext();
25-
const user = useUserContext();
26-
27-
const resource = forType === 'organization' ? organization : user;
28-
29-
const billingEnabled = useBillingHookEnabled(options);
30-
31-
const queryKey = useMemo(() => {
32-
return ['billing-payment-method-initialize', { resourceId: resource?.id }] as const;
33-
}, [resource?.id]);
34-
35-
const isEnabled = Boolean(resource?.id) && billingEnabled;
36-
37-
const query = useClerkQuery({
38-
queryKey,
39-
queryFn: async () => {
40-
if (!resource) {
41-
return undefined;
42-
}
43-
44-
return resource.initializePaymentMethod({
45-
gateway: 'stripe',
46-
});
47-
},
48-
enabled: isEnabled,
49-
staleTime: 1_000 * 60,
50-
refetchOnWindowFocus: false,
51-
placeholderData: defineKeepPreviousDataFn(true),
52-
});
53-
54-
const [queryClient] = useClerkQueryClient();
55-
56-
const initializePaymentMethod = useCallback(async () => {
57-
if (!resource) {
58-
return undefined;
59-
}
60-
61-
const result = await resource.initializePaymentMethod({
62-
gateway: 'stripe',
63-
});
64-
65-
queryClient.setQueryData(queryKey, result);
66-
67-
return result;
68-
}, [queryClient, queryKey, resource]);
69-
70-
return {
71-
initializedPaymentMethod: query.data ?? undefined,
72-
initializePaymentMethod,
73-
};
74-
}
75-
76-
export { useInitializePaymentMethod as __internal_useInitializePaymentMethod };
1+
export type { UseInitializePaymentMethodResult } from 'virtual:data-hooks/useInitializePaymentMethod';
2+
export { __internal_useInitializePaymentMethod } from 'virtual:data-hooks/useInitializePaymentMethod';

‎packages/shared/src/react/billing/useStripeClerkLibs.rq.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { loadStripe } from '@stripe/stripe-js';
2+
3+
import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
4+
import { useClerkQuery } from '../clerk-rq/useQuery';
5+
import { useBillingHookEnabled } from '../hooks/useBillingHookEnabled';
6+
import { useClerk } from '../hooks/useClerk';
7+
8+
type LoadStripeFn = typeof loadStripe;
9+
10+
type StripeClerkLibs = {
11+
loadStripe: LoadStripeFn;
12+
};
13+
14+
/**
15+
* @internal
16+
*/
17+
function useStripeClerkLibs(): StripeClerkLibs | null {
18+
const clerk = useClerk();
19+
20+
const billingEnabled = useBillingHookEnabled();
21+
22+
const query = useClerkQuery({
23+
queryKey: ['clerk-stripe-sdk'],
24+
queryFn: async () => {
25+
const loadStripe = (await clerk.__internal_loadStripeJs()) as LoadStripeFn;
26+
return { loadStripe };
27+
},
28+
enabled: billingEnabled,
29+
staleTime: Infinity,
30+
refetchOnWindowFocus: false,
31+
placeholderData: defineKeepPreviousDataFn(true),
32+
});
33+
34+
return query.data ?? null;
35+
}
36+
37+
export { useStripeClerkLibs as __internal_useStripeClerkLibs };

‎packages/shared/src/react/billing/useStripeClerkLibs.swr.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import type { loadStripe } from '@stripe/stripe-js';
2+
3+
import { useSWR } from '../clerk-swr';
4+
import { useClerk } from '../hooks/useClerk';
5+
6+
type LoadStripeFn = typeof loadStripe;
7+
8+
type StripeClerkLibs = {
9+
loadStripe: LoadStripeFn;
10+
};
11+
12+
export type UseStripeClerkLibsResult = StripeClerkLibs | null;
13+
14+
/**
15+
* This is the existing implementation of the Stripe libraries loader using SWR.
16+
* It is kept here for backwards compatibility until our next major version.
17+
*
18+
* @internal
19+
*/
20+
function useStripeClerkLibs(): UseStripeClerkLibsResult {
21+
const clerk = useClerk();
22+
23+
const swr = useSWR(
24+
'clerk-stripe-sdk',
25+
async () => {
26+
const loadStripe = (await clerk.__internal_loadStripeJs()) as LoadStripeFn;
27+
return { loadStripe };
28+
},
29+
{
30+
keepPreviousData: true,
31+
revalidateOnFocus: false,
32+
dedupingInterval: Infinity,
33+
},
34+
);
35+
36+
return swr.data ?? null;
37+
}
38+
39+
export { useStripeClerkLibs as __internal_useStripeClerkLibs };

0 commit comments

Comments
 (0)