chore: Update usePullPageData to TSQ V5 (#3536)

codecov · Nov 29, 2024 · 67b950a · 67b950a
1 parent b2a584b
commit 67b950a
Show file tree

Hide file tree

Showing 16 changed files with 340 additions and 209 deletions.
diff --git a/src/pages/PullRequestPage/PullBundleAnalysis/PullBundleAnalysis.test.tsx b/src/pages/PullRequestPage/PullBundleAnalysis/PullBundleAnalysis.test.tsx
@@ -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,
@@ -11,7 +15,7 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import PullBundleAnalysis from './PullBundleAnalysis'
 
-import { TBundleAnalysisComparisonResult } from '../hooks'
+import { TBundleAnalysisComparisonResult } from '../queries/PullPageDataQueryOpts'
 
 vi.mock('./EmptyTable', () => ({
   default: () => <div>EmptyTable</div>,
@@ -106,24 +110,30 @@ const mockRepoOverview = ({
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false, suspense: true } },
 })
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 const server = setupServer()
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/gh/test-org/test-repo/pull/12']}>
-      <Route path="/:provider/:owner/:repo/pull/:pullId">
-        <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
-      </Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/gh/test-org/test-repo/pull/12']}>
+        <Route path="/:provider/:owner/:repo/pull/:pullId">
+          <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
   server.listen()
 })
 beforeEach(() => {
-  server.resetHandlers()
   queryClient.clear()
+  queryClientV5.clear()
+  server.resetHandlers()
 })
 afterAll(() => {
   server.close()

diff --git a/src/pages/PullRequestPage/PullBundleAnalysis/PullBundleAnalysis.tsx b/src/pages/PullRequestPage/PullBundleAnalysis/PullBundleAnalysis.tsx
@@ -1,3 +1,4 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import { lazy, Suspense } from 'react'
 import { useParams } from 'react-router-dom'
 
@@ -9,7 +10,10 @@ import BundleMessage from './BundleMessage'
 import EmptyTable from './EmptyTable'
 import FirstPullBanner from './FirstPullBanner'
 
-import { TBundleAnalysisComparisonResult, usePullPageData } from '../hooks'
+import {
+  PullPageDataQueryOpts,
+  TBundleAnalysisComparisonResult,
+} from '../queries/PullPageDataQueryOpts'
 
 const PullBundleComparisonTable = lazy(
   () => import('./PullBundleComparisonTable')
@@ -82,13 +86,15 @@ const PullBundleAnalysis: React.FC = () => {
   const { provider, owner, repo, pullId } = useParams<URLParams>()
 
   // we can set team plan true here because we don't care about the fields it will skip - tho we should really stop doing this and just return null on the API if they're on a team plan so we can save on requests made
-  const { data } = usePullPageData({
-    provider,
-    owner,
-    repo,
-    pullId,
-    isTeamPlan: true,
-  })
+  const { data } = useSuspenseQueryV5(
+    PullPageDataQueryOpts({
+      provider,
+      owner,
+      repo,
+      pullId,
+      isTeamPlan: true,
+    })
+  )
 
   const bundleCompareType =
     data?.pull?.bundleAnalysisCompareWithBase?.__typename

diff --git a/src/pages/PullRequestPage/PullCoverage/PullCoverage.jsx b/src/pages/PullRequestPage/PullCoverage/PullCoverage.jsx
@@ -1,3 +1,4 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import { lazy, Suspense } from 'react'
 import { Redirect, Switch, useParams } from 'react-router-dom'
 
@@ -14,7 +15,7 @@ import Spinner from 'ui/Spinner'
 import PullCoverageTabs from './PullCoverageTabs'
 import CompareSummarySkeleton from './Summary/CompareSummary/CompareSummarySkeleton'
 
-import { usePullPageData } from '../hooks'
+import { PullPageDataQueryOpts } from '../queries/PullPageDataQueryOpts'
 
 const CompareSummary = lazy(() => import('./Summary'))
 const FirstPullBanner = lazy(() => import('./FirstPullBanner'))
@@ -40,13 +41,15 @@ function PullCoverageContent() {
 
   const isTeamPlan = tierData === TierNames.TEAM && overview?.private
 
-  const { data } = usePullPageData({
-    provider,
-    owner,
-    repo,
-    pullId,
-    isTeamPlan,
-  })
+  const { data } = useSuspenseQueryV5(
+    PullPageDataQueryOpts({
+      provider,
+      owner,
+      repo,
+      pullId,
+      isTeamPlan,
+    })
+  )
 
   const resultType = data?.pull?.compareWithBase?.__typename
 
@@ -129,13 +132,15 @@ function PullCoverage() {
 
   const isTeamPlan = tierData === TierNames.TEAM && overview?.private
 
-  const { data } = usePullPageData({
-    provider,
-    owner,
-    repo,
-    pullId,
-    isTeamPlan,
-  })
+  const { data } = useSuspenseQueryV5(
+    PullPageDataQueryOpts({
+      provider,
+      owner,
+      repo,
+      pullId,
+      isTeamPlan,
+    })
+  )
 
   return (
     <div className="mx-4 flex flex-col gap-4 md:mx-0">

diff --git a/src/pages/PullRequestPage/PullCoverage/PullCoverage.test.jsx b/src/pages/PullRequestPage/PullCoverage/PullCoverage.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 } 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 { TierNames } from 'services/tier'
@@ -168,35 +173,41 @@ const mockRepoRateLimitStatus = ({ isGithubRateLimited = false }) => ({
   },
 })
 
+const server = setupServer()
 const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false, suspense: true } },
+})
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
 
 const wrapper =
   (initialEntries = '/gh/codecov/test-repo/pull/1') =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[initialEntries]}>
