Skip to content

Commit 8e6e6b2

Browse files
nsdeschenesnsdeschenes
authored
chore: Migrate usePullHeadData to TS Query V5 (#3543)
1 parent 44255e7 commit 8e6e6b2

File tree

5 files changed

+83
-69
lines changed

5 files changed

+83
-69
lines changed

‎src/pages/PullRequestPage/Header/HeaderDefault/HeaderDefault.test.tsx

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
1+
import {
2+
QueryClientProvider as QueryClientProviderV5,
3+
QueryClient as QueryClientV5,
4+
} from '@tanstack/react-queryV5'
25
import { render, screen, waitFor } from '@testing-library/react'
36
import { graphql, HttpResponse } from 'msw'
47
import { setupServer } from 'msw/node'
8+
import { Suspense } from 'react'
59
import { MemoryRouter, Route } from 'react-router-dom'
610

711
import Header from './HeaderDefault'
@@ -33,24 +37,26 @@ const mockPullData = ({
3337
},
3438
})
3539

36-
const queryClient = new QueryClient({
40+
const queryClientV5 = new QueryClientV5({
3741
defaultOptions: { queries: { retry: false } },
3842
})
3943
const server = setupServer()
4044
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
41-
<QueryClientProvider client={queryClient}>
45+
<QueryClientProviderV5 client={queryClientV5}>
4246
<MemoryRouter initialEntries={['/gh/test-org/test-repo/pull/12']}>
43-
<Route path="/:provider/:owner/:repo/pull/:pullId">{children}</Route>
47+
<Route path="/:provider/:owner/:repo/pull/:pullId">
48+
<Suspense fallback={<div>Loading</div>}>{children}</Suspense>
49+
</Route>
4450
</MemoryRouter>
45-
</QueryClientProvider>
51+
</QueryClientProviderV5>
4652
)
4753

4854
beforeAll(() => {
4955
server.listen()
5056
})
5157

5258
afterEach(() => {
53-
queryClient.clear()
59+
queryClientV5.clear()
5460
server.resetHandlers()
5561
})
5662

@@ -133,8 +139,8 @@ describe('Header', () => {
133139
setup({ nullPull: true })
134140
render(<Header />, { wrapper })
135141

136-
await waitFor(() => queryClient.isFetching)
137-
await waitFor(() => !queryClient.isFetching)
142+
await waitFor(() => queryClientV5.isFetching)
143+
await waitFor(() => !queryClientV5.isFetching)
138144

139145
const open = screen.queryByText(/open/i)
140146
expect(open).not.toBeInTheDocument()

‎src/pages/PullRequestPage/Header/HeaderDefault/HeaderDefault.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import cs from 'classnames'
1+
import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
22
import capitalize from 'lodash/capitalize'
33
import { useParams } from 'react-router-dom'
44

55
import { Provider } from 'shared/api/helpers'
6+
import { cn } from 'shared/utils/cn'
67
import { formatTimeToNow } from 'shared/utils/dates'
78
import { getProviderPullURL } from 'shared/utils/provider'
89
import A from 'ui/A'
910
import CIStatusLabel from 'ui/CIStatus'
1011
import Icon from 'ui/Icon'
1112

12-
import { usePullHeadData } from './hooks'
13+
import { PullHeadDataQueryOpts } from './queries/PullHeadDataQueryOpts'
1314

1415
import { pullStateToColor } from '../constants'
1516

@@ -22,7 +23,9 @@ interface URLParams {
2223

2324
function HeaderDefault() {
2425
const { provider, owner, repo, pullId } = useParams<URLParams>()
25-
const { data } = usePullHeadData({ provider, owner, repo, pullId })
26+
const { data } = useSuspenseQueryV5(
27+
PullHeadDataQueryOpts({ provider, owner, repo, pullId })
28+
)
2629

2730
const pull = data?.pull
2831

@@ -33,8 +36,8 @@ function HeaderDefault() {
3336
{pull?.title}
3437
{pull?.state ? (
3538
<span
36-
className={cs(
37-
'text-white font-bold px-3 py-0.5 text-xs rounded',
39+
className={cn(
40+
'rounded px-3 py-0.5 text-xs font-bold text-white',
3841
pullStateToColor[pull?.state]
3942
)}
4043
>

‎src/pages/PullRequestPage/Header/HeaderDefault/hooks/index.ts

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

‎src/pages/PullRequestPage/Header/HeaderDefault/hooks/usePullHeadData.test.tsx renamed to ‎src/pages/PullRequestPage/Header/HeaderDefault/queries/PullHeadDataQueryOpts.test.tsx

Lines changed: 56 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
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

6-
import { usePullHeadData } from './usePullHeadData'
10+
import { PullHeadDataQueryOpts } from './PullHeadDataQueryOpts'
711

812
const mockPullData = {
913
owner: {
@@ -50,21 +54,23 @@ const mockNullOwner = {
5054

5155
const mockUnsuccessfulParseError = {}
5256

53-
const queryClient = new QueryClient({
57+
const queryClientV5 = new QueryClientV5({
5458
defaultOptions: { queries: { retry: false } },
5559
})
5660
const server = setupServer()
5761

5862
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
59-
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
63+
<QueryClientProviderV5 client={queryClientV5}>
64+
{children}
65+
</QueryClientProviderV5>
6066
)
6167

6268
beforeAll(() => {
6369
server.listen()
6470
})
6571

6672
afterEach(() => {
67-
queryClient.clear()
73+
queryClientV5.clear()
6874
server.resetHandlers()
6975
})
7076

@@ -110,15 +116,15 @@ describe('usePullHeadData', () => {
110116
setup({})
111117
const { result } = renderHook(
112118
() =>
113-
usePullHeadData({
114-
provider: 'gh',
115-
owner: 'codecov',
116-
repo: 'cool-repo',
117-
pullId: '1',
118-
}),
119-
{
120-
wrapper,
121-
}
119+
useQueryV5(
120+
PullHeadDataQueryOpts({
121+
provider: 'gh',
122+
owner: 'codecov',
123+
repo: 'cool-repo',
124+
pullId: '1',
125+
})
126+
),
127+
{ wrapper }
122128
)
123129

124130
await waitFor(() => result.current.isLoading)
@@ -149,15 +155,15 @@ describe('usePullHeadData', () => {
149155
setup({ isNullOwner: true })
150156
const { result } = renderHook(
151157
() =>
152-
usePullHeadData({
153-
provider: 'gh',
154-
owner: 'codecov',
155-
repo: 'cool-repo',
156-
pullId: '1',
157-
}),
158-
{
159-
wrapper,
160-
}
158+
useQueryV5(
159+
PullHeadDataQueryOpts({
160+
provider: 'gh',
161+
owner: 'codecov',
162+
repo: 'cool-repo',
163+
pullId: '1',
164+
})
165+
),
166+
{ wrapper }
161167
)
162168

163169
await waitFor(() => result.current.isLoading)
@@ -188,15 +194,15 @@ describe('usePullHeadData', () => {
188194

189195
const { result } = renderHook(
190196
() =>
191-
usePullHeadData({
192-
provider: 'gh',
193-
owner: 'codecov',
194-
repo: 'cool-repo',
195-
pullId: '1',
196-
}),
197-
{
198-
wrapper,
199-
}
197+
useQueryV5(
198+
PullHeadDataQueryOpts({
199+
provider: 'gh',
200+
owner: 'codecov',
201+
repo: 'cool-repo',
202+
pullId: '1',
203+
})
204+
),
205+
{ wrapper }
200206
)
201207

202208
await waitFor(() => expect(result.current.isError).toBeTruthy())
@@ -225,15 +231,15 @@ describe('usePullHeadData', () => {
225231
setup({ isOwnerNotActivatedError: true })
226232
const { result } = renderHook(
227233
() =>
228-
usePullHeadData({
229-
provider: 'gh',
230-
owner: 'codecov',
231-
repo: 'cool-repo',
232-
pullId: '1',
233-
}),
234-
{
235-
wrapper,
236-
}
234+
useQueryV5(
235+
PullHeadDataQueryOpts({
236+
provider: 'gh',
237+
owner: 'codecov',
238+
repo: 'cool-repo',
239+
pullId: '1',
240+
})
241+
),
242+
{ wrapper }
237243
)
238244

239245
await waitFor(() => expect(result.current.isError).toBeTruthy())
@@ -262,15 +268,15 @@ describe('usePullHeadData', () => {
262268
setup({ isUnsuccessfulParseError: true })
263269
const { result } = renderHook(
264270
() =>
265-
usePullHeadData({
266-
provider: 'gh',
267-
owner: 'codecov',
268-
repo: 'cool-repo',
269-
pullId: '1',
270-
}),
271-
{
272-
wrapper,
273-
}
271+
useQueryV5(
272+
PullHeadDataQueryOpts({
273+
provider: 'gh',
274+
owner: 'codecov',
275+
repo: 'cool-repo',
276+
pullId: '1',
277+
})
278+
),
279+
{ wrapper }
274280
)
275281

276282
await waitFor(() => expect(result.current.isError).toBeTruthy())

‎src/pages/PullRequestPage/Header/HeaderDefault/hooks/usePullHeadData.tsx renamed to ‎src/pages/PullRequestPage/Header/HeaderDefault/queries/PullHeadDataQueryOpts.tsx

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

44
import {
@@ -80,20 +80,20 @@ const query = `
8080
}
8181
`
8282

83-
interface UsePullHeadDataArgs {
83+
interface PullHeadDataQueryArgs {
8484
provider: string
8585
owner: string
8686
repo: string
8787
pullId: string
8888
}
8989

90-
export const usePullHeadData = ({
90+
export const PullHeadDataQueryOpts = ({
9191
provider,
9292
owner,
9393
repo,
9494
pullId,
95-
}: UsePullHeadDataArgs) =>
96-
useQuery({
95+
}: PullHeadDataQueryArgs) =>
96+
queryOptionsV5({
9797
queryKey: ['PullHeader', provider, owner, repo, pullId, query],
9898
queryFn: ({ signal }) =>
9999
Api.graphql({

0 commit comments

Comments
 (0)