chore: Migrate usePullHeadDataTeam to TS Query V5 (#3544)

Author: nsdeschenes

src/pages/PullRequestPage/Header/HeaderTeam/HeaderTeam.test.tsx

@@ -1,4 +1,7 @@
-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'
@@ -39,24 +42,24 @@ const mockPullData = ({
   },
 })
 
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 const server = setupServer()
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
+  <QueryClientProviderV5 client={queryClientV5}>
     <MemoryRouter initialEntries={['/gh/test-org/test-repo/pull/12']}>
       <Route path="/:provider/:owner/:repo/pull/:pullId">{children}</Route>
     </MemoryRouter>
-  </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
   server.listen()
 })
 
 afterEach(() => {
-  queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 
@@ -138,8 +141,8 @@ describe('Header', () => {
         setup({ nullPull: true })
         render(<Header />, { wrapper })
 
-        await waitFor(() => queryClient.isFetching)
-        await waitFor(() => !queryClient.isFetching)
+        await waitFor(() => queryClientV5.isFetching)
+        await waitFor(() => !queryClientV5.isFetching)
 
         const open = screen.queryByText(/open/i)
         expect(open).not.toBeInTheDocument()

src/pages/PullRequestPage/Header/HeaderTeam/HeaderTeam.tsx

@@ -1,16 +1,17 @@
-import cs from 'classnames'
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import capitalize from 'lodash/capitalize'
 import { useParams } from 'react-router-dom'
 
 import { Provider } from 'shared/api/helpers'
+import { cn } from 'shared/utils/cn'
 import { formatTimeToNow } from 'shared/utils/dates'
 import { getProviderPullURL } from 'shared/utils/provider'
 import A from 'ui/A'
 import CIStatusLabel from 'ui/CIStatus'
 import Icon from 'ui/Icon'
 import TotalsNumber from 'ui/TotalsNumber'
 
-import { usePullHeadDataTeam } from './hooks'
+import { PullHeadDataTeamQueryOpts } from './queries/PullHeadDataTeamQueryOpts'
 
 import { pullStateToColor } from '../constants'
 
@@ -23,7 +24,9 @@ interface URLParams {
 
 function HeaderTeam() {
   const { provider, owner, repo, pullId } = useParams<URLParams>()
-  const { data } = usePullHeadDataTeam({ provider, owner, repo, pullId })
+  const { data } = useSuspenseQueryV5(
+    PullHeadDataTeamQueryOpts({ provider, owner, repo, pullId })
+  )
 
   const pull = data?.pull
   let percentCovered = null
@@ -39,8 +42,8 @@ function HeaderTeam() {
             {pull?.title}
             {pull?.state ? (
               <span
-                className={cs(
-                  'text-white font-bold px-3 py-0.5 text-xs rounded',
+                className={cn(
+                  'rounded px-3 py-0.5 text-xs font-bold text-white',
                   pullStateToColor[pull?.state]
                 )}
               >

src/pages/PullRequestPage/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 { usePullHeadDataTeam } from './usePullHeadDataTeam'
+import { PullHeadDataTeamQueryOpts } from './PullHeadDataTeamQueryOpts'
 
 const mockPullData = {
   owner: {
@@ -56,21 +60,23 @@ const mockNullOwner = {
 
 const mockUnsuccessfulParseError = {}
 
-const queryClient = new QueryClient({
+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()
 })
 
@@ -116,15 +122,15 @@ describe('usePullHeadDataTeam', () => {
           setup({})
           const { result } = renderHook(
             () =>
-              usePullHeadDataTeam({
-                provider: 'gh',
-                owner: 'codecov',
-                repo: 'cool-repo',
-                pullId: '1',
-              }),
-            {
-              wrapper,
-            }
+              useQueryV5(
+                PullHeadDataTeamQueryOpts({
+                  provider: 'gh',
+                  owner: 'codecov',
+                  repo: 'cool-repo',
+                  pullId: '1',
+                })
+              ),
+            { wrapper }
           )
 
           await waitFor(() => result.current.isLoading)
@@ -161,15 +167,15 @@ describe('usePullHeadDataTeam', () => {
           setup({ isNullOwner: true })
           const { result } = renderHook(
             () =>
-              usePullHeadDataTeam({
-                provider: 'gh',
-                owner: 'codecov',
-                repo: 'cool-repo',
-                pullId: '1',
-              }),
-            {
-              wrapper,
-            }
+              useQueryV5(
+                PullHeadDataTeamQueryOpts({
+                  provider: 'gh',
+                  owner: 'codecov',
+                  repo: 'cool-repo',
+                  pullId: '1',
+                })
+              ),
+            { wrapper }
           )
 
           await waitFor(() => result.current.isLoading)
@@ -200,15 +206,15 @@ describe('usePullHeadDataTeam', () => {
 
         const { result } = renderHook(
           () =>
-            usePullHeadDataTeam({
-              provider: 'gh',
-              owner: 'codecov',
-              repo: 'cool-repo',
-              pullId: '1',
-            }),
-          {
-            wrapper,
-          }
+            useQueryV5(
+              PullHeadDataTeamQueryOpts({
+                provider: 'gh',
+                owner: 'codecov',
+                repo: 'cool-repo',
+                pullId: '1',
+              })
+            ),
+          { wrapper }
         )
 
         await waitFor(() => expect(result.current.isError).toBeTruthy())
@@ -237,15 +243,15 @@ describe('usePullHeadDataTeam', () => {
         setup({ isOwnerNotActivatedError: true })
         const { result } = renderHook(
           () =>
-            usePullHeadDataTeam({
-              provider: 'gh',
-              owner: 'codecov',
-              repo: 'cool-repo',
-              pullId: '1',
-            }),
-          {
-            wrapper,
-          }
+            useQueryV5(
+              PullHeadDataTeamQueryOpts({
+                provider: 'gh',
+                owner: 'codecov',
+                repo: 'cool-repo',
+                pullId: '1',
+              })
+            ),
+          { wrapper }
         )
 
         await waitFor(() => expect(result.current.isError).toBeTruthy())
@@ -274,15 +280,15 @@ describe('usePullHeadDataTeam', () => {
         setup({ isUnsuccessfulParseError: true })
         const { result } = renderHook(
           () =>
-            usePullHeadDataTeam({
-              provider: 'gh',
-              owner: 'codecov',
-              repo: 'cool-repo',
-              pullId: '1',
-            }),
-          {
-            wrapper,
-          }
+            useQueryV5(
+              PullHeadDataTeamQueryOpts({
+                provider: 'gh',
+                owner: 'codecov',
+                repo: 'cool-repo',
+                pullId: '1',
+              })
+            ),
+          { wrapper }
         )
 
         await waitFor(() => expect(result.current.isError).toBeTruthy())

src/pages/PullRequestPage/Header/HeaderTeam/hooks/usePullHeadDataTeam.test.tsx renamed to src/pages/PullRequestPage/Header/HeaderTeam/queries/PullHeadDataTeamQueryOpts.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 {
@@ -134,20 +134,20 @@ const query = `
   }
 `
 
-interface UsePullHeadDataTeamArgs {
+interface PullHeadDataTeamQueryArgs {
   provider: string
   owner: string
   repo: string
   pullId: string
 }
 
-export const usePullHeadDataTeam = ({
+export const PullHeadDataTeamQueryOpts = ({
   provider,
   owner,
   repo,
   pullId,
-}: UsePullHeadDataTeamArgs) =>
-  useQuery({
+}: PullHeadDataTeamQueryArgs) =>
+  queryOptionsV5({
     queryKey: ['PullHeaderTeam', provider, owner, repo, pullId, query],
     queryFn: ({ signal }) =>
       Api.graphql({