chore: Migrate useComponentComparison to TS Query V5 (#3539)

src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.test.jsx

@@ -1,4 +1,8 @@
 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'
@@ -10,31 +14,23 @@ vi.mock('./ComponentsNotConfigured', () => ({
   default: () => 'ComponentsNotConfigured',
 }))
 
-const queryClient = new QueryClient()
-const server = setupServer()
-
-const wrapper =
-  (initialEntries = '/gh/codecov/gazebo/pull/123/components') =>
-  ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[initialEntries]}>
-        <Route path="/:provider/:owner/:repo/pull/:pullId/components">
-          {children}
-        </Route>
-      </MemoryRouter>
-    </QueryClientProvider>
-  )
-
-beforeAll(() => {
-  server.listen()
-})
-afterEach(() => {
-  queryClient.clear()
-  server.resetHandlers()
-})
-afterAll(() => {
-  server.close()
-})
+const mockPullComponentsResponse = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      pull: {
+        compareWithBase: {
+          __typename: 'Comparison',
+          componentComparisons: [
+            { name: 'component-1' },
+            { name: 'component-2' },
+            { name: 'component-3' },
+          ],
+        },
+      },
+    },
+  },
+}
 
 const mockPull = {
   owner: {
@@ -46,26 +42,52 @@ const mockPull = {
           componentComparisons: [
             {
               name: 'secondTest',
-              headTotals: {
-                percentCovered: 82.71,
-              },
-              baseTotals: {
-                percentCovered: 80.0,
-              },
-              patchTotals: {
-                percentCovered: 59.0,
-              },
+              headTotals: { percentCovered: 82.71 },
+              baseTotals: { percentCovered: 80.0 },
+              patchTotals: { percentCovered: 59.0 },
             },
           ],
         },
-        head: {
-          branchName: 'abc',
-        },
+        head: { branchName: 'abc' },
       },
     },
   },
 }
 
+const server = setupServer()
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
+const wrapper =
+  (initialEntries = '/gh/codecov/gazebo/pull/123/components') =>
+  ({ children }) => (
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route path="/:provider/:owner/:repo/pull/:pullId/components">
+            {children}
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
+  )
+
+beforeAll(() => {
+  server.listen()
+})
+afterEach(() => {
+  queryClient.clear()
+  queryClientV5.clear()
+  server.resetHandlers()
+})
+afterAll(() => {
+  server.close()
+})
+
 describe('ComponentsTable', () => {
   function setup(overrideData) {
     const componentsMock = vi.fn()
@@ -79,22 +101,19 @@ describe('ComponentsTable', () => {
         if (overrideData) {
           return HttpResponse.json({ data: overrideData })
         }
-
         return HttpResponse.json({ data: mockPull })
+      }),
+      graphql.query('PullComponentsSelector', () => {
+        return HttpResponse.json({ data: mockPullComponentsResponse })
       })
     )
 
     return { componentsMock }
   }
 
   describe('when there are no components in the new tab', () => {
-    beforeEach(() => {
-      setup({
-        owner: null,
-      })
-    })
-
     it('will render card with no dismiss button', async () => {
+      setup({ owner: null })
       render(<ComponentsTable />, { wrapper: wrapper() })
 
       const componentNotConfigured = await screen.findByText(
@@ -105,11 +124,8 @@ describe('ComponentsTable', () => {
   })
 
   describe('when rendered with populated data in the new tab', () => {
-    beforeEach(() => {
-      setup()
-    })
-
     it('shows title and body', async () => {
+      setup()
       render(<ComponentsTable />, { wrapper: wrapper() })
 
       const nameTableField = await screen.findByText(`Name`)
@@ -158,6 +174,7 @@ describe('ComponentsTable', () => {
 
   describe('when loading', () => {
     it('renders spinner', () => {
+      setup()
       render(<ComponentsTable />, { wrapper: wrapper() })
 
       const spinner = screen.getByTestId('spinner')

src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.tsx

@@ -1,3 +1,4 @@
+import { useQuery as useQueryV5 } from '@tanstack/react-queryV5'
 import {
   createColumnHelper,
   flexRender,
@@ -8,14 +9,17 @@ import cs from 'classnames'
 import isArray from 'lodash/isArray'
 import qs, { type ParsedQs } from 'qs'
 import { useMemo } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useParams } from 'react-router-dom'
 
 import A from 'ui/A'
 import Spinner from 'ui/Spinner'
 import TotalsNumber from 'ui/TotalsNumber'
 
 import ComponentsNotConfigured from './ComponentsNotConfigured'
-import { ComponentsComparison, useComponentComparison } from './hooks'
+import {
+  ComponentComparisonQueryOpts,
+  ComponentsComparison,
+} from './queries/ComponentComparisonQueryOpts'
 
 import ComponentsSelector from '../ComponentsSelector'
 
@@ -91,7 +95,15 @@ function getFilters({ components }: { components?: ParsedQs[] | string[] }) {
   }
 }
 
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+  pullId: string
+}
+
 export default function ComponentsTable() {
+  const { provider, owner, repo, pullId } = useParams<URLParams>()
   const location = useLocation()
   const queryParams = qs.parse(location.search, {
     ignoreQueryPrefix: true,
@@ -104,9 +116,15 @@ export default function ComponentsTable() {
   }
 
   const filters = getFilters({ components })
-  const { data, isLoading } = useComponentComparison({
-    filters,
-  })
+  const { data, isLoading } = useQueryV5(
+    ComponentComparisonQueryOpts({
+      provider,
+      owner,
+      repo,
+      pullId,
+      filters,
+    })
+  )
 
   const tableData = useMemo(() => {
     if (