Skip to content

Commit aa0c312

Browse files
nsdeschenesnsdeschenes
authored
feat: Migrate bundle analysis services to Query V5 (#3430)
1 parent 2a65caa commit aa0c312

33 files changed

+902
-780
lines changed

‎src/App.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ describe('App', () => {
230230
return HttpResponse.json({ data: mockRepoOverview })
231231
}),
232232
graphql.query('GetUploadTokenRequired', (info) => {
233-
return HttpResponse.json({ data: {} })
233+
return HttpResponse.json({ data: { owner: null } })
234234
})
235235
)
236236
}

‎src/pages/RepoPage/BundlesTab/BundleContent/AssetsTable/AssetsTable.test.tsx

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
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, within } from '@testing-library/react'
37
import { userEvent } from '@testing-library/user-event'
48
import { graphql, HttpResponse } from 'msw'
59
import { setupServer } from 'msw/node'
10+
import { Suspense } from 'react'
611
import { mockIsIntersecting } from 'react-intersection-observer/test-utils'
712
import { MemoryRouter, Route } from 'react-router-dom'
813

@@ -167,23 +172,26 @@ const mockRepoOverview = {
167172

168173
const server = setupServer()
169174
const queryClient = new QueryClient({
170-
defaultOptions: {
171-
queries: {
172-
retry: false,
173-
},
174-
},
175+
defaultOptions: { queries: { retry: false } },
176+
})
177+
const queryClientV5 = new QueryClientV5({
178+
defaultOptions: { queries: { retry: false } },
175179
})
176180

177181
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
178-
<QueryClientProvider client={queryClient}>
179-
<MemoryRouter
180-
initialEntries={['/gh/codecov/test-repo/bundles/test-branch/test-bundle']}
181-
>
182-
<Route path="/:provider/:owner/:repo/bundles/:branch/:bundle">
183-
{children}
184-
</Route>
185-
</MemoryRouter>
186-
</QueryClientProvider>
182+
<QueryClientProviderV5 client={queryClientV5}>
183+
<QueryClientProvider client={queryClient}>
184+
<MemoryRouter
185+
initialEntries={[
186+
'/gh/codecov/test-repo/bundles/test-branch/test-bundle',
187+
]}
188+
>
189+
<Route path="/:provider/:owner/:repo/bundles/:branch/:bundle">
190+
<Suspense fallback={<div>Loading</div>}>{children}</Suspense>
191+
</Route>
192+
</MemoryRouter>
193+
</QueryClientProvider>
194+
</QueryClientProviderV5>
187195
)
188196

