Skip to content

Commit 0993878

Browse files
authored
chore: Migrate usePlanPageData to TS Query V5 (#3567)
1 parent 606eb5d commit 0993878

File tree

9 files changed

+126
-63
lines changed

9 files changed

+126
-63
lines changed

src/pages/PlanPage/PlanPage.jsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import { Elements } from '@stripe/react-stripe-js'
22
import { loadStripe } from '@stripe/stripe-js'
3+
import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
34
import { lazy, Suspense } from 'react'
45
import { Redirect, Switch, useParams } from 'react-router-dom'
56

67
import config from 'config'
78

89
import { SentryRoute } from 'sentry'
910

10-
import { usePlanPageData } from 'pages/PlanPage/hooks'
1111
import LoadingLogo from 'ui/LoadingLogo'
1212

1313
import { PlanProvider } from './context'
1414
import PlanBreadcrumb from './PlanBreadcrumb'
15+
import { PlanPageDataQueryOpts } from './queries/PlanPageDataQueryOpts'
1516
import Tabs from './Tabs'
1617

1718
const CancelPlanPage = lazy(() => import('./subRoutes/CancelPlanPage'))
@@ -33,7 +34,9 @@ const Loader = () => (
3334

3435
function PlanPage() {
3536
const { owner, provider } = useParams()
36-
const { data: ownerData } = usePlanPageData({ owner, provider })
37+
const { data: ownerData } = useSuspenseQueryV5(
38+
PlanPageDataQueryOpts({ owner, provider })
39+
)
3740

3841
if (config.IS_SELF_HOSTED || !ownerData?.isCurrentUserPartOfOrg) {
3942
return <Redirect to={`/${provider}/${owner}`} />

src/pages/PlanPage/PlanPage.test.jsx

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2+
import {
3+
QueryClientProvider as QueryClientProviderV5,
4+
QueryClient as QueryClientV5,
5+
} from '@tanstack/react-queryV5'
26
import { render, screen, waitFor } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
@@ -28,39 +32,40 @@ vi.mock('./subRoutes/UpgradePlanPage', () => ({
2832

2933
const server = setupServer()
3034
const queryClient = new QueryClient({
31-
defaultOptions: {
32-
queries: {
33-
retry: false,
34-
suspense: true,
35-
},
36-
},
35+
defaultOptions: { queries: { retry: false, suspense: true } },
36+
})
37+
const queryClientV5 = new QueryClientV5({
38+
defaultOptions: { queries: { retry: false } },
3739
})
3840

3941
let testLocation
4042
const wrapper =
4143
(initialEntries = '') =>
4244
({ children }) => (
43-
<QueryClientProvider client={queryClient}>
44-
<MemoryRouter initialEntries={[initialEntries]}>
45-
<Route path="/plan/:provider/:owner">
46-
<Suspense fallback={null}>{children}</Suspense>
47-
</Route>
48-
<Route
49-
path="*"
50-
render={({ location }) => {
51-
testLocation = location
52-
return null
53-
}}
54-
/>
55-
</MemoryRouter>
56-
</QueryClientProvider>
45+
<QueryClientProviderV5 client={queryClientV5}>
46+
<QueryClientProvider client={queryClient}>
47+
<Suspense fallback={null}>
48+
<MemoryRouter initialEntries={[initialEntries]}>
49+
<Route path="/plan/:provider/:owner">{children}</Route>
50+
<Route
51+
path="*"
52+
render={({ location }) => {
53+
testLocation = location
54+
return null
55+
}}
56+
/>
57+
</MemoryRouter>
58+
</Suspense>
59+
</QueryClientProvider>
60+
</QueryClientProviderV5>
5761
)
5862

5963
beforeAll(() => {
6064
server.listen()
6165
})
6266
afterEach(() => {
6367
queryClient.clear()
68+
queryClientV5.clear()
6469
server.resetHandlers()
6570
vi.resetAllMocks()
6671
})

src/pages/PlanPage/hooks/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

src/pages/PlanPage/hooks/usePlanPageData.test.tsx renamed to src/pages/PlanPage/queries/PlanPageDataQueryOpts.test.tsx

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,49 @@
1-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
1+
import {
2+
QueryClientProvider as QueryClientProviderV5,
3+
QueryClient as QueryClientV5,
4+
useQuery as useQueryV5,
5+
} from '@tanstack/react-queryV5'
26
import { renderHook, waitFor } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
59
import { MemoryRouter, Route } from 'react-router-dom'
610
import { type MockInstance } from 'vitest'
711

8-
import { usePlanPageData } from './usePlanPageData'
12+
import { PlanPageDataQueryOpts } from './PlanPageDataQueryOpts'
913

1014
const mockOwner = {
1115
username: 'cool-user',
1216
isCurrentUserPartOfOrg: true,
1317
numberOfUploads: 30,
1418
}
1519

16-
const queryClient = new QueryClient({
20+
const queryClientV5 = new QueryClientV5({
1721
defaultOptions: { queries: { retry: false } },
1822
})
1923
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
2024
<MemoryRouter initialEntries={['/gh']}>
2125
<Route path="/:provider">
22-
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
26+
<QueryClientProviderV5 client={queryClientV5}>
27+
{children}
28+
</QueryClientProviderV5>
2329
</Route>
2430
</MemoryRouter>
2531
)
2632

2733
const server = setupServer()
2834

29-
beforeAll(() => server.listen())
35+
beforeAll(() => {
36+
server.listen()
37+
})
38+
3039
beforeEach(() => {
3140
server.resetHandlers()
32-
queryClient.clear()
41+
queryClientV5.clear()
42+
})
43+
44+
afterAll(() => {
45+
server.close()
3346
})
34-
afterAll(() => server.close())
3547

3648
describe('usePlanPageData', () => {
3749
function setup({ invalidSchema = false }) {
@@ -53,10 +65,12 @@ describe('usePlanPageData', () => {
5365
it('returns data for the owner page', async () => {
5466
const { result } = renderHook(
5567
() =>
56-
usePlanPageData({
57-
owner: 'popcorn',
58-
provider: 'gh',
59-
}),
68+
useQueryV5(
69+
PlanPageDataQueryOpts({
70+
owner: 'popcorn',
71+
provider: 'gh',
72+
})
73+
),
6074
{ wrapper }
6175
)
6276

@@ -81,10 +95,12 @@ describe('usePlanPageData', () => {
8195
setup({ invalidSchema: true })
8296
const { result } = renderHook(
8397
() =>
84-
usePlanPageData({
85-
owner: 'popcorn',
86-
provider: 'gh',
87-
}),
98+
useQueryV5(
99+
PlanPageDataQueryOpts({
100+
owner: 'popcorn',
101+
provider: 'gh',
102+
})
103+
),
88104
{ wrapper }
89105
)
90106

src/pages/PlanPage/hooks/usePlanPageData.ts renamed to src/pages/PlanPage/queries/PlanPageDataQueryOpts.ts

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { useQuery } from '@tanstack/react-query'
1+
import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
22
import { z } from 'zod'
33

44
import Api from 'shared/api'
5-
import { NetworkErrorObject } from 'shared/api/helpers'
5+
import { rejectNetworkError } from 'shared/api/helpers'
66

77
const RequestSchema = z.object({
88
owner: z
@@ -24,17 +24,20 @@ const query = `
2424
}
2525
`
2626

27-
type UsePlanPageDataParams = {
27+
type PlanPageDataQueryArgs = {
2828
owner: string
2929
provider: string
3030
}
3131

32-
export function usePlanPageData({ owner, provider }: UsePlanPageDataParams) {
32+
export function PlanPageDataQueryOpts({
33+
owner,
34+
provider,
35+
}: PlanPageDataQueryArgs) {
3336
const variables = {
3437
username: owner,
3538
}
3639

37-
return useQuery({
40+
return queryOptionsV5({
3841
queryKey: ['PlanPageData', variables, provider],
3942
queryFn: ({ signal }) =>
4043
Api.graphql({
@@ -46,11 +49,12 @@ export function usePlanPageData({ owner, provider }: UsePlanPageDataParams) {
4649
const parsedRes = RequestSchema.safeParse(res?.data)
4750

4851
if (!parsedRes.success) {
49-
return Promise.reject({
52+
return rejectNetworkError({
5053
status: 404,
5154
data: {},
5255
dev: 'usePlanPageData - 404 schema parsing failed',
53-
} satisfies NetworkErrorObject)
56+
error: parsedRes.error,
57+
})
5458
}
5559

5660
return parsedRes.data?.owner ?? null

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.jsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
12
import isNumber from 'lodash/isNumber'
23
import PropType from 'prop-types'
34
import { useParams } from 'react-router-dom'
45

5-
import { usePlanPageData } from 'pages/PlanPage/hooks'
6+
import { PlanPageDataQueryOpts } from 'pages/PlanPage/queries/PlanPageDataQueryOpts'
67
import {
78
planPropType,
89
TrialStatuses,
@@ -25,7 +26,9 @@ import PlanPricing from '../shared/PlanPricing'
2526

2627
function FreePlanCard({ plan, scheduledPhase }) {
2728
const { provider, owner } = useParams()
28-
const { data: ownerData } = usePlanPageData({ owner, provider })
29+
const { data: ownerData } = useSuspenseQueryV5(
30+
PlanPageDataQueryOpts({ owner, provider })
31+
)
2932
const { data: planData } = usePlanData({
3033
provider,
3134
owner,

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.test.jsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2+
import {
3+
QueryClientProvider as QueryClientProviderV5,
4+
QueryClient as QueryClientV5,
5+
} from '@tanstack/react-queryV5'
26
import { render, screen } from '@testing-library/react'
37
import { graphql, http, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
@@ -159,12 +163,17 @@ const queryClient = new QueryClient({
159163
defaultOptions: { queries: { retry: false, suspense: true } },
160164
})
161165

166+
const queryClientV5 = new QueryClientV5({
167+
defaultOptions: { queries: { retry: false } },
168+
})
169+
162170
beforeAll(() => {
163171
server.listen()
164172
})
165173

166174
afterEach(() => {
167175
queryClient.clear()
176+
queryClientV5.clear()
168177
server.resetHandlers()
169178
vi.resetAllMocks()
170179
})
@@ -174,13 +183,15 @@ afterAll(() => {
174183
})
175184

176185
const wrapper = ({ children }) => (
177-
<QueryClientProvider client={queryClient}>
178-
<MemoryRouter initialEntries={['/plan/bb/critical-role']}>
179-
<Route path="/plan/:provider/:owner">
180-
<Suspense fallback={<p>Loading</p>}>{children}</Suspense>
181-
</Route>
182-
</MemoryRouter>
183-
</QueryClientProvider>
186+
<QueryClientProviderV5 client={queryClientV5}>
187+
<QueryClientProvider client={queryClient}>
188+
<MemoryRouter initialEntries={['/plan/bb/critical-role']}>
189+
<Route path="/plan/:provider/:owner">
190+
<Suspense fallback={<p>Loading</p>}>{children}</Suspense>
191+
</Route>
192+
</MemoryRouter>
193+
</QueryClientProvider>
194+
</QueryClientProviderV5>
184195
)
185196

186197
describe('FreePlanCard', () => {

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2+
import {
3+
QueryClientProvider as QueryClientProviderV5,
4+
QueryClient as QueryClientV5,
5+
} from '@tanstack/react-queryV5'
26
import { render, screen } from '@testing-library/react'
37
import { graphql, http, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
9+
import { Suspense } from 'react'
510
import { MemoryRouter, Route } from 'react-router-dom'
611

712
import { Plan, PretrialPlan, TrialStatuses } from 'services/account'
@@ -66,23 +71,37 @@ const mockScheduleDetail = {
6671
const queryClient = new QueryClient({
6772
defaultOptions: { queries: { retry: false } },
6873
})
74+
const queryClientV5 = new QueryClientV5({
75+
defaultOptions: { queries: { retry: false } },
76+
})
6977

7078
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
71-
<QueryClientProvider client={queryClient}>
72-
<MemoryRouter initialEntries={['/plan/bb/critical-role']}>
73-
<Route path="/plan/:provider/:owner">{children}</Route>
74-
</MemoryRouter>
75-
</QueryClientProvider>
79+
<QueryClientProviderV5 client={queryClientV5}>
80+
<QueryClientProvider client={queryClient}>
81+
<Suspense fallback={null}>
82+
<MemoryRouter initialEntries={['/plan/bb/critical-role']}>
83+
<Route path="/plan/:provider/:owner">{children}</Route>
84+
</MemoryRouter>
85+
</Suspense>
86+
</QueryClientProvider>
87+
</QueryClientProviderV5>
7688
)
7789

7890
const server = setupServer()
7991

80-
beforeAll(() => server.listen())
92+
beforeAll(() => {
93+
server.listen()
94+
})
95+
8196
afterEach(() => {
8297
queryClient.clear()
98+
queryClientV5.clear()
8399
server.resetHandlers()
84100
})
85-
afterAll(() => server.close())
101+
102+
afterAll(() => {
103+
server.close()
104+
})
86105

87106
interface SetupArgs {
88107
hasScheduledDetails?: boolean

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
12
import isNumber from 'lodash/isNumber'
23
import { useParams } from 'react-router-dom'
34

4-
import { usePlanPageData } from 'pages/PlanPage/hooks'
5+
import { PlanPageDataQueryOpts } from 'pages/PlanPage/queries/PlanPageDataQueryOpts'
56
import { useAccountDetails, usePlanData } from 'services/account'
67
import BenefitList from 'shared/plan/BenefitList'
78
import ScheduledPlanDetails from 'shared/plan/ScheduledPlanDetails'
@@ -22,7 +23,9 @@ function PaidPlanCard() {
2223
provider,
2324
owner,
2425
})
25-
const { data: ownerData } = usePlanPageData({ owner, provider })
26+
const { data: ownerData } = useSuspenseQueryV5(
27+
PlanPageDataQueryOpts({ owner, provider })
28+
)
2629

2730
const scheduledPhase = accountDetails?.scheduleDetail?.scheduledPhase
2831
const plan = planData?.plan

0 commit comments

Comments
 (0)