chore: Migrate usePlanPageData to TS Query V5 (#3567)

Author: nsdeschenes

src/pages/PlanPage/PlanPage.jsx

@@ -1,17 +1,18 @@
 import { Elements } from '@stripe/react-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import { lazy, Suspense } from 'react'
 import { Redirect, Switch, useParams } from 'react-router-dom'
 
 import config from 'config'
 
 import { SentryRoute } from 'sentry'
 
-import { usePlanPageData } from 'pages/PlanPage/hooks'
 import LoadingLogo from 'ui/LoadingLogo'
 
 import { PlanProvider } from './context'
 import PlanBreadcrumb from './PlanBreadcrumb'
+import { PlanPageDataQueryOpts } from './queries/PlanPageDataQueryOpts'
 import Tabs from './Tabs'
 
 const CancelPlanPage = lazy(() => import('./subRoutes/CancelPlanPage'))
@@ -33,7 +34,9 @@ const Loader = () => (
 
 function PlanPage() {
   const { owner, provider } = useParams()
-  const { data: ownerData } = usePlanPageData({ owner, provider })
+  const { data: ownerData } = useSuspenseQueryV5(
+    PlanPageDataQueryOpts({ owner, provider })
+  )
 
   if (config.IS_SELF_HOSTED || !ownerData?.isCurrentUserPartOfOrg) {
     return <Redirect to={`/${provider}/${owner}`} />

src/pages/PlanPage/PlanPage.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'
@@ -28,39 +32,40 @@ vi.mock('./subRoutes/UpgradePlanPage', () => ({
 
 const server = setupServer()
 const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-      suspense: true,
-    },
-  },
+  defaultOptions: { queries: { retry: false, suspense: true } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
 })
 
 let testLocation
 const wrapper =
   (initialEntries = '') =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[initialEntries]}>
-        <Route path="/plan/:provider/:owner">
-          <Suspense fallback={null}>{children}</Suspense>
-        </Route>
-        <Route
-          path="*"
-          render={({ location }) => {
-            testLocation = location
-            return null
-          }}
-        />
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <Suspense fallback={null}>
+          <MemoryRouter initialEntries={[initialEntries]}>
+            <Route path="/plan/:provider/:owner">{children}</Route>
+            <Route
+              path="*"
+              render={({ location }) => {
+                testLocation = location
+                return null
+              }}
+            />
+          </MemoryRouter>
+        </Suspense>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 beforeAll(() => {
   server.listen()
 })
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
   vi.resetAllMocks()
 })

src/pages/PlanPage/hooks/index.ts

@@ -1,37 +1,49 @@
-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 { MemoryRouter, Route } from 'react-router-dom'
 import { type MockInstance } from 'vitest'
 
-import { usePlanPageData } from './usePlanPageData'
+import { PlanPageDataQueryOpts } from './PlanPageDataQueryOpts'
 
 const mockOwner = {
   username: 'cool-user',
   isCurrentUserPartOfOrg: true,
   numberOfUploads: 30,
 }
 
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/gh']}>
     <Route path="/:provider">
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProviderV5 client={queryClientV5}>
+        {children}
+      </QueryClientProviderV5>
     </Route>
   </MemoryRouter>
 )
 
 const server = setupServer()
 
-beforeAll(() => server.listen())
+beforeAll(() => {
+  server.listen()
+})
+
 beforeEach(() => {
   server.resetHandlers()
-  queryClient.clear()
+  queryClientV5.clear()
+})
+
+afterAll(() => {
+  server.close()
 })
