diff --git a/src/pages/CommitDetailPage/Header/HeaderDefault/HeaderDefault.jsx b/src/pages/CommitDetailPage/Header/HeaderDefault/HeaderDefault.jsx
index 6d8eb08a41..d9adb34ddd 100644
--- a/src/pages/CommitDetailPage/Header/HeaderDefault/HeaderDefault.jsx
+++ b/src/pages/CommitDetailPage/Header/HeaderDefault/HeaderDefault.jsx
@@ -1,3 +1,4 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
import { useParams } from 'react-router-dom'
import { formatTimeToNow } from 'shared/utils/dates'
@@ -7,7 +8,7 @@ import CIStatusLabel from 'ui/CIStatus'
import Icon from 'ui/Icon'
import TruncatedMessage from 'ui/TruncatedMessage/TruncatedMessage'
-import { useCommitHeaderData } from './hooks'
+import { CommitHeaderDataQueryOpts } from './queries/CommitHeaderDataQueryOpts'
import PullLabel from '../PullLabel'
@@ -15,13 +16,14 @@ function HeaderDefault() {
const { provider, owner, repo, commit: commitSha } = useParams()
const shortSHA = commitSha?.slice(0, 7)
- const { data: headerData } = useCommitHeaderData({
- provider,
- owner,
- repo,
- commitId: commitSha,
- })
-
+ const { data: headerData } = useSuspenseQueryV5(
+ CommitHeaderDataQueryOpts({
+ provider,
+ owner,
+ repo,
+ commitId: commitSha,
+ })
+ )
const providerPullUrl = getProviderPullURL({
provider,
owner,
diff --git a/src/pages/CommitDetailPage/Header/HeaderDefault/HeaderDefault.test.jsx b/src/pages/CommitDetailPage/Header/HeaderDefault/HeaderDefault.test.jsx
index 173022a533..d62736af6f 100644
--- a/src/pages/CommitDetailPage/Header/HeaderDefault/HeaderDefault.test.jsx
+++ b/src/pages/CommitDetailPage/Header/HeaderDefault/HeaderDefault.test.jsx
@@ -1,7 +1,11 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+ QueryClientProvider as QueryClientProviderV5,
+ QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
import { render, screen, waitFor } from '@testing-library/react'
import { graphql, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
import { MemoryRouter, Route } from 'react-router-dom'
import { useTruncation } from 'ui/TruncatedMessage/hooks'
@@ -29,22 +33,24 @@ const mockData = (pullId = null) => ({
},
})
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
defaultOptions: { queries: { retry: false } },
})
const server = setupServer()
const wrapper = ({ children }) => (
-
+
- {children}
+
+ Loading}>{children}
+
-
+
)
beforeAll(() => server.listen())
afterEach(() => {
- queryClient.clear()
+ queryClientV5.clear()
server.resetHandlers()
})
afterAll(() => server.close())
@@ -117,8 +123,8 @@ describe('HeaderDefault', () => {
it('does not render the pull label', async () => {
render(, { wrapper })
- await waitFor(() => queryClient.isFetching)
- await waitFor(() => !queryClient.isFetching)
+ await waitFor(() => queryClientV5.isFetching)
+ await waitFor(() => !queryClientV5.isFetching)
const pullIcon = screen.queryByText(/pull-request-open.svg/)
expect(pullIcon).not.toBeInTheDocument()
diff --git a/src/pages/CommitDetailPage/Header/HeaderDefault/hooks/index.ts b/src/pages/CommitDetailPage/Header/HeaderDefault/hooks/index.ts
deleted file mode 100644
index 68d61e49c7..0000000000
--- a/src/pages/CommitDetailPage/Header/HeaderDefault/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useCommitHeaderData'
diff --git a/src/pages/CommitDetailPage/Header/HeaderDefault/hooks/useCommitHeaderData.test.tsx b/src/pages/CommitDetailPage/Header/HeaderDefault/queries/CommitHeaderDataQueryOpts.test.tsx
similarity index 80%
rename from src/pages/CommitDetailPage/Header/HeaderDefault/hooks/useCommitHeaderData.test.tsx
rename to src/pages/CommitDetailPage/Header/HeaderDefault/queries/CommitHeaderDataQueryOpts.test.tsx
index 03991d7f9e..c462b0463a 100644
--- a/src/pages/CommitDetailPage/Header/HeaderDefault/hooks/useCommitHeaderData.test.tsx
+++ b/src/pages/CommitDetailPage/Header/HeaderDefault/queries/CommitHeaderDataQueryOpts.test.tsx
@@ -1,9 +1,13 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+ QueryClientProvider as QueryClientProviderV5,
+ QueryClient as QueryClientV5,
+ useQuery as useQueryV5,
+} from '@tanstack/react-queryV5'
import { renderHook, waitFor } from '@testing-library/react'
import { graphql, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'
-import { useCommitHeaderData } from './useCommitHeaderData'
+import { CommitHeaderDataQueryOpts } from './CommitHeaderDataQueryOpts'
const mockRepository = {
owner: {
@@ -48,13 +52,15 @@ const mockNullOwner = {
const mockUnsuccessfulParseError = {}
-const queryClient = new QueryClient({
- defaultOptions: { queries: { retry: false, useErrorBoundary: false } },
+const queryClientV5 = new QueryClientV5({
+ defaultOptions: { queries: { retry: false } },
})
const server = setupServer()
const wrapper: React.FC = ({ children }) => (
- {children}
+
+ {children}
+
)
beforeAll(() => {
@@ -62,7 +68,7 @@ beforeAll(() => {
})
afterEach(() => {
- queryClient.clear()
+ queryClientV5.clear()
server.resetHandlers()
})
@@ -77,7 +83,7 @@ interface SetupArgs {
isNullOwner?: boolean
}
-describe('useCommitHeaderData', () => {
+describe('CommitHeaderDataQueryOpts', () => {
function setup({
isNotFoundError = false,
isOwnerNotActivatedError = false,
@@ -109,12 +115,14 @@ describe('useCommitHeaderData', () => {
const { result } = renderHook(
() =>
- useCommitHeaderData({
- provider: 'gh',
- owner: 'codecov',
- repo: 'test-repo',
- commitId: 'id-1',
- }),
+ useQueryV5(
+ CommitHeaderDataQueryOpts({
+ provider: 'gh',
+ owner: 'codecov',
+ repo: 'test-repo',
+ commitId: 'id-1',
+ })
+ ),
{ wrapper }
)
@@ -146,12 +154,14 @@ describe('useCommitHeaderData', () => {
const { result } = renderHook(
() =>
- useCommitHeaderData({
- provider: 'gh',
- owner: 'codecov',
- repo: 'test-repo',
- commitId: 'id-1',
- }),
+ useQueryV5(
+ CommitHeaderDataQueryOpts({
+ provider: 'gh',
+ owner: 'codecov',
+ repo: 'test-repo',
+ commitId: 'id-1',
+ })
+ ),
{ wrapper }
)
@@ -185,12 +195,14 @@ describe('useCommitHeaderData', () => {
const { result } = renderHook(
() =>
- useCommitHeaderData({
- provider: 'gh',
- owner: 'codecov',
- repo: 'test-repo',
- commitId: 'id-1',
- }),
+ useQueryV5(
+ CommitHeaderDataQueryOpts({
+ provider: 'gh',
+ owner: 'codecov',
+ repo: 'test-repo',
+ commitId: 'id-1',
+ })
+ ),
{ wrapper }
)
@@ -221,12 +233,14 @@ describe('useCommitHeaderData', () => {
const { result } = renderHook(
() =>
- useCommitHeaderData({
- provider: 'gh',
- owner: 'codecov',
- repo: 'test-repo',
- commitId: 'id-1',
- }),
+ useQueryV5(
+ CommitHeaderDataQueryOpts({
+ provider: 'gh',
+ owner: 'codecov',
+ repo: 'test-repo',
+ commitId: 'id-1',
+ })
+ ),
{ wrapper }
)
@@ -257,12 +271,14 @@ describe('useCommitHeaderData', () => {
const { result } = renderHook(
() =>
- useCommitHeaderData({
- provider: 'gh',
- owner: 'codecov',
- repo: 'test-repo',
- commitId: 'id-1',
- }),
+ useQueryV5(
+ CommitHeaderDataQueryOpts({
+ provider: 'gh',
+ owner: 'codecov',
+ repo: 'test-repo',
+ commitId: 'id-1',
+ })
+ ),
{ wrapper }
)
diff --git a/src/pages/CommitDetailPage/Header/HeaderDefault/hooks/useCommitHeaderData.tsx b/src/pages/CommitDetailPage/Header/HeaderDefault/queries/CommitHeaderDataQueryOpts.tsx
similarity index 82%
rename from src/pages/CommitDetailPage/Header/HeaderDefault/hooks/useCommitHeaderData.tsx
rename to src/pages/CommitDetailPage/Header/HeaderDefault/queries/CommitHeaderDataQueryOpts.tsx
index 4671c1bd44..8b21154240 100644
--- a/src/pages/CommitDetailPage/Header/HeaderDefault/hooks/useCommitHeaderData.tsx
+++ b/src/pages/CommitDetailPage/Header/HeaderDefault/queries/CommitHeaderDataQueryOpts.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
import { z } from 'zod'
import {
@@ -6,6 +6,7 @@ import {
RepoOwnerNotActivatedErrorSchema,
} from 'services/repo'
import Api from 'shared/api'
+import { rejectNetworkError } from 'shared/api/helpers'
import A from 'ui/A'
const RepositorySchema = z.object({
@@ -76,20 +77,20 @@ const query = `
}
`
-interface UseCommitHeaderDataArgs {
+interface CommitHeaderDataQueryArgs {
provider: string
owner: string
repo: string
commitId: string
}
-export const useCommitHeaderData = ({
+export const CommitHeaderDataQueryOpts = ({
provider,
owner,
repo,
commitId,
-}: UseCommitHeaderDataArgs) =>
- useQuery({
+}: CommitHeaderDataQueryArgs) =>
+ queryOptionsV5({
queryKey: ['CommitPageHeaderData', provider, owner, repo, commitId, query],
queryFn: ({ signal }) =>
Api.graphql({
@@ -106,23 +107,26 @@ export const useCommitHeaderData = ({
const parsedData = CommitHeaderDataSchema.safeParse(res?.data)
if (!parsedData.success) {
- return Promise.reject({
+ return rejectNetworkError({
status: 404,
data: {},
+ dev: 'CommitHeaderDataQueryOpts - 404 Failed to parse schema',
+ error: parsedData.error,
})
}
const data = parsedData.data
if (data?.owner?.repository?.__typename === 'NotFoundError') {
- return Promise.reject({
+ return rejectNetworkError({
status: 404,
data: {},
+ dev: 'CommitHeaderDataQueryOpts - 404 Not Found',
})
}
if (data?.owner?.repository?.__typename === 'OwnerNotActivatedError') {
- return Promise.reject({
+ return rejectNetworkError({
status: 403,
data: {
detail: (
@@ -134,6 +138,7 @@ export const useCommitHeaderData = ({
),
},
+ dev: 'CommitHeaderDataQueryOpts - 403 Owner Not Activated',
})
}