Skip to content

Commit 382246a

Browse files
nsdeschenesnsdeschenes
authored
ref: Migrate useRepoConfigurationStatus to TS Query V5 (#3618)
1 parent 0922fa3 commit 382246a

File tree

4 files changed

+95
-68
lines changed

4 files changed

+95
-68
lines changed

‎src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.test.tsx

Lines changed: 17 additions & 11 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'
@@ -7,7 +11,7 @@ import { MemoryRouter, Route } from 'react-router'
711
import { TierNames, TTierNames } from 'services/tier'
812

913
import ConfigurationManager from './ConfigurationManager'
10-
import { RepositoryConfiguration } from './hooks/useRepoConfigurationStatus/useRepoConfigurationStatus'
14+
import { RepositoryConfiguration } from './hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts'
1115

1216
interface mockRepoConfigArgs {
1317
tierName?: TTierNames
@@ -52,26 +56,28 @@ function mockRepoConfig({
5256
}
5357

5458
const queryClient = new QueryClient({
55-
defaultOptions: {
56-
queries: {
57-
retry: false,
58-
},
59-
},
59+
defaultOptions: { queries: { retry: false } },
60+
})
61+
const queryClientV5 = new QueryClientV5({
62+
defaultOptions: { queries: { retry: false } },
6063
})
6164
const server = setupServer()
6265
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
63-
<QueryClientProvider client={queryClient}>
64-
<MemoryRouter initialEntries={['/gh/codecov/cool-repo/config']}>
65-
<Route path="/:provider/:owner/:repo/config">{children}</Route>
66-
</MemoryRouter>
67-
</QueryClientProvider>
66+
<QueryClientProviderV5 client={queryClientV5}>
67+
<QueryClientProvider client={queryClient}>
68+
<MemoryRouter initialEntries={['/gh/codecov/cool-repo/config']}>
69+
<Route path="/:provider/:owner/:repo/config">{children}</Route>
70+
</MemoryRouter>
71+
</QueryClientProvider>
72+
</QueryClientProviderV5>
6873
)
6974

7075
beforeAll(() => {
7176
server.listen()
7277
})
7378
afterEach(() => {
7479
queryClient.clear()
80+
queryClientV5.clear()
7581
server.resetHandlers()
7682
})
7783
afterAll(() => {

‎src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
12
import { useParams } from 'react-router'
23

34
import { TierNames } from 'services/tier'
45

56
import FeatureGroup from './components/FeatureGroup'
67
import FeatureItem from './components/FeatureItem/FeatureItem'
78
import {
9+
RepoConfigurationStatusQueryOpts,
810
RepositoryConfiguration,
9-
useRepoConfigurationStatus,
10-
} from './hooks/useRepoConfigurationStatus/useRepoConfigurationStatus'
11+
} from './hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts'
1112

1213
interface URLParams {
1314
provider: string
@@ -17,11 +18,13 @@ interface URLParams {
1718

1819
function ConfigurationManager() {
1920
const { provider, owner, repo } = useParams<URLParams>()
20-
const { data: repoConfiguration } = useRepoConfigurationStatus({
21-
provider,
22-
owner,
23-
repo,
24-
})
21+
const { data: repoConfiguration } = useSuspenseQueryV5(
22+
RepoConfigurationStatusQueryOpts({
23+
provider,
24+
owner,
25+
repo,
26+
})
27+
)
2528

2629
return (
2730
<div className="flex flex-col gap-6 lg:w-3/4">

‎src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/useRepoConfigurationStatus.test.tsx renamed to ‎src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts.test.tsx

Lines changed: 50 additions & 34 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 { useRepoConfigurationStatus } from './useRepoConfigurationStatus'
10+
import { RepoConfigurationStatusQueryOpts } from './RepoConfigurationStatusQueryOpts'
711

812
const mockRepoNotFound = {
913
owner: {
@@ -49,20 +53,22 @@ const mockGoodResponse = {
4953
},
5054
}
5155

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

5761
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
58-
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
62+
<QueryClientProviderV5 client={queryClientV5}>
63+
{children}
64+
</QueryClientProviderV5>
5965
)
6066

6167
beforeAll(() => {
6268
server.listen()
6369
})
6470
afterEach(() => {
65-
queryClient.clear()
71+
queryClientV5.clear()
6672
server.resetHandlers()
6773
})
6874
afterAll(() => {
@@ -76,7 +82,7 @@ interface SetupArgs {
7682
nullOwner?: boolean
7783
}
7884

79-
describe('useRepoConfigurationStatus', () => {
85+
describe('RepoConfigurationStatusQueryOpts', () => {
8086
function setup({
8187
badResponse = false,
8288
repoNotFound = false,
@@ -104,11 +110,13 @@ describe('useRepoConfigurationStatus', () => {
104110
console.error = () => {}
105111
const { result } = renderHook(
106112
() =>
107-
useRepoConfigurationStatus({
108-
provider: 'gh',
109-
owner: 'codecov',
110-
repo: 'cool-repo',
111-
}),
113+
useQueryV5(
114+
RepoConfigurationStatusQueryOpts({
115+
provider: 'gh',
116+
owner: 'codecov',
117+
repo: 'cool-repo',
118+
})
119+
),
112120
{ wrapper }
113121
)
114122

@@ -118,7 +126,7 @@ describe('useRepoConfigurationStatus', () => {
118126
expect(result.current.failureReason).toMatchObject({
119127
status: 404,
120128
data: {},
121-
dev: 'useRepoConfigurationStatus - 404 Failed to parse data',
129+
dev: 'RepoConfigurationStatusQueryOpts - 404 Failed to parse data',
122130
})
123131
)
124132
})
@@ -128,11 +136,13 @@ describe('useRepoConfigurationStatus', () => {
128136
console.error = () => {}
129137
const { result } = renderHook(
130138
() =>
131-
useRepoConfigurationStatus({
132-
provider: 'gh',
133-
owner: 'codecov',
134-
repo: 'cool-repo',
135-
}),
139+
useQueryV5(
140+
RepoConfigurationStatusQueryOpts({
141+
provider: 'gh',
142+
owner: 'codecov',
143+
repo: 'cool-repo',
144+
})
145+
),
136146
{ wrapper }
137147
)
138148

@@ -142,7 +152,7 @@ describe('useRepoConfigurationStatus', () => {
142152
expect(result.current.failureReason).toMatchObject({
143153
status: 404,
144154
data: {},
145-
dev: 'useRepoConfigurationStatus - 404 Not found error',
155+
dev: 'RepoConfigurationStatusQueryOpts - 404 Not found error',
146156
})
147157
)
148158
})
@@ -152,11 +162,13 @@ describe('useRepoConfigurationStatus', () => {
152162
console.error = () => {}
153163
const { result } = renderHook(
154164
() =>
155-
useRepoConfigurationStatus({
156-
provider: 'gh',
157-
owner: 'codecov',
158-
repo: 'cool-repo',
159-
}),
165+
useQueryV5(
166+
RepoConfigurationStatusQueryOpts({
167+
provider: 'gh',
168+
owner: 'codecov',
169+
repo: 'cool-repo',
170+
})
171+
),
160172
{ wrapper }
161173
)
162174

@@ -166,7 +178,7 @@ describe('useRepoConfigurationStatus', () => {
166178
expect(result.current.failureReason).toMatchObject({
167179
status: 403,
168180
data: {},
169-
dev: 'useRepoConfigurationStatus - 403 Owner not activated error',
181+
dev: 'RepoConfigurationStatusQueryOpts - 403 Owner not activated error',
170182
})
171183
)
172184
})
@@ -175,11 +187,13 @@ describe('useRepoConfigurationStatus', () => {
175187
setup({ nullOwner: true })
176188
const { result } = renderHook(
177189
() =>
178-
useRepoConfigurationStatus({
179-
provider: 'gh',
180-
owner: 'codecov',
181-
repo: 'cool-repo',
182-
}),
190+
useQueryV5(
191+
RepoConfigurationStatusQueryOpts({
192+
provider: 'gh',
193+
owner: 'codecov',
194+
repo: 'cool-repo',
195+
})
196+
),
183197
{ wrapper }
184198
)
185199

@@ -197,11 +211,13 @@ describe('useRepoConfigurationStatus', () => {
197211
setup({})
198212
const { result } = renderHook(
199213
() =>
200-
useRepoConfigurationStatus({
201-
provider: 'gh',
202-
owner: 'codecov',
203-
repo: 'cool-repo',
204-
}),
214+
useQueryV5(
215+
RepoConfigurationStatusQueryOpts({
216+
provider: 'gh',
217+
owner: 'codecov',
218+
repo: 'cool-repo',
219+
})
220+
),
205221
{ wrapper }
206222
)
207223

‎src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/useRepoConfigurationStatus.tsx renamed to ‎src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts.tsx

Lines changed: 18 additions & 16 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 {
@@ -7,7 +7,7 @@ import {
77
} from 'services/repo'
88
import { TierNames } from 'services/tier'
99
import Api from 'shared/api/api'
10-
import { NetworkErrorObject } from 'shared/api/helpers'
10+
import { rejectNetworkError } from 'shared/api/helpers'
1111
import A from 'ui/A'
1212

1313
const RepositorySchema = z.object({
@@ -51,7 +51,8 @@ const RequestSchema = z.object({
5151
.nullable(),
5252
})
5353

54-
const query = `query GetRepoConfigurationStatus($owner: String!, $repo: String!){
54+
const query = `
55+
query GetRepoConfigurationStatus($owner: String!, $repo: String!) {
5556
owner(username: $owner) {
5657
plan {
5758
tierName
@@ -79,18 +80,18 @@ const query = `query GetRepoConfigurationStatus($owner: String!, $repo: String!)
7980
}
8081
}`
8182

82-
interface UseRepoConfigurationStatusArgs {
83+
interface RepoConfigurationStatusQueryArgs {
8384
provider: string
8485
owner: string
8586
repo: string
8687
}
8788

88-
export function useRepoConfigurationStatus({
89+
export function RepoConfigurationStatusQueryOpts({
8990
provider,
9091
owner,
9192
repo,
92-
}: UseRepoConfigurationStatusArgs) {
93-
return useQuery({
93+
}: RepoConfigurationStatusQueryArgs) {
94+
return queryOptionsV5({
9495
queryKey: ['GetRepoConfigurationStatus', provider, owner, repo],
9596
queryFn: ({ signal }) => {
9697
return Api.graphql({
@@ -105,25 +106,26 @@ export function useRepoConfigurationStatus({
105106
const parsedRes = RequestSchema.safeParse(res?.data)
106107

107108
if (!parsedRes.success) {
108-
return Promise.reject({
109+
return rejectNetworkError({
109110
status: 404,
110111
data: {},
111-
dev: 'useRepoConfigurationStatus - 404 Failed to parse data',
112-
} satisfies NetworkErrorObject)
112+
dev: 'RepoConfigurationStatusQueryOpts - 404 Failed to parse data',
113+
error: parsedRes.error,
114+
})
113115
}
114116

115117
const data = parsedRes.data
116118

117119
if (data?.owner?.repository?.__typename === 'NotFoundError') {
118-
return Promise.reject({
120+
return rejectNetworkError({
119121
status: 404,
120122
data: {},
121-
dev: 'useRepoConfigurationStatus - 404 Not found error',
122-
} satisfies NetworkErrorObject)
123+
dev: 'RepoConfigurationStatusQueryOpts - 404 Not found error',
124+
})
123125
}
124126

125127
if (data?.owner?.repository?.__typename === 'OwnerNotActivatedError') {
126-
return Promise.reject({
128+
return rejectNetworkError({
127129
status: 403,
128130
data: {
129131
detail: (
@@ -135,8 +137,8 @@ export function useRepoConfigurationStatus({
135137
</p>
136138
),
137139
},
138-
dev: 'useRepoConfigurationStatus - 403 Owner not activated error',
139-
} satisfies NetworkErrorObject)
140+
dev: 'RepoConfigurationStatusQueryOpts - 403 Owner not activated error',
141+
})
140142
}
141143

142144
return {

0 commit comments

Comments
 (0)