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