diff --git a/src/pages/PlanPage/PlanPage.jsx b/src/pages/PlanPage/PlanPage.jsx
index 91f68ea88a..8ae321a08c 100644
--- a/src/pages/PlanPage/PlanPage.jsx
+++ b/src/pages/PlanPage/PlanPage.jsx
@@ -1,5 +1,6 @@
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'
@@ -7,11 +8,11 @@ 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
diff --git a/src/pages/PlanPage/PlanPage.test.jsx b/src/pages/PlanPage/PlanPage.test.jsx
index 78eab0ec26..3cdb714f09 100644
--- a/src/pages/PlanPage/PlanPage.test.jsx
+++ b/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,32 +32,32 @@ 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 }) => (
-
-
-
- {children}
-
- {
- testLocation = location
- return null
- }}
- />
-
-
+
+
+
+
+ {children}
+ {
+ testLocation = location
+ return null
+ }}
+ />
+
+
+
+
)
beforeAll(() => {
@@ -61,6 +65,7 @@ beforeAll(() => {
})
afterEach(() => {
queryClient.clear()
+ queryClientV5.clear()
server.resetHandlers()
vi.resetAllMocks()
})
diff --git a/src/pages/PlanPage/hooks/index.ts b/src/pages/PlanPage/hooks/index.ts
deleted file mode 100644
index c36a9f63a6..0000000000
--- a/src/pages/PlanPage/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './usePlanPageData'
diff --git a/src/pages/PlanPage/hooks/usePlanPageData.test.tsx b/src/pages/PlanPage/queries/PlanPageDataQueryOpts.test.tsx
similarity index 73%
rename from src/pages/PlanPage/hooks/usePlanPageData.test.tsx
rename to src/pages/PlanPage/queries/PlanPageDataQueryOpts.test.tsx
index 62f81c6388..d078d5422c 100644
--- a/src/pages/PlanPage/hooks/usePlanPageData.test.tsx
+++ b/src/pages/PlanPage/queries/PlanPageDataQueryOpts.test.tsx
@@ -1,11 +1,15 @@
-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',
@@ -13,25 +17,33 @@ const mockOwner = {
numberOfUploads: 30,
}
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
defaultOptions: { queries: { retry: false } },
})
const wrapper: React.FC = ({ children }) => (
- {children}
+
+ {children}
+
)
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 }
)
diff --git a/src/pages/PlanPage/hooks/usePlanPageData.ts b/src/pages/PlanPage/queries/PlanPageDataQueryOpts.ts
similarity index 73%
rename from src/pages/PlanPage/hooks/usePlanPageData.ts
rename to src/pages/PlanPage/queries/PlanPageDataQueryOpts.ts
index 2b5b169b51..538ebd995b 100644
--- a/src/pages/PlanPage/hooks/usePlanPageData.ts
+++ b/src/pages/PlanPage/queries/PlanPageDataQueryOpts.ts
@@ -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
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.jsx
index cafa615985..dbd87380a7 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.jsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.jsx
@@ -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,
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.test.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.test.jsx
index 41ce08b5c2..71696693fc 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.test.jsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.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, 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 }) => (
-
-
-
- Loading
}>{children}
-
-
-
+
+
+
+
+ Loading}>{children}
+
+
+
+
)
describe('FreePlanCard', () => {
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx
index c0300bc522..50bc02c58a 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx
@@ -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 = ({ children }) => (
-
-
- {children}
-
-
+
+
+
+
+ {children}
+
+
+
+
)
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
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.tsx
index c1436133d0..f2f05e8433 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.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