ref: Migrate useBranchCoverageMeasurements to TSQ V5

src/pages/RepoPage/CoverageTab/OverviewTab/Summary/CoverageTrend/CoverageTrend.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'
@@ -77,15 +81,20 @@ const server = setupServer()
 const queryClient = new QueryClient({
   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']}>
-      <Route path="/:provider/:owner/:repo">
-        <Suspense fallback={null}>{children}</Suspense>
-      </Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/gh/test-org/test-repo']}>
+        <Route path="/:provider/:owner/:repo">
+          <Suspense fallback={null}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
@@ -94,6 +103,7 @@ beforeAll(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 

src/pages/RepoPage/CoverageTab/OverviewTab/Summary/CoverageTrend/CoverageTrend.tsx

@@ -1,3 +1,4 @@
+import { keepPreviousData } from '@tanstack/react-queryV5'
 import { useParams } from 'react-router-dom'
 
 import { useBranches } from 'services/branches'
@@ -30,23 +31,19 @@ function CoverageTrend() {
     defaultBranch: overview?.defaultBranch ?? '',
   })
 
-  const { data, isLoading } = useRepoCoverageTimeseries({
+  const { data, isPending, isSuccess } = useRepoCoverageTimeseries({
     branch: selection?.name,
-    options: {
-      enabled: !!selection?.name,
-      suspense: false,
-      keepPreviousData: true,
-    },
+    options: { enabled: !!selection?.name, placeholderData: keepPreviousData },
   })
 
   return (
     <SummaryField>
       <TrendDropdown />
       <div className="flex items-center gap-2 pb-[1.3rem]">
         {/* ^ CSS doesn't want to render like the others without a p tag in the dom. */}
-        {isLoading ? (
+        {isPending ? (
           <Spinner />
-        ) : data?.measurements?.length > 0 ? (
+        ) : isSuccess && data.measurements.length > 0 ? (
           <TotalsNumber value={data?.coverageChange ?? 0} light showChange />
         ) : (
           <p className="text-sm font-medium">

src/pages/RepoPage/CoverageTab/OverviewTab/hooks/useRepoCoverageTimeseries.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 { renderHook, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -58,14 +62,20 @@ const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
 const wrapper =
   (searchParams = ''): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[`/gh/caleb/mighty-nein${searchParams}`]}>
-        <Route path="/:provider/:owner/:repo">{children}</Route>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[`/gh/caleb/mighty-nein${searchParams}`]}>
+          <Route path="/:provider/:owner/:repo">{children}</Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 beforeAll(() => {
@@ -74,6 +84,7 @@ beforeAll(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 
@@ -89,7 +100,9 @@ describe('useRepoCoverageTimeseries', () => {
   const config = vi.fn()
 
   function setup(
-    { noCoverageData = false }: SetupArgs = { noCoverageData: false }
+    { noCoverageData = false }: SetupArgs = {
+      noCoverageData: false,
+    }
   ) {
     server.use(
       graphql.query('GetRepoOverview', () => {
@@ -147,26 +160,19 @@ describe('useRepoCoverageTimeseries', () => {
     })
   })
 
-  describe('with no coverage data', () => {
-    it('returns an empty array', async () => {
-      setup({ noCoverageData: true })
-      const { result } = renderHook(
-        () => useRepoCoverageTimeseries({ branch: 'c3' }),
-        { wrapper: wrapper('') }
-      )
-
-      await waitFor(() => expect(result.current.data?.measurements).toEqual([]))
-    })
-
-    it('returns 0 for coverage change', async () => {
+  describe('with null coverage data', () => {
+    it('returns measurements with 0 for coverage', async () => {
       setup({ noCoverageData: true })
       const { result } = renderHook(
         () => useRepoCoverageTimeseries({ branch: 'c3' }),
         { wrapper: wrapper('') }
       )
 
       await waitFor(() =>
-        expect(result.current.data?.coverageChange).toEqual(0)
+        expect(result.current.data?.measurements).toEqual([
+          { coverage: 0, date: new Date('2023-01-01T00:00:00.000Z') },
+          { coverage: 0, date: new Date('2023-01-02T00:00:00.000Z') },
+        ])
       )
     })
   })

src/pages/RepoPage/CoverageTab/OverviewTab/hooks/useRepoCoverageTimeseries.ts

@@ -1,7 +1,11 @@
+import {
+  keepPreviousData,
+  useQuery as useQueryV5,
+} from '@tanstack/react-queryV5'
 import { useMemo } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { useBranchCoverageMeasurements } from 'services/charts/useBranchCoverageMeasurements'
+import { BranchCoverageMeasurementsQueryOpts } from 'services/charts/BranchCoverageMeasurementsQueryOpts'
 import { useLocationParams } from 'services/navigation'
 import { useRepoOverview } from 'services/repo'
 import {
@@ -21,8 +25,7 @@ interface UseRepoCoverageTimeseriesArgs {
   branch: string
   options?: {
     enabled?: boolean
-    suspense?: boolean
-    keepPreviousData?: boolean
+    placeholderData?: typeof keepPreviousData
   }
 }
 
@@ -49,59 +52,42 @@ export function useRepoCoverageTimeseries({
     return createTimeSeriesQueryVars({ trend, oldestCommit, today })
   }, [overview?.oldestCommitAt, params?.trend, today])
 
-  const { data, ...rest } = useBranchCoverageMeasurements({
-    provider,
-    owner,
-    repo,
-    branch,
-    after: queryVars?.after,
-    before: today,
-    interval: queryVars.interval,
-    opts: {
-      enabled: !!overview?.oldestCommitAt,
-      staleTime: 30000,
-      keepPreviousData: false,
-      suspense: false,
-      ...options,
-    },
-  })
-
-  return useMemo(() => {
-    let coverage = []
-
-    if (!data?.measurements) {
-      return {
-        ...rest,
-        data: { measurements: [] },
+  return useQueryV5({
+    ...BranchCoverageMeasurementsQueryOpts({
+      provider,
+      owner,
+      repo,
+      branch,
+      after: queryVars?.after,
+      before: today,
+      interval: queryVars.interval,
+    }),
+    select: (data) => {
+      let coverage = []
+      if (data.measurements?.[0]?.max === null) {
+        data.measurements[0].max = 0
       }
-    }
 
-    if (data?.measurements?.[0]?.max === null) {
-      data.measurements[0].max = 0
-    }
+      // set set initial coverage percentage
+      let prevPercent = data?.measurements?.[0]?.max ?? 0
+      coverage = data?.measurements?.map((measurement) => {
+        const coverage = measurement?.max ?? prevPercent
 
-    // set set initial t
-    let prevPercent = data?.measurements?.[0]?.max ?? 0
-    coverage = data?.measurements?.map((measurement) => {
-      const coverage = measurement?.max ?? prevPercent
+        // can save on a few reassignments
+        if (prevPercent !== coverage) {
+          prevPercent = coverage
+        }
 
-      // can save on a few reassignments
-      if (prevPercent !== coverage) {
-        prevPercent = coverage
-      }
-
-      return {
-        date: new Date(measurement?.timestamp),
-        coverage,
-      }
-    })
+        return { date: new Date(measurement?.timestamp), coverage }
+      })
 
-    const coverageChange =
-      (coverage.at(-1)?.coverage ?? 0) - (coverage.at(0)?.coverage ?? 0)
+      const coverageChange =
+        (coverage.at(-1)?.coverage ?? 0) - (coverage.at(0)?.coverage ?? 0)
 
-    return {
-      ...rest,
-      data: { measurements: coverage, coverageChange },
-    }
-  }, [data, rest])
+      return { measurements: coverage, coverageChange }
+    },
+    enabled: !!overview?.oldestCommitAt,
+    staleTime: 30000,
+    ...options,
+  })
 }

src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/CoverageChart.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, within } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -26,21 +30,27 @@ vi.mock('recharts', async () => {
   }
 })
 
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
 const wrapper =
   (
     initialEntries = ['/gh/codecov/bells-hells/tree/main']
   ): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={initialEntries}>
-        <Route path="/:provider/:owner/:repo">{children}</Route>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Route path="/:provider/:owner/:repo">{children}</Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false } },
-})
 const server = setupServer()
 
 beforeAll(() => {
@@ -73,6 +83,7 @@ beforeEach(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 

src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/CoverageChart.tsx

@@ -1,3 +1,4 @@
+import { keepPreviousData } from '@tanstack/react-queryV5'
 import { format } from 'date-fns'
 import { useParams } from 'react-router-dom'
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
@@ -43,17 +44,16 @@ function CoverageChart() {
     defaultBranch: overview?.defaultBranch ?? '',
   })
 
-  const { data, isPreviousData, isLoading, isError } =
+  const { data, isPlaceholderData, isPending, isError } =
     useRepoCoverageTimeseries({
       branch: selection?.name,
       options: {
         enabled: !!selection?.name,
-        suspense: false,
-        keepPreviousData: true,
+        placeholderData: keepPreviousData,
       },
     })
 
-  if (!isPreviousData && isLoading) {
+  if (!isPlaceholderData && isPending) {
     return <Placeholder />
   }
 
@@ -65,7 +65,7 @@ function CoverageChart() {
     )
   }
 
-  if (data?.measurements.length < 1) {
+  if (!isPending && data?.measurements?.length < 1) {
     return (
       <div className="flex min-h-[250px] items-center justify-center xl:min-h-[380px]">
         <p className="text-center">