chore: Migrate useCommitPageData to TSQ V5 (#3537)

Author: nsdeschenes

src/pages/CommitDetailPage/CommitBundleAnalysis/CommitBundleAnalysis.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 } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -127,23 +131,26 @@ const mockRepoOverview = ({
 })
 
 const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: { retry: false, suspense: true },
-  },
+  defaultOptions: { queries: { retry: false, suspense: true } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
 })
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter
-      initialEntries={[
-        '/gh/test-org/test-repo/commit/e736f78b3cb5c8abb1d6b2ec5e5102de455f98ed',
-      ]}
-    >
-      <Route path="/:provider/:owner/:repo/commit/:commit">
-        <Suspense fallback={<p>Loading...</p>}>{children}</Suspense>
-      </Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter
+        initialEntries={[
+          '/gh/test-org/test-repo/commit/e736f78b3cb5c8abb1d6b2ec5e5102de455f98ed',
+        ]}
+      >
+        <Route path="/:provider/:owner/:repo/commit/:commit">
+          <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 const server = setupServer()
@@ -153,6 +160,7 @@ beforeAll(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 

src/pages/CommitDetailPage/CommitBundleAnalysis/CommitBundleAnalysis.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, useCommitPageData } from '../hooks'
+import {
+  CommitPageDataQueryOpts,
+  TBundleAnalysisComparisonResult,
+} from '../queries/CommitPageDataQueryOpts'
 
 const CommitBundleAnalysisTable = lazy(
   () => import('./CommitBundleAnalysisTable')
@@ -63,12 +67,14 @@ const BundleContent: React.FC<BundleContentProps> = ({ bundleCompareType }) => {
 
 const CommitBundleAnalysis: React.FC = () => {
   const { provider, owner, repo, commit: commitSha } = useParams<URLParams>()
-  const { data: commitPageData } = useCommitPageData({
-    provider,
-    owner,
-    repo,
-    commitId: commitSha,
-  })
+  const { data: commitPageData } = useSuspenseQueryV5(
+    CommitPageDataQueryOpts({
+      provider,
+      owner,
+      repo,
+      commitId: commitSha,
+    })
+  )
 
   const bundleCompareType =
     commitPageData?.commit?.bundleAnalysis?.bundleAnalysisCompareWithParent

src/pages/CommitDetailPage/CommitCoverage/CommitCoverage.jsx

@@ -1,3 +1,4 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import isEmpty from 'lodash/isEmpty'
 import { lazy, Suspense } from 'react'
 import { Redirect, Switch, useParams } from 'react-router-dom'
@@ -22,7 +23,7 @@ import ErroredUploads from './ErroredUploads'
 import FirstPullBanner from './FirstPullBanner'
 import YamlErrorBanner from './YamlErrorBanner'
 
-import { useCommitPageData } from '../hooks'
+import { CommitPageDataQueryOpts } from '../queries/CommitPageDataQueryOpts'
 
 const CommitDetailFileExplorer = lazy(
   () => import('./routes/CommitDetailFileExplorer')
@@ -45,12 +46,14 @@ function CommitRoutes() {
   const { provider, owner, repo, commit: commitSha } = useParams()
   const { data: tierName } = useTier({ owner, provider })
   const { data: overview } = useRepoOverview({ provider, owner, repo })
-  const { data: commitPageData } = useCommitPageData({
-    provider,
-    owner,
-    repo,
-    commitId: commitSha,
-  })
+  const { data: commitPageData } = useSuspenseQueryV5(
+    CommitPageDataQueryOpts({
+      provider,
+      owner,
+      repo,
+      commitId: commitSha,
+    })
+  )
 
   const compareTypeName = commitPageData?.commit?.compareWithParent?.__typename
   const ErrorBannerComponent = (
@@ -174,12 +177,14 @@ function CommitCoverage() {
   const { data: tierName } = useTier({ owner, provider })
   const { data: overview } = useRepoOverview({ provider, owner, repo })
   const { data: rateLimit } = useRepoRateLimitStatus({ provider, owner, repo })
-  const { data: commitPageData } = useCommitPageData({
-    provider,
-    owner,
-    repo,
-    commitId: commitSha,
-  })
+  const { data: commitPageData } = useSuspenseQueryV5(
+    CommitPageDataQueryOpts({
+      provider,
+      owner,
+      repo,
+      commitId: commitSha,
+    })
+  )
 
   const showCommitSummary = !(overview.private && tierName === TierNames.TEAM)
   const showFirstPullBanner =