chore: Migrate useCommitHeaderDataTeam to TS Query V5 (#3549)

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) {

src/pages/CommitDetailPage/Header/HeaderTeam/hooks/index.ts

@@ -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 { useCommitHeaderDataTeam } from './useCommitHeaderDataTeam'
+import { CommitHeaderDataTeamQueryOpts } from './CommitHeaderDataTeamQueryOpts'
 
 const mockRepository = {
   owner: {
@@ -54,21 +58,23 @@ const mockNullOwner = {
 
 const mockUnsuccessfulParseError = {}
 
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false, useErrorBoundary: false } },
-})
 const server = setupServer()
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
 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()
 })
 
@@ -83,7 +89,7 @@ interface SetupArgs {
   isNullOwner?: boolean
 }
 
-describe('useCommitHeaderDataTeam', () => {
+describe('CommitHeaderDataTeamQueryOpts', () => {
   function setup({
     isNotFoundError = false,
     isOwnerNotActivatedError = false,
@@ -115,12 +121,14 @@ describe('useCommitHeaderDataTeam', () => {
 
           const { result } = renderHook(
             () =>
-              useCommitHeaderDataTeam({
-                provider: 'gh',
-                owner: 'codecov',
-                repo: 'test-repo',
-                commitId: 'id-1',
-              }),
+              useQueryV5(
+                CommitHeaderDataTeamQueryOpts({
+                  provider: 'gh',
+                  owner: 'codecov',
+                  repo: 'test-repo',
+                  commitId: 'id-1',
+                })
+              ),
             { wrapper }
           )
 
@@ -158,12 +166,14 @@ describe('useCommitHeaderDataTeam', () => {
 
           const { result } = renderHook(
             () =>
-              useCommitHeaderDataTeam({
-                provider: 'gh',
-                owner: 'codecov',
-                repo: 'test-repo',
-                commitId: 'id-1',
-              }),
+              useQueryV5(
+                CommitHeaderDataTeamQueryOpts({
+                  provider: 'gh',
+                  owner: 'codecov',
+                  repo: 'test-repo',
+                  commitId: 'id-1',
+                })
+              ),
             { wrapper }
           )
 
@@ -197,12 +207,14 @@ describe('useCommitHeaderDataTeam', () => {
 
         const { result } = renderHook(
           () =>
-            useCommitHeaderDataTeam({
-              provider: 'gh',
-              owner: 'codecov',
-              repo: 'test-repo',
-              commitId: 'id-1',
-            }),
+            useQueryV5(
+              CommitHeaderDataTeamQueryOpts({
+                provider: 'gh',
+                owner: 'codecov',
+                repo: 'test-repo',
+                commitId: 'id-1',
+              })
+            ),
           { wrapper }
         )
 
@@ -233,12 +245,14 @@ describe('useCommitHeaderDataTeam', () => {
 
         const { result } = renderHook(
           () =>
-            useCommitHeaderDataTeam({
-              provider: 'gh',
-              owner: 'codecov',
-              repo: 'test-repo',
-              commitId: 'id-1',
-            }),
+            useQueryV5(
+              CommitHeaderDataTeamQueryOpts({
+                provider: 'gh',
+                owner: 'codecov',
+                repo: 'test-repo',
+                commitId: 'id-1',
+              })
+            ),
           { wrapper }
         )
 
@@ -269,12 +283,14 @@ describe('useCommitHeaderDataTeam', () => {
 
         const { result } = renderHook(
           () =>
-            useCommitHeaderDataTeam({
-              provider: 'gh',
-              owner: 'codecov',
-              repo: 'test-repo',
-              commitId: 'id-1',
-            }),
+            useQueryV5(
+              CommitHeaderDataTeamQueryOpts({
+                provider: 'gh',
+                owner: 'codecov',
+                repo: 'test-repo',
+                commitId: 'id-1',
+              })
+            ),
           { wrapper }
         )
 

src/pages/CommitDetailPage/Header/HeaderTeam/hooks/useCommitHeaderDataTeam.test.tsx src/pages/CommitDetailPage/Header/HeaderTeam/queries/CommitHeaderDataTeamQueryOpts.test.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import {
@@ -14,6 +14,7 @@ import {
   RepoOwnerNotActivatedErrorSchema,
 } from 'services/repo'
 import Api from 'shared/api'
+import { rejectNetworkError } from 'shared/api/helpers'
 import A from 'ui/A'
 
 const CoverageObjSchema = z.object({
@@ -130,20 +131,20 @@ const query = `
   }
 `
 
-interface UseCommitHeaderDataTeamArgs {
+interface CommitHeaderDataTeamQueryArgs {
   provider: string
   owner: string
   repo: string
   commitId: string
 }
 
-export const useCommitHeaderDataTeam = ({
+export const CommitHeaderDataTeamQueryOpts = ({
   provider,
   owner,
   repo,
   commitId,
-}: UseCommitHeaderDataTeamArgs) =>
-  useQuery({
+}: CommitHeaderDataTeamQueryArgs) =>
+  queryOptionsV5({
     queryKey: [
       'CommitPageHeaderDataTeam',
       provider,
@@ -167,23 +168,26 @@ export const useCommitHeaderDataTeam = ({
         const parsedData = CommitHeaderDataTeamSchema.safeParse(res?.data)
 
         if (!parsedData.success) {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 404,
             data: {},
+            dev: 'CommitHeaderDataTeamQueryOpts - 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: 'CommitHeaderDataTeamQueryOpts - 404 Not Found',
           })
         }
 
         if (data?.owner?.repository?.__typename === 'OwnerNotActivatedError') {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 403,
             data: {
               detail: (
@@ -195,6 +199,7 @@ export const useCommitHeaderDataTeam = ({
                 </p>
               ),
             },
+            dev: 'CommitHeaderDataTeamQueryOpts - 403 Owner Not Activated',
           })
         }