update use of hook into query

Author: nicholas-codecov

src/pages/CommitDetailPage/Header/HeaderTeam/HeaderTeam.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'
@@ -8,20 +9,22 @@ import Icon from 'ui/Icon'
 import TotalsNumber from 'ui/TotalsNumber'
 import TruncatedMessage from 'ui/TruncatedMessage/TruncatedMessage'
 
-import { useCommitHeaderDataTeam } from './hooks'
+import { CommitHeaderDataTeamQueryOpts } from './queries/CommitHeaderDataTeamQueryOpts'
 
 import PullLabel from '../PullLabel'
 
 function HeaderTeam() {
   const { provider, owner, repo, commit: commitSha } = useParams()
   const shortSHA = commitSha?.slice(0, 7)
 
-  const { data: headerData } = useCommitHeaderDataTeam({
-    provider,
-    owner,
-    repo,
-    commitId: commitSha,
-  })
+  const { data: headerData } = useSuspenseQueryV5(
+    CommitHeaderDataTeamQueryOpts({
+      provider,
+      owner,
+      repo,
+      commitId: commitSha,
+    })
+  )
   const commit = headerData?.commit
 
   const providerPullUrl = getProviderPullURL({

src/pages/CommitDetailPage/Header/HeaderTeam/HeaderTeam.test.jsx

@@ -1,7 +1,12 @@
 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 HeaderTeam from './HeaderTeam'
@@ -43,25 +48,39 @@ const mockData = (pullId = null) => ({
   },
 })
 
+const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
 const wrapper = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/gh/codecov/test-repo/commit/id-1']}>
-      <Route path="/:provider/:owner/:repo/commit/:commit">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/gh/codecov/test-repo/commit/id-1']}>
+        <Route path="/:provider/:owner/:repo/commit/:commit">
+          <Suspense fallback={<div>Loading</div>}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
-beforeAll(() => server.listen())
+beforeAll(() => {
+  server.listen()
+})
+
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 describe('HeaderTeam', () => {
   function setup(pullId = 1234) {