189197
beforeAll(() => {
@@ -192,6 +200,7 @@ beforeAll(() => {
192200

193201
afterEach(() => {
194202
queryClient.clear()
203+
queryClientV5.clear()
195204
server.resetHandlers()
196205
})
197206

‎src/pages/RepoPage/BundlesTab/BundleContent/AssetsTable/AssetsTable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ const createColumns = (totalBundleSize: number | null) => [
161161
/>{' '}
162162
<ChangeOverTime
163163
change={value?.change?.size.uncompress}
164-
hasMeasurements={value.measurements.length > 0 ?? false}
164+
hasMeasurements={value.measurements.length > 0}
165165
/>
166166
</>
167167
)

‎src/pages/RepoPage/BundlesTab/BundleContent/AssetsTable/ModulesTable.test.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
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 } from '@testing-library/react'
36
import { graphql, HttpResponse } from 'msw'
47
import { setupServer } from 'msw/node'
@@ -63,33 +66,28 @@ const mockMissingHeadReport = {
6366
}
6467

6568
const server = setupServer()
66-
const queryClient = new QueryClient({
67-
defaultOptions: {
68-
queries: {
69-
retry: false,
70-
suspense: true,
71-
},
72-
},
69+
const queryClientV5 = new QueryClientV5({
70+
defaultOptions: { queries: { retry: false } },
7371
})
7472

7573
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
76-
<QueryClientProvider client={queryClient}>
74+
<QueryClientProviderV5 client={queryClientV5}>
7775
<MemoryRouter
7876
initialEntries={['/gh/codecov/test-repo/bundles/test-branch/test-bundle']}
7977
>
8078
<Route path="/:provider/:owner/:repo/bundles/:branch/:bundle">
8179
<Suspense fallback={<p>Loading</p>}>{children}</Suspense>
8280
</Route>
8381
</MemoryRouter>
84-
</QueryClientProvider>
82+
</QueryClientProviderV5>
8583
)
8684

8785
beforeAll(() => {
8886
server.listen()
8987
})
9088

9189
afterEach(() => {
92-
queryClient.clear()
90+
queryClientV5.clear()
9391
server.resetHandlers()
9492
})
9593

‎src/pages/RepoPage/BundlesTab/BundleContent/AssetsTable/ModulesTable.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import cs from 'classnames'
99
import { useMemo, useState } from 'react'
1010
import { useParams } from 'react-router-dom'
1111

12-
import { useBundleAssetModules } from 'services/bundleAnalysis'
12+
import { useBundleAssetModules } from 'services/bundleAnalysis/useBundleAssetModules'
1313
import {
1414
formatSizeToString,
1515
formatTimeToString,
@@ -78,7 +78,6 @@ const ModulesTable: React.FC<ModulesTableProps> = ({ asset }) => {
7878
branch,
7979
bundle,
8080
asset,
81-
opts: { enabled: bundle !== '' },
8281
})
8382

8483
const tableData = useMemo(() => {

‎src/pages/RepoPage/BundlesTab/BundleContent/AssetsTable/useBundleAssetsTable.test.tsx

Lines changed: 21 additions & 16 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 { renderHook, waitFor } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
@@ -86,25 +90,26 @@ const mockedBundleAssets = {
8690

8791
const initialEntry = '/gh/codecov/test-repo/bundles/test-branch/test-bundle'
8892
const queryClient = new QueryClient({
89-
defaultOptions: {
90-
queries: {
91-
retry: false,
92-
suspense: true,
93-
},
94-
},
93+
defaultOptions: { queries: { retry: false, suspense: true } },
9594
})
95+
const queryClientV5 = new QueryClientV5({
96+
defaultOptions: { queries: { retry: false } },
97+
})
98+
9699
const wrapper =
97100
(initialEntries = initialEntry): React.FC<React.PropsWithChildren> =>
98101
({ children }) => (
99-
<QueryClientProvider client={queryClient}>
100-
<Suspense>
101-
<MemoryRouter initialEntries={[initialEntries]}>
102-
<Route path={'/:provider/:owner/:repo/bundles/:branch/:bundle'}>
103-
{children}
104-
</Route>
105-
</MemoryRouter>
106-
</Suspense>
107-
</QueryClientProvider>
102+
<QueryClientProviderV5 client={queryClientV5}>
103+
<QueryClientProvider client={queryClient}>
104+
<Suspense>
105+
<MemoryRouter initialEntries={[initialEntries]}>
106+
<Route path={'/:provider/:owner/:repo/bundles/:branch/:bundle'}>
107+
{children}
108+
</Route>
109+
</MemoryRouter>
110+
</Suspense>
111+
</QueryClientProvider>
112+
</QueryClientProviderV5>
108113
)
109114

110115
const server = setupServer()
@@ -155,7 +160,7 @@ describe('useBundleAssetsTable', () => {
155160
)
156161

157162
const expectedResult = {
158-
pageParams: [undefined],
163+
pageParams: [''],
159164
pages: [
160165
{
161166
assets: [

‎src/pages/RepoPage/BundlesTab/BundleContent/BundleChart/BundleChart.test.tsx

Lines changed: 20 additions & 9 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, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
@@ -108,16 +112,22 @@ const mockBundleTrendData = {
108112
const queryClient = new QueryClient({
109113
defaultOptions: { queries: { suspense: true, retry: false } },
110114
})
115+
const queryClientV5 = new QueryClientV5({
116+
defaultOptions: { queries: { retry: false } },
117+
})
118+
111119
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
112-
<QueryClientProvider client={queryClient}>
113-
<MemoryRouter
114-
initialEntries={['/gh/codecov/test-repo/bundles/main/test-bundle']}
115-
>
116-
<Route path="/:provider/:owner/:repo/bundles/:branch/:bundle">
117-
<Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
118-
</Route>
119-
</MemoryRouter>
120-
</QueryClientProvider>
120+
<QueryClientProviderV5 client={queryClientV5}>
121+
<QueryClientProvider client={queryClient}>
122+
<MemoryRouter
123+
initialEntries={['/gh/codecov/test-repo/bundles/main/test-bundle']}
124+
>
125+
<Route path="/:provider/:owner/:repo/bundles/:branch/:bundle">
126+
<Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
127+
</Route>
128+
</MemoryRouter>
129+
</QueryClientProvider>
130+
</QueryClientProviderV5>
121131
)
122132

123133
const server = setupServer()
@@ -128,6 +138,7 @@ beforeAll(() => {
128138

129139
afterEach(() => {
130140
queryClient.clear()
141+
queryClientV5.clear()
131142
server.resetHandlers()
132143
})
133144

‎src/pages/RepoPage/BundlesTab/BundleContent/BundleChart/useBundleChartData.test.tsx

Lines changed: 21 additions & 8 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 { renderHook, waitFor } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
@@ -103,17 +107,25 @@ const mockBundleTrendData = {
103107
}
104108

105109
const initialEntries = '/gh/codecov/test-repo/bundles/main/test-bundle'
106-
const queryClient = new QueryClient()
110+
const queryClient = new QueryClient({
111+
defaultOptions: { queries: { retry: false } },
112+
})
113+
const queryClientV5 = new QueryClientV5({
114+
defaultOptions: { queries: { retry: false } },
115+
})
116+
107117
const wrapper =
108118
(entries = initialEntries): React.FC<React.PropsWithChildren> =>
109119
({ children }) => (
110-
<QueryClientProvider client={queryClient}>
111-
<MemoryRouter initialEntries={[entries]}>
112-
<Route path="/:provider/:owner/:repo/bundles/:branch/:bundle">
113-
{children}
114-
</Route>
115-
</MemoryRouter>
116-
</QueryClientProvider>
120+
<QueryClientProviderV5 client={queryClientV5}>
121+
<QueryClientProvider client={queryClient}>
122+
<MemoryRouter initialEntries={[entries]}>
123+
<Route path="/:provider/:owner/:repo/bundles/:branch/:bundle">
124+
{children}
125+
</Route>
126+
</MemoryRouter>
127+
</QueryClientProvider>
128+
</QueryClientProviderV5>
117129
)
118130

119131
const server = setupServer()
@@ -124,6 +136,7 @@ beforeAll(() => {
124136

125137
afterEach(() => {
126138
queryClient.clear()
139+
queryClientV5.clear()
127140
server.resetHandlers()
128141
})
129142

‎src/pages/RepoPage/BundlesTab/BundleContent/BundleChart/useBundleChartData.ts

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import { useQuery as useQueryV5 } from '@tanstack/react-queryV5'
12
import { useMemo, useRef } from 'react'
23

3-
import { useBundleTrendData } from 'services/bundleAnalysis'
4-
import { BUNDLE_TREND_REPORT_TYPES } from 'services/bundleAnalysis/useBundleTrendData'
4+
import {
5+
BUNDLE_TREND_REPORT_TYPES,
6+
BundleTrendDataQueryOpts,
7+
} from 'services/bundleAnalysis/BundleTrendDataQueryOpts'
58
import { useLocationParams } from 'services/navigation'
69
import { useRepoOverview } from 'services/repo'
710
import { findBundleMultiplier } from 'shared/utils/bundleAnalysis'
@@ -65,23 +68,24 @@ export function useBundleChartData({
6568
'UNKNOWN_SIZE',
6669
]
6770

68-
const { data: trendData, isLoading } = useBundleTrendData({
69-
provider,
70-
owner,
71-
repo,
72-
branch,
73-
bundle,
74-
interval: queryVars.interval,
75-
after: queryVars.after,
76-
before: queryVars.before,
77-
// this will be replaced once we have filtering by types implemented
78-
filters: {
79-
assetTypes: assetTypes,
80-
// temp removing while we don't have filtering by types implemented
81-
// loadTypes: loadTypes,
82-
},
71+
const { data: trendData, isLoading } = useQueryV5({
72+
...BundleTrendDataQueryOpts({
73+
provider,
74+
owner,
75+
repo,
76+
branch,
77+
bundle,
78+
interval: queryVars.interval,
79+
after: queryVars.after,
80+
before: queryVars.before,
81+
// this will be replaced once we have filtering by types implemented
82+
filters: {
83+
assetTypes: assetTypes,
84+
// temp removing while we don't have filtering by types implemented
85+
// loadTypes: loadTypes,
86+
},
87+
}),
8388
enabled: !!overview?.oldestCommitAt,
84-
suspense: false,
8589
})
8690

8791
const mergedData = useMemo(() => {

0 commit comments

Comments
 (0)