chore: Migrate useCommitHeaderData to TS Query V5 (#3548)

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,21 +8,22 @@ 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'
 
 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,

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 }) => (
-  <QueryClientProvider client={queryClient}>
+  <QueryClientProviderV5 client={queryClientV5}>
     <MemoryRouter initialEntries={['/gh/codecov/test-repo/commit/id-1']}>
-      <Route path="/:provider/:owner/:repo/commit/:commit">{children}</Route>
+      <Route path="/:provider/:owner/:repo/commit/:commit">
+        <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
+      </Route>
     </MemoryRouter>
-  </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 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(<HeaderDefault />, { 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()

src/pages/CommitDetailPage/Header/HeaderDefault/hooks/useCommitHeaderData.test.tsx → 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,21 +52,23 @@ 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<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    {children}
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
   server.listen()
 })
 
 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 }
         )
 

src/pages/CommitDetailPage/Header/HeaderDefault/hooks/useCommitHeaderData.tsx → src/pages/CommitDetailPage/Header/HeaderDefault/queries/CommitHeaderDataQueryOpts.tsx

@@ -1,11 +1,12 @@
-import { useQuery } from '@tanstack/react-query'
+import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import {
   RepoNotFoundErrorSchema,
   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 = ({
                 </p>
               ),
             },
+            dev: 'CommitHeaderDataQueryOpts - 403 Owner Not Activated',
           })
         }