diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx index 72b001c1084..b16822effec 100644 --- a/packages/manager/src/MainContent.tsx +++ b/packages/manager/src/MainContent.tsx @@ -1,4 +1,5 @@ import Grid from '@mui/material/Unstable_Grid2'; +import { useQueryClient } from '@tanstack/react-query'; import { RouterProvider } from '@tanstack/react-router'; import * as React from 'react'; import { Redirect, Route, Switch } from 'react-router-dom'; @@ -199,6 +200,7 @@ export const MainContent = () => { const { classes, cx } = useStyles(); const { data: preferences } = usePreferences(); const { mutateAsync: updatePreferences } = useMutatePreferences(); + const queryClient = useQueryClient(); const globalErrors = useGlobalErrors(); @@ -370,6 +372,7 @@ export const MainContent = () => { */} diff --git a/packages/manager/src/Router.tsx b/packages/manager/src/Router.tsx index 7d89f4fa297..a8e12fd54f3 100644 --- a/packages/manager/src/Router.tsx +++ b/packages/manager/src/Router.tsx @@ -1,3 +1,4 @@ +import { QueryClient } from '@tanstack/react-query'; import { RouterProvider } from '@tanstack/react-router'; import * as React from 'react'; @@ -24,6 +25,7 @@ export const Router = () => { isACLPEnabled, isDatabasesEnabled, isPlacementGroupsEnabled, + queryClient: new QueryClient(), }, }); diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx index e18b0d2f752..9681ad7166f 100644 --- a/packages/manager/src/routes/index.tsx +++ b/packages/manager/src/routes/index.tsx @@ -1,3 +1,4 @@ +import { QueryClient } from '@tanstack/react-query'; import { createRoute, createRouter, redirect } from '@tanstack/react-router'; import React from 'react'; @@ -62,7 +63,9 @@ export const routeTree = rootRoute.addChildren([ ]); export const router = createRouter({ - context: {}, + context: { + queryClient: new QueryClient(), + }, defaultNotFoundComponent: () => , routeTree, }); @@ -89,7 +92,9 @@ export const migrationRouter = createRouter({ Wrap: ({ children }) => { return
{children}
; }, - context: {}, + context: { + queryClient: new QueryClient(), + }, defaultNotFoundComponent: () => , routeTree: migrationRouteTree, }); diff --git a/packages/manager/src/routes/types.ts b/packages/manager/src/routes/types.ts index f2e8b339047..e32bd581977 100644 --- a/packages/manager/src/routes/types.ts +++ b/packages/manager/src/routes/types.ts @@ -1,4 +1,5 @@ import type { AccountSettings } from '@linode/api-v4'; +import type { QueryClient } from '@tanstack/react-query'; export type RouterContext = { accountSettings?: AccountSettings; @@ -8,6 +9,7 @@ export type RouterContext = { isACLPEnabled?: boolean; isDatabasesEnabled?: boolean; isPlacementGroupsEnabled?: boolean; + queryClient: QueryClient; }; export interface TableSearchParams { diff --git a/packages/manager/src/routes/volumes/index.ts b/packages/manager/src/routes/volumes/index.ts index 33c1df21d0a..b0b747738ce 100644 --- a/packages/manager/src/routes/volumes/index.ts +++ b/packages/manager/src/routes/volumes/index.ts @@ -1,5 +1,7 @@ import { createRoute, redirect } from '@tanstack/react-router'; +import { volumeQueries } from 'src/queries/volumes/volumes'; + import { rootRoute } from '../root'; import { VolumesRoot } from './VolumesRoot'; @@ -46,14 +48,36 @@ const volumesCreateRoute = createRoute({ ); const volumeActionRoute = createRoute({ - beforeLoad: ({ params }) => { + beforeLoad: async ({ context, params, search }) => { if (!(params.action in volumeAction)) { throw redirect({ search: () => ({}), to: '/volumes', }); } + + const volumes = await context.queryClient.fetchQuery( + volumeQueries.lists._ctx.paginated( + { + page: 1, + page_size: 25, + }, + { + '+order': search?.order ?? 'asc', + '+order_by': search?.orderBy ?? 'label', + } + ) + ); + + // if the volume is not found, redirect to the volumes landing page + if (!volumes.data.find((v) => v.id === params.volumeId)) { + throw redirect({ + search: () => ({}), + to: '/volumes', + }); + } }, + getParentRoute: () => volumesRoute, parseParams: ({ action, @@ -66,6 +90,7 @@ const volumeActionRoute = createRoute({ volumeId: Number(volumeId), }), path: '$volumeId/$action', + validateSearch: (search: VolumesSearchParams) => search, }).lazy(() => import('src/routes/volumes/volumesLazyRoutes').then( (m) => m.volumesLandingLazyRoute