-afterAll(() => server.close())
 
 describe('usePlanPageData', () => {
   function setup({ invalidSchema = false }) {
@@ -53,10 +65,12 @@ describe('usePlanPageData', () => {
     it('returns data for the owner page', async () => {
       const { result } = renderHook(
         () =>
-          usePlanPageData({
-            owner: 'popcorn',
-            provider: 'gh',
-          }),
+          useQueryV5(
+            PlanPageDataQueryOpts({
+              owner: 'popcorn',
+              provider: 'gh',
+            })
+          ),
         { wrapper }
       )
 
@@ -81,10 +95,12 @@ describe('usePlanPageData', () => {
       setup({ invalidSchema: true })
       const { result } = renderHook(
         () =>
-          usePlanPageData({
-            owner: 'popcorn',
-            provider: 'gh',
-          }),
+          useQueryV5(
+            PlanPageDataQueryOpts({
+              owner: 'popcorn',
+              provider: 'gh',
+            })
+          ),
         { wrapper }
       )
 

src/pages/PlanPage/hooks/usePlanPageData.test.tsx renamed to src/pages/PlanPage/queries/PlanPageDataQueryOpts.test.tsx

@@ -1,8 +1,8 @@
-import { useQuery } from '@tanstack/react-query'
+import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import Api from 'shared/api'
-import { NetworkErrorObject } from 'shared/api/helpers'
+import { rejectNetworkError } from 'shared/api/helpers'
 
 const RequestSchema = z.object({
   owner: z
@@ -24,17 +24,20 @@ const query = `
   }
 `
 
-type UsePlanPageDataParams = {
+type PlanPageDataQueryArgs = {
   owner: string
   provider: string
 }
 
-export function usePlanPageData({ owner, provider }: UsePlanPageDataParams) {
+export function PlanPageDataQueryOpts({
+  owner,
+  provider,
+}: PlanPageDataQueryArgs) {
   const variables = {
     username: owner,
   }
 
-  return useQuery({
+  return queryOptionsV5({
     queryKey: ['PlanPageData', variables, provider],
     queryFn: ({ signal }) =>
       Api.graphql({
@@ -46,11 +49,12 @@ export function usePlanPageData({ owner, provider }: UsePlanPageDataParams) {
         const parsedRes = RequestSchema.safeParse(res?.data)
 
         if (!parsedRes.success) {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 404,
             data: {},
             dev: 'usePlanPageData - 404 schema parsing failed',
-          } satisfies NetworkErrorObject)
+            error: parsedRes.error,
+          })
         }
 
         return parsedRes.data?.owner ?? null

src/pages/PlanPage/hooks/usePlanPageData.ts renamed to src/pages/PlanPage/queries/PlanPageDataQueryOpts.ts

@@ -1,8 +1,9 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import isNumber from 'lodash/isNumber'
 import PropType from 'prop-types'
 import { useParams } from 'react-router-dom'
 
-import { usePlanPageData } from 'pages/PlanPage/hooks'
+import { PlanPageDataQueryOpts } from 'pages/PlanPage/queries/PlanPageDataQueryOpts'
 import {
   planPropType,
   TrialStatuses,
@@ -25,7 +26,9 @@ import PlanPricing from '../shared/PlanPricing'
 
 function FreePlanCard({ plan, scheduledPhase }) {
   const { provider, owner } = useParams()
-  const { data: ownerData } = usePlanPageData({ owner, provider })
+  const { data: ownerData } = useSuspenseQueryV5(
+    PlanPageDataQueryOpts({ owner, provider })
+  )
   const { data: planData } = usePlanData({
     provider,
     owner,

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.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, http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -159,12 +163,17 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false, suspense: true } },
 })
 
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
 beforeAll(() => {
   server.listen()
 })
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
   vi.resetAllMocks()
 })
@@ -174,13 +183,15 @@ afterAll(() => {
 })
 
 const wrapper = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/plan/bb/critical-role']}>
-      <Route path="/plan/:provider/:owner">
-        <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
-      </Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/plan/bb/critical-role']}>
+        <Route path="/plan/:provider/:owner">
+          <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 describe('FreePlanCard', () => {

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.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, http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { Plan, PretrialPlan, TrialStatuses } from 'services/account'
@@ -66,23 +71,37 @@ const mockScheduleDetail = {
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/plan/bb/critical-role']}>
-      <Route path="/plan/:provider/:owner">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <Suspense fallback={null}>
+        <MemoryRouter initialEntries={['/plan/bb/critical-role']}>
+          <Route path="/plan/:provider/:owner">{children}</Route>
+        </MemoryRouter>
+      </Suspense>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 const server = setupServer()
 
-beforeAll(() => server.listen())
+beforeAll(() => {
+  server.listen()
+})
+
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 interface SetupArgs {
   hasScheduledDetails?: boolean

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx

@@ -1,7 +1,8 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import isNumber from 'lodash/isNumber'
 import { useParams } from 'react-router-dom'
 
-import { usePlanPageData } from 'pages/PlanPage/hooks'
+import { PlanPageDataQueryOpts } from 'pages/PlanPage/queries/PlanPageDataQueryOpts'
 import { useAccountDetails, usePlanData } from 'services/account'
 import BenefitList from 'shared/plan/BenefitList'
 import ScheduledPlanDetails from 'shared/plan/ScheduledPlanDetails'
@@ -22,7 +23,9 @@ function PaidPlanCard() {
     provider,
     owner,
   })
-  const { data: ownerData } = usePlanPageData({ owner, provider })
+  const { data: ownerData } = useSuspenseQueryV5(
+    PlanPageDataQueryOpts({ owner, provider })
+  )
 
   const scheduledPhase = accountDetails?.scheduleDetail?.scheduledPhase
   const plan = planData?.plan