-        <Route
-          path={[
-            '/:provider/:owner/:repo/pull/:pullId/blob/:path+',
-            '/:provider/:owner/:repo/pull/:pullId/tree/:path+',
-            '/:provider/:owner/:repo/pull/:pullId/tree/',
-            '/:provider/:owner/:repo/pull/:pullId',
-          ]}
-        >
-          {children}
-        </Route>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route
+            path={[
+              '/:provider/:owner/:repo/pull/:pullId/blob/:path+',
+              '/:provider/:owner/:repo/pull/:pullId/tree/:path+',
+              '/:provider/:owner/:repo/pull/:pullId/tree/',
+              '/:provider/:owner/:repo/pull/:pullId',
+            ]}
+          >
+            <Suspense fallback={<div>Loading</div>}>{children}</Suspense>
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 beforeAll(() => {
   server.listen()
 })
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 afterAll(() => {

diff --git a/src/pages/PullRequestPage/PullCoverage/PullCoverageTabs/PullCoverageTabs.jsx b/src/pages/PullRequestPage/PullCoverage/PullCoverageTabs/PullCoverageTabs.jsx
@@ -9,7 +9,7 @@ import { useRepoOverview } from 'services/repo'
 import { TierNames, useTier } from 'services/tier'
 import TabNavigation from 'ui/TabNavigation'
 
-import { useTabsCounts } from './hooks'
+import { useTabsCounts } from './useTabsCounts'
 
 function PullCoverageTabs() {
   const { provider, owner, repo, pullId } = useParams()

diff --git a/src/pages/PullRequestPage/PullCoverage/PullCoverageTabs/PullCoverageTabs.test.jsx b/src/pages/PullRequestPage/PullCoverage/PullCoverageTabs/PullCoverageTabs.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 } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -147,35 +151,41 @@ const mockBackfillResponse = {
   },
 }
 
+const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
 const wrapper =
   (initialEntries = '/gh/codecov/test-repo/pull/1') =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[initialEntries]}>
-        <Route
-          path={[
-            '/:provider/:owner/:repo/pull/:pullId',
-            '/:provider/:owner/:repo/pull/:pullId/tree',
-            '/:provider/:owner/:repo/pull/:pullId/tree/:path+',
-            '/:provider/:owner/:repo/pull/:pullId/blob/:path+',
-          ]}
-        >
-          {children}
-        </Route>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route
+            path={[
+              '/:provider/:owner/:repo/pull/:pullId',
+              '/:provider/:owner/:repo/pull/:pullId/tree',
+              '/:provider/:owner/:repo/pull/:pullId/tree/:path+',
+              '/:provider/:owner/:repo/pull/:pullId/blob/:path+',
+            ]}
+          >
+            {children}
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 beforeAll(() => {
   server.listen()
 })
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 afterAll(() => {

diff --git a/src/pages/PullRequestPage/PullCoverage/PullCoverageTabs/hooks/index.ts b/src/pages/PullRequestPage/PullCoverage/PullCoverageTabs/hooks/index.ts