Fix routes typing

Signed-off-by: Émile Ré <nemile.re@gmail.com>
2025-12-04 14:51:48 +04:00
parent 44336c2a35
commit 2fc6143409
18 changed files with 375 additions and 309 deletions
--- a/apps/console/src/routes.tsx
+++ b/apps/console/src/routes.tsx
@@ -5,6 +5,7 @@ import {
  useLoaderData,
  useRouteError,
  type LoaderFunction,
+  type LoaderFunctionArgs,
  type RouteObject,
 } from "react-router";
 import { MainLayout } from "./layouts/MainLayout";
@@ -39,25 +40,42 @@ import { snapshotsRoutes } from "./routes/snapshotsRoutes.ts";
 import { continualImprovementRoutes } from "./routes/continualImprovementRoutes.ts";
 import { processingActivityRoutes } from "./routes/processingActivityRoutes.ts";
 import { lazy } from "@probo/react-lazy";
-import type { OperationType, VariablesOf } from "relay-runtime";
-import type { OrganizationGraph_ViewQuery } from "./hooks/graph/__generated__/OrganizationGraph_ViewQuery.graphql.ts";
+import type { OperationType } from "relay-runtime";

-type AppRouteWithoutQuery<TQuery extends OperationType> = Omit<RouteObject, "Component" | "children"> & {
-  Component?: React.ComponentType;
-  children?: AppRoute<TQuery>[];
-  fallback?: React.ComponentType;
-  queryLoader?: undefined;
+export function withQueryRef<
+  TQuery extends OperationType,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions
+>(
+  Component: LazyExoticComponent<ComponentType<{ queryRef: PreloadedQuery<TQuery, TEnvironmentProviderOptions> }>>,
+) {
+  return () => {
+    const { queryRef, dispose } = useLoaderData();
+
+    useCleanup(dispose, 1000);
+
+    return <Component queryRef={queryRef} />
+  }
 }

-type AppRouteWithQuery<TQuery extends OperationType> = Omit<RouteObject, "Component" | "children"> & {
-  Component?:
-    LazyExoticComponent<ComponentType<{ queryRef: PreloadedQuery<TQuery, EnvironmentProviderOptions> }>>;
-  children?: AppRoute<TQuery>[];
-  fallback?: React.ComponentType;
-  queryLoader?: (params: VariablesOf<TQuery>) => PreloadedQuery<TQuery, EnvironmentProviderOptions>;
+export function loaderFromQueryLoader<
+  TQuery extends OperationType,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions
+>(
+  queryLoader: (params: Record<string, string>) => PreloadedQuery<TQuery, TEnvironmentProviderOptions>
+): LoaderFunction {
+  return ({ params }: LoaderFunctionArgs) => {
+    const query = queryLoader(params as Record<string, string>);
+    return {
+      queryRef: query,
+      dispose: query.dispose,
+    };
+  }
 }

-export type AppRoute<TQuery extends OperationType> = AppRouteWithoutQuery<TQuery> | AppRouteWithQuery<TQuery>;
+export type AppRoute = Omit<RouteObject, "children"> & {
+  children?: AppRoute[];
+  fallback?: ComponentType;
+}

 /**
 * Top level error boundary
@@ -154,11 +172,13 @@ const routes = [
      {
        path: "settings",
        fallback: PageSkeleton,
-        queryLoader: ({ organizationId }: VariablesOf<OrganizationGraph_ViewQuery>) =>
-          loadQuery(relayEnvironment, organizationViewQuery, {
-            organizationId,
-          }),
-        Component: lazy(() => import("./pages/organizations/SettingsPage")),
+        loader: loaderFromQueryLoader(
+          ({ organizationId }) =>
+            loadQuery(relayEnvironment, organizationViewQuery, {
+              organizationId: organizationId!,
+            })
+        ),
+        Component: withQueryRef(lazy(() => import("./pages/organizations/SettingsPage"))),
        children: [
          {
            path: "",
@@ -212,70 +232,35 @@ const routes = [
    path: "*",
    Component: PageError,
  },
-] as AppRoute<OperationType>[];
+] satisfies AppRoute[];

 /**
 * Wrap components with suspense to handle lazy loading & relay loading states
 */
-function routeTransformer<TQuery extends OperationType>({
+function routeTransformer({
  Component,
  fallback: FallbackComponent,
-  queryLoader,
  children,
  ...rest
-}: AppRoute<TQuery>): RouteObject {
+}: AppRoute): RouteObject {
  let route: RouteObject = { ...rest };

-  if (Component) {
-    let RouteComponent = Component;
+  if (Component && FallbackComponent) {
+    const OriginalComponent = Component as ComponentType;

-    if (FallbackComponent && typeof queryLoader === "undefined") {
-      const OriginalComponent = Component as ComponentType;
-
-      RouteComponent = () => (
+    route = {
+      ...route,
+      Component: () => (
        <Suspense fallback={<FallbackComponent />}>
          <OriginalComponent />
        </Suspense>
-      );
-
-      route = {
-        ...route,
-        Component: RouteComponent,
-      };
-    } else if (queryLoader) {
-      const OriginalComponent = Component as LazyExoticComponent<ComponentType<{ queryRef: PreloadedQuery<TQuery, EnvironmentProviderOptions> }>>;
-
-      RouteComponent = () => {
-        const { queryRef, dispose } = useLoaderData();
-
-        useCleanup(dispose, 1000);
-
-        return (
-          <Suspense fallback={FallbackComponent ? <FallbackComponent /> : null}>
-            <OriginalComponent queryRef={queryRef} />
-          </Suspense>
-        );
-      };
-
-      const loader: LoaderFunction = ({ params }) => {
-        const query = queryLoader(params as VariablesOf<TQuery>);
-        return {
-          queryRef: query,
-          dispose: query.dispose,
-        };
-      };
-
-      route = {
-        ...route,
-        loader: loader,
-        Component: RouteComponent,
-      };
-    }
+      ),
+    };
  }

  return {
    ...route,
-    children: children?.map(routeTransformer<TQuery>),
+    children: children?.map(routeTransformer),
  } as RouteObject;
 }

--- a/apps/console/src/routes/assetRoutes.ts
+++ b/apps/console/src/routes/assetRoutes.ts
@@ -3,45 +3,51 @@ import { relayEnvironment } from "/providers/RelayProviders";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { lazy } from "@probo/react-lazy";
 import { assetsQuery, assetNodeQuery } from "../hooks/graph/AssetGraph";
-import type { AppRoute } from "/routes";
+import type { AssetGraphListQuery } from "/hooks/graph/__generated__/AssetGraphListQuery.graphql";
+import type { AssetGraphNodeQuery } from "/hooks/graph/__generated__/AssetGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";

 export const assetRoutes = [
  {
    path: "assets",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, assetsQuery, {
-        organizationId: params.organizationId,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<AssetGraphListQuery>(relayEnvironment, assetsQuery, {
+        organizationId: organizationId,
        snapshotId: null,
      }),
-    Component: lazy(() => import("/pages/organizations/assets/AssetsPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/assets/AssetsPage"))),
  },
  {
    path: "snapshots/:snapshotId/assets",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, assetsQuery, {
-        organizationId: params.organizationId,
-        snapshotId: params.snapshotId,
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
+      loadQuery<AssetGraphListQuery>(relayEnvironment, assetsQuery, {
+        organizationId: organizationId,
+        snapshotId: snapshotId,
      }),
-    Component: lazy(() => import("/pages/organizations/assets/AssetsPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/assets/AssetsPage"))),
  },
  {
    path: "assets/:assetId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, assetNodeQuery, { assetId: params.assetId }),
-    Component: lazy(
-      () => import("/pages/organizations/assets/AssetDetailsPage"),
+    loader: loaderFromQueryLoader(({ assetId }) =>
+      loadQuery<AssetGraphNodeQuery>(relayEnvironment, assetNodeQuery, { assetId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/assets/AssetDetailsPage"),
+    )),
  },
  {
    path: "snapshots/:snapshotId/assets/:assetId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, assetNodeQuery, { assetId: params.assetId }),
-    Component: lazy(
-      () => import("/pages/organizations/assets/AssetDetailsPage"),
+    loader: loaderFromQueryLoader(({ assetId }) =>
+      loadQuery<AssetGraphNodeQuery>(relayEnvironment, assetNodeQuery, { assetId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/assets/AssetDetailsPage"),
+    )),
  },
 ] satisfies AppRoute[];
--- a/apps/console/src/routes/auditRoutes.ts
+++ b/apps/console/src/routes/auditRoutes.ts
@@ -3,24 +3,29 @@ import { relayEnvironment } from "/providers/RelayProviders";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { lazy } from "@probo/react-lazy";
 import { auditsQuery, auditNodeQuery } from "../hooks/graph/AuditGraph";
+import type { AuditGraphListQuery } from "/hooks/graph/__generated__/AuditGraphListQuery.graphql";
+import type { AuditGraphNodeQuery } from "/hooks/graph/__generated__/AuditGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef } from "/routes";

 export const auditRoutes = [
  {
    path: "audits",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, auditsQuery, { organizationId: params.organizationId }),
-    Component: lazy(
-      () => import("/pages/organizations/audits/AuditsPage")
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<AuditGraphListQuery>(relayEnvironment, auditsQuery, { organizationId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/audits/AuditsPage")
+    )),
  },
  {
    path: "audits/:auditId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, auditNodeQuery, { auditId: params.auditId }),
-    Component: lazy(
-      () => import("/pages/organizations/audits/AuditDetailsPage")
+    loader: loaderFromQueryLoader(({ auditId }) =>
+      loadQuery<AuditGraphNodeQuery>(relayEnvironment, auditNodeQuery, { auditId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/audits/AuditDetailsPage")
+    )),
  },
 ];
--- a/apps/console/src/routes/continualImprovementRoutes.ts
+++ b/apps/console/src/routes/continualImprovementRoutes.ts
@@ -3,53 +3,59 @@ import { relayEnvironment } from "/providers/RelayProviders";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { lazy } from "@probo/react-lazy";
 import { continualImprovementsQuery, continualImprovementNodeQuery } from "/hooks/graph/ContinualImprovementGraph";
-import type { AppRoute } from "/routes";
+import type { ContinualImprovementGraphListQuery } from "/hooks/graph/__generated__/ContinualImprovementGraphListQuery.graphql";
+import type { ContinualImprovementGraphNodeQuery } from "/hooks/graph/__generated__/ContinualImprovementGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";

 export const continualImprovementRoutes = [
  {
    path: "continual-improvements",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, continualImprovementsQuery, {
-        organizationId: params.organizationId,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<ContinualImprovementGraphListQuery>(relayEnvironment, continualImprovementsQuery, {
+        organizationId,
        snapshotId: null
      }),
-    Component: lazy(
-      () => import("/pages/organizations/continualImprovements/ContinualImprovementsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/continualImprovements/ContinualImprovementsPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/continual-improvements",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, continualImprovementsQuery, {
-        organizationId: params.organizationId,
-        snapshotId: params.snapshotId
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
+      loadQuery<ContinualImprovementGraphListQuery>(relayEnvironment, continualImprovementsQuery, {
+        organizationId,
+        snapshotId,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/continualImprovements/ContinualImprovementsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/continualImprovements/ContinualImprovementsPage")
+    )),
  },
  {
    path: "continual-improvements/:improvementId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, continualImprovementNodeQuery, {
-        continualImprovementId: params.improvementId
+    loader: loaderFromQueryLoader(({ improvementId }) =>
+      loadQuery<ContinualImprovementGraphNodeQuery>(relayEnvironment, continualImprovementNodeQuery, {
+        continualImprovementId: improvementId!,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/continualImprovements/ContinualImprovementDetailsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/continualImprovements/ContinualImprovementDetailsPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/continual-improvements/:improvementId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, continualImprovementNodeQuery, {
-        continualImprovementId: params.improvementId
+    loader: loaderFromQueryLoader(({ improvementId }) =>
+      loadQuery<ContinualImprovementGraphNodeQuery>(relayEnvironment, continualImprovementNodeQuery, {
+        continualImprovementId: improvementId!,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/continualImprovements/ContinualImprovementDetailsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/continualImprovements/ContinualImprovementDetailsPage")
+    )),
  },
 ] satisfies AppRoute[];
--- a/apps/console/src/routes/dataRoutes.ts
+++ b/apps/console/src/routes/dataRoutes.ts
@@ -3,48 +3,55 @@ import { relayEnvironment } from "/providers/RelayProviders";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { lazy } from "@probo/react-lazy";
 import { dataQuery, datumNodeQuery } from "../hooks/graph/DatumGraph";
+import type { DatumGraphListQuery } from "/hooks/graph/__generated__/DatumGraphListQuery.graphql";
+import type { DatumGraphNodeQuery } from "/hooks/graph/__generated__/DatumGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";

 export const dataRoutes = [
  {
    path: "data",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, dataQuery, {
-        organizationId: params.organizationId,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<DatumGraphListQuery>(relayEnvironment, dataQuery, {
+        organizationId: organizationId,
        snapshotId: null
      }),
-    Component: lazy(
-      () => import("/pages/organizations/data/DataPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/data/DataPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/data",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, dataQuery, {
-        organizationId: params.organizationId,
-        snapshotId: params.snapshotId
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
+      loadQuery<DatumGraphListQuery>(relayEnvironment, dataQuery, {
+        organizationId,
+        snapshotId,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/data/DataPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/data/DataPage")
+    )),
  },
  {
    path: "data/:dataId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, datumNodeQuery, { dataId: params.dataId }),
-    Component: lazy(
-      () => import("../pages/organizations/data/DatumDetailsPage")
+    loader: loaderFromQueryLoader(({ dataId }) =>
+      loadQuery<DatumGraphNodeQuery>(relayEnvironment, datumNodeQuery, { dataId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/data/DatumDetailsPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/data/:dataId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, datumNodeQuery, { dataId: params.dataId }),
-    Component: lazy(
-      () => import("../pages/organizations/data/DatumDetailsPage")
+    loader: loaderFromQueryLoader(({ dataId }) =>
+      loadQuery<DatumGraphNodeQuery>(relayEnvironment, datumNodeQuery, { dataId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/data/DatumDetailsPage")
+    )),
  },
-]
+] satisfies AppRoute[];
--- a/apps/console/src/routes/documentsRoutes.ts
+++ b/apps/console/src/routes/documentsRoutes.ts
@@ -1,19 +1,21 @@
 import { Fragment } from "react";
 import { loadQuery } from "react-relay";
-import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { documentsQuery } from "/hooks/graph/DocumentGraph";
 import { documentNodeQuery } from "/hooks/graph/DocumentGraph";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
-import { redirect } from "react-router";
+import { redirect, type LoaderFunctionArgs } from "react-router";
 import { lazy } from "@probo/react-lazy";
 import { LinkCardSkeleton } from "/components/skeletons/LinkCardSkeleton";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";
+import type { DocumentGraphListQuery } from "/hooks/graph/__generated__/DocumentGraphListQuery.graphql";
+import type { DocumentGraphNodeQuery } from "/hooks/graph/__generated__/DocumentGraphNodeQuery.graphql";

 const documentTabs = (prefix: string) => {
  return [
    {
      path: `${prefix}`,
-      queryLoader: ({ organizationId, documentId, versionId }) => {
+      loader: ({ params: { organizationId, documentId, versionId } }: LoaderFunctionArgs) => {
        const basePath = `/organizations/${organizationId}/documents/${documentId}`;
        const redirectPath = versionId
          ? `${basePath}/versions/${versionId}/description`
@@ -48,27 +50,29 @@ const documentTabs = (prefix: string) => {
          import("../pages/organizations/documents/tabs/DocumentSignaturesTab"),
      ),
    },
-  ] satisfies AppRoute[];
+  ];
 };

 export const documentsRoutes = [
  {
    path: "documents",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, documentsQuery, { organizationId }),
-    Component: lazy(
-      () => import("/pages/organizations/documents/DocumentsPage"),
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<DocumentGraphListQuery>(relayEnvironment, documentsQuery, { organizationId: organizationId! }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/documents/DocumentsPage"),
+    )),
  },
  {
    path: "documents/:documentId",
    fallback: PageSkeleton,
-    queryLoader: ({ documentId }) =>
-      loadQuery(relayEnvironment, documentNodeQuery, { documentId }),
-    Component: lazy(
-      () => import("../pages/organizations/documents/DocumentDetailPage"),
+    loader: loaderFromQueryLoader(({ documentId }) =>
+      loadQuery<DocumentGraphNodeQuery>(relayEnvironment, documentNodeQuery, { documentId: documentId! }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/documents/DocumentDetailPage"),
+    )),
    children: [...documentTabs(""), ...documentTabs("versions/:versionId/")],
  },
 ] satisfies AppRoute[];
--- a/apps/console/src/routes/frameworkRoutes.ts
+++ b/apps/console/src/routes/frameworkRoutes.ts
@@ -6,29 +6,34 @@ import {
  frameworkNodeQuery,
  frameworkControlNodeQuery,
 } from "/hooks/graph/FrameworkGraph";
-import type { AppRoute } from "/routes";
 import { Fragment } from "react";
 import { lazy } from "@probo/react-lazy";
 import { ControlSkeleton } from "../components/skeletons/ControlSkeleton";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";
+import type { FrameworkGraphListQuery } from "/hooks/graph/__generated__/FrameworkGraphListQuery.graphql";
+import type { FrameworkGraphNodeQuery } from "/hooks/graph/__generated__/FrameworkGraphNodeQuery.graphql";
+import type { FrameworkGraphControlNodeQuery } from "/hooks/graph/__generated__/FrameworkGraphControlNodeQuery.graphql";

 export const frameworkRoutes = [
  {
    path: "frameworks",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, frameworksQuery, { organizationId }),
-    Component: lazy(
-      () => import("/pages/organizations/frameworks/FrameworksPage")
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<FrameworkGraphListQuery>(relayEnvironment, frameworksQuery, { organizationId: organizationId! }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/frameworks/FrameworksPage")
+    )),
  },
  {
    path: "frameworks/:frameworkId",
    fallback: PageSkeleton,
-    queryLoader: ({ frameworkId }) =>
-      loadQuery(relayEnvironment, frameworkNodeQuery, { frameworkId }),
-    Component: lazy(
-      () => import("/pages/organizations/frameworks/FrameworkDetailPage")
+    loader: loaderFromQueryLoader(({ frameworkId }) =>
+      loadQuery<FrameworkGraphNodeQuery>(relayEnvironment, frameworkNodeQuery, { frameworkId: frameworkId! }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/frameworks/FrameworkDetailPage")
+    )),
    children: [
      {
        path: "",
@@ -37,11 +42,12 @@ export const frameworkRoutes = [
      {
        path: "controls/:controlId",
        fallback: ControlSkeleton,
-        queryLoader: ({ controlId }) =>
-          loadQuery(relayEnvironment, frameworkControlNodeQuery, { controlId }),
-        Component: lazy(
-          () => import("/pages/organizations/frameworks/FrameworkControlPage")
+        loader: loaderFromQueryLoader(({ controlId }) =>
+          loadQuery<FrameworkGraphControlNodeQuery>(relayEnvironment, frameworkControlNodeQuery, { controlId: controlId! }),
        ),
+        Component: withQueryRef(lazy(
+          () => import("/pages/organizations/frameworks/FrameworkControlPage")
+        )),
      },
    ],
  },
--- a/apps/console/src/routes/measureRoutes.ts
+++ b/apps/console/src/routes/measureRoutes.ts
@@ -1,20 +1,23 @@
 import { Fragment } from "react";
 import { loadQuery } from "react-relay";
-import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { measureNodeQuery, measuresQuery } from "/hooks/graph/MeasureGraph";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { redirect } from "react-router";
 import { lazy } from "@probo/react-lazy";
 import { LinkCardSkeleton } from "/components/skeletons/LinkCardSkeleton";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";
+import type { MeasureGraphListQuery } from "/hooks/graph/__generated__/MeasureGraphListQuery.graphql";
+import type { MeasureGraphNodeQuery } from "/hooks/graph/__generated__/MeasureGraphNodeQuery.graphql";

 export const measureRoutes = [
  {
    path: "measures",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, measuresQuery, { organizationId }),
-    Component: lazy(() => import("/pages/organizations/measures/MeasuresPage")),
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<MeasureGraphListQuery>(relayEnvironment, measuresQuery, { organizationId: organizationId! }),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/measures/MeasuresPage"))),
    children: [
      {
        path: "category/:categoryId",
@@ -25,11 +28,10 @@ export const measureRoutes = [
  {
    path: "measures/:measureId",
    fallback: PageSkeleton,
-    queryLoader: ({ measureId }) =>
-      loadQuery(relayEnvironment, measureNodeQuery, { measureId }),
-    Component: lazy(
-      () => import("/pages/organizations/measures/MeasureDetailPage")
+    loader: loaderFromQueryLoader(({ measureId }) =>
+      loadQuery<MeasureGraphNodeQuery>(relayEnvironment, measureNodeQuery, { measureId: measureId! }),
    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/measures/MeasureDetailPage"))),
    children: [
      {
        path: "",
--- a/apps/console/src/routes/meetingsRoutes.ts
+++ b/apps/console/src/routes/meetingsRoutes.ts
@@ -1,19 +1,21 @@
 import { Fragment } from "react";
 import { loadQuery } from "react-relay";
-import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { meetingsQuery } from "/hooks/graph/MeetingGraph";
 import { meetingNodeQuery } from "/hooks/graph/MeetingGraph";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
-import { redirect } from "react-router";
+import { redirect, type LoaderFunctionArgs } from "react-router";
 import { lazy } from "@probo/react-lazy";
 import { LinkCardSkeleton } from "/components/skeletons/LinkCardSkeleton";
+import type { MeetingGraphListQuery } from "/hooks/graph/__generated__/MeetingGraphListQuery.graphql";
+import type { MeetingGraphNodeQuery } from "/hooks/graph/__generated__/MeetingGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef } from "/routes";

 const meetingTabs = (prefix: string) => {
  return [
    {
      path: `${prefix}`,
-      queryLoader: ({ organizationId, meetingId }) => {
+      loader: ({ params: { organizationId, meetingId } }: LoaderFunctionArgs) => {
        const basePath = `/organizations/${organizationId}/meetings/${meetingId}`;
        const redirectPath = `${basePath}/minutes`;
        throw redirect(redirectPath);
@@ -30,28 +32,30 @@ const meetingTabs = (prefix: string) => {
          ),
      ),
    },
-  ] satisfies AppRoute[];
+  ];
 };

 export const meetingsRoutes = [
  {
    path: "meetings",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, meetingsQuery, { organizationId }),
-    Component: lazy(
-      () => import("/pages/organizations/meetings/MeetingsPage"),
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<MeetingGraphListQuery>(relayEnvironment, meetingsQuery, { organizationId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/meetings/MeetingsPage"),
+    )),
  },
  {
    path: "meetings/:meetingId",
    fallback: PageSkeleton,
-    queryLoader: ({ meetingId }) =>
-      loadQuery(relayEnvironment, meetingNodeQuery, { meetingId }),
-    Component: lazy(
-      () => import("../pages/organizations/meetings/MeetingDetailPage"),
+    loader: loaderFromQueryLoader(({ meetingId }) =>
+      loadQuery<MeetingGraphNodeQuery>(relayEnvironment, meetingNodeQuery, { meetingId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/meetings/MeetingDetailPage"),
+    )),
    children: [...meetingTabs("")],
  },
-] satisfies AppRoute[];
+];

--- a/apps/console/src/routes/nonconformityRoutes.ts
+++ b/apps/console/src/routes/nonconformityRoutes.ts
@@ -3,53 +3,59 @@ import { relayEnvironment } from "/providers/RelayProviders";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { lazy } from "@probo/react-lazy";
 import { nonconformitiesQuery, nonconformityNodeQuery } from "../hooks/graph/NonconformityGraph";
-import type { AppRoute } from "/routes";
+import type { NonconformityGraphListQuery } from "/hooks/graph/__generated__/NonconformityGraphListQuery.graphql";
+import type { NonconformityGraphNodeQuery } from "/hooks/graph/__generated__/NonconformityGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";

-export const nonconformityRoutes= [
+export const nonconformityRoutes = [
  {
    path: "nonconformities",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, nonconformitiesQuery, {
-        organizationId: params.organizationId,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<NonconformityGraphListQuery>(relayEnvironment, nonconformitiesQuery, {
+        organizationId,
        snapshotId: null
      }),
-    Component: lazy(
-      () => import("../pages/organizations/nonconformities/NonconformitiesPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/nonconformities/NonconformitiesPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/nonconformities",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, nonconformitiesQuery, {
-        organizationId: params.organizationId,
-        snapshotId: params.snapshotId
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
+      loadQuery<NonconformityGraphListQuery>(relayEnvironment, nonconformitiesQuery, {
+        organizationId,
+        snapshotId,
      }),
-    Component: lazy(
-      () => import("../pages/organizations/nonconformities/NonconformitiesPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/nonconformities/NonconformitiesPage")
+    )),
  },
  {
    path: "nonconformities/:nonconformityId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, nonconformityNodeQuery, {
-        nonconformityId: params.nonconformityId
+    loader: loaderFromQueryLoader(({ nonconformityId }) =>
+      loadQuery<NonconformityGraphNodeQuery>(relayEnvironment, nonconformityNodeQuery, {
+        nonconformityId,
      }),
-    Component: lazy(
-      () => import("../pages/organizations/nonconformities/NonconformityDetailsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/nonconformities/NonconformityDetailsPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/nonconformities/:nonconformityId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, nonconformityNodeQuery, {
-        nonconformityId: params.nonconformityId
+    loader: loaderFromQueryLoader(({ nonconformityId }) =>
+      loadQuery<NonconformityGraphNodeQuery>(relayEnvironment, nonconformityNodeQuery, {
+        nonconformityId: nonconformityId
      }),
-    Component: lazy(
-      () => import("../pages/organizations/nonconformities/NonconformityDetailsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/nonconformities/NonconformityDetailsPage")
+    )),
  },
 ] satisfies AppRoute[];
--- a/apps/console/src/routes/obligationRoutes.ts
+++ b/apps/console/src/routes/obligationRoutes.ts
@@ -3,53 +3,59 @@ import { relayEnvironment } from "/providers/RelayProviders";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { lazy } from "@probo/react-lazy";
 import { obligationsQuery, obligationNodeQuery } from "/hooks/graph/ObligationGraph";
-import type { AppRoute } from "/routes";
+import type { ObligationGraphListQuery } from "/hooks/graph/__generated__/ObligationGraphListQuery.graphql";
+import type { ObligationGraphNodeQuery } from "/hooks/graph/__generated__/ObligationGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef } from "/routes";

 export const obligationRoutes = [
  {
    path: "obligations",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, obligationsQuery, {
-        organizationId: params.organizationId,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<ObligationGraphListQuery>(relayEnvironment, obligationsQuery, {
+        organizationId,
        snapshotId: null
      }),
-    Component: lazy(
-      () => import("/pages/organizations/obligations/ObligationsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/obligations/ObligationsPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/obligations",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, obligationsQuery, {
-        organizationId: params.organizationId,
-        snapshotId: params.snapshotId
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
+      loadQuery<ObligationGraphListQuery>(relayEnvironment, obligationsQuery, {
+        organizationId,
+        snapshotId,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/obligations/ObligationsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/obligations/ObligationsPage")
+    )),
  },
  {
    path: "obligations/:obligationId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, obligationNodeQuery, {
-        obligationId: params.obligationId
+    loader: loaderFromQueryLoader(({ obligationId }) =>
+      loadQuery<ObligationGraphNodeQuery>(relayEnvironment, obligationNodeQuery, {
+        obligationId,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/obligations/ObligationDetailsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/obligations/ObligationDetailsPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/obligations/:obligationId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, obligationNodeQuery, {
-        obligationId: params.obligationId
+    loader: loaderFromQueryLoader(({ obligationId }) =>
+      loadQuery<ObligationGraphNodeQuery>(relayEnvironment, obligationNodeQuery, {
+        obligationId,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/obligations/ObligationDetailsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/obligations/ObligationDetailsPage")
+    )),
  },
-] satisfies AppRoute[];
+];
--- a/apps/console/src/routes/peopleRoutes.ts
+++ b/apps/console/src/routes/peopleRoutes.ts
@@ -1,6 +1,5 @@
 import { lazy } from "@probo/react-lazy";
 import { loadQuery } from "react-relay";
-import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton.tsx";
 import {
@@ -8,23 +7,28 @@ import {
  peopleNodeQuery,
 } from "/hooks/graph/PeopleGraph";
 import { LinkCardSkeleton } from "/components/skeletons/LinkCardSkeleton";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";
+import type { PeopleGraphPaginatedQuery } from "/hooks/graph/__generated__/PeopleGraphPaginatedQuery.graphql";
+import type { PeopleGraphNodeQuery } from "/hooks/graph/__generated__/PeopleGraphNodeQuery.graphql";

 export const peopleRoutes = [
  {
    path: "people",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, paginatedPeopleQuery, { organizationId }),
-    Component: lazy(() => import("/pages/organizations/people/PeopleListPage")),
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<PeopleGraphPaginatedQuery>(relayEnvironment, paginatedPeopleQuery, { organizationId: organizationId! }),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/people/PeopleListPage"))),
  },
  {
    path: "people/:peopleId",
    fallback: PageSkeleton,
-    queryLoader: ({ peopleId }) =>
-      loadQuery(relayEnvironment, peopleNodeQuery, { peopleId }),
-    Component: lazy(
-      () => import("/pages/organizations/people/PeopleDetailPage")
+    loader: loaderFromQueryLoader(({ peopleId }) =>
+      loadQuery<PeopleGraphNodeQuery>(relayEnvironment, peopleNodeQuery, { peopleId: peopleId! }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/people/PeopleDetailPage")
+    )),
    children: [
      {
        path: "tasks",
--- a/apps/console/src/routes/processingActivityRoutes.ts
+++ b/apps/console/src/routes/processingActivityRoutes.ts
@@ -3,53 +3,59 @@ import { relayEnvironment } from "/providers/RelayProviders";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { lazy } from "@probo/react-lazy";
 import { processingActivitiesQuery, processingActivityNodeQuery } from "/hooks/graph/ProcessingActivityGraph";
-import type { AppRoute } from "/routes";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";
+import type { ProcessingActivityGraphListQuery } from "/hooks/graph/__generated__/ProcessingActivityGraphListQuery.graphql";
+import type { ProcessingActivityGraphNodeQuery } from "/hooks/graph/__generated__/ProcessingActivityGraphNodeQuery.graphql";

 export const processingActivityRoutes = [
  {
    path: "processing-activities",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, processingActivitiesQuery, {
-        organizationId: params.organizationId,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<ProcessingActivityGraphListQuery>(relayEnvironment, processingActivitiesQuery, {
+        organizationId: organizationId!,
        snapshotId: null
      }),
-    Component: lazy(
-      () => import("/pages/organizations/processingActivities/ProcessingActivitiesPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/processingActivities/ProcessingActivitiesPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/processing-activities",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, processingActivitiesQuery, {
-        organizationId: params.organizationId,
-        snapshotId: params.snapshotId
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
+      loadQuery<ProcessingActivityGraphListQuery>(relayEnvironment, processingActivitiesQuery, {
+        organizationId: organizationId!,
+        snapshotId,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/processingActivities/ProcessingActivitiesPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/processingActivities/ProcessingActivitiesPage")
+    )),
  },
  {
    path: "processing-activities/:activityId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, processingActivityNodeQuery, {
-        processingActivityId: params.activityId
+    loader: loaderFromQueryLoader(({ activityId }) =>
+      loadQuery<ProcessingActivityGraphNodeQuery>(relayEnvironment, processingActivityNodeQuery, {
+        processingActivityId: activityId!,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/processingActivities/ProcessingActivityDetailsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/processingActivities/ProcessingActivityDetailsPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId/processing-activities/:activityId",
    fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
-      loadQuery(relayEnvironment, processingActivityNodeQuery, {
-        processingActivityId: params.activityId
+    loader: loaderFromQueryLoader(({ activityId }) =>
+      loadQuery<ProcessingActivityGraphNodeQuery>(relayEnvironment, processingActivityNodeQuery, {
+        processingActivityId: activityId!,
      }),
-    Component: lazy(
-      () => import("/pages/organizations/processingActivities/ProcessingActivityDetailsPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/processingActivities/ProcessingActivityDetailsPage")
+    )),
  },
 ] satisfies AppRoute[];
--- a/apps/console/src/routes/riskRoutes.ts
+++ b/apps/console/src/routes/riskRoutes.ts
@@ -1,41 +1,46 @@
 import { Fragment } from "react";
 import { loadQuery } from "react-relay";
 import { RisksPageSkeleton } from "/components/skeletons/RisksPageSkeleton.tsx";
-import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { riskNodeQuery, risksQuery } from "/hooks/graph/RiskGraph";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { redirect } from "react-router";
 import { lazy } from "@probo/react-lazy";
 import { LinkCardSkeleton } from "/components/skeletons/LinkCardSkeleton";
+import type { RiskGraphNodeQuery } from "/hooks/graph/__generated__/RiskGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";
+import type { RiskGraphListQuery } from "/hooks/graph/__generated__/RiskGraphListQuery.graphql";

 export const riskRoutes = [
  {
    path: "risks",
    fallback: RisksPageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, risksQuery, {
-        organizationId,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<RiskGraphListQuery>(relayEnvironment, risksQuery, {
+        organizationId: organizationId!,
        snapshotId: null
      }),
-    Component: lazy(() => import("/pages/organizations/risks/RisksPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/risks/RisksPage"))),
  },
  {
    path: "snapshots/:snapshotId/risks",
    fallback: RisksPageSkeleton,
-    queryLoader: ({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, risksQuery, {
-        organizationId,
-        snapshotId
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
+      loadQuery<RiskGraphListQuery>(relayEnvironment, risksQuery, {
+        organizationId: organizationId!,
+        snapshotId: snapshotId!
      }),
-    Component: lazy(() => import("/pages/organizations/risks/RisksPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/risks/RisksPage"))),
  },
  {
    path: "risks/:riskId",
    fallback: PageSkeleton,
-    queryLoader: ({ riskId }) =>
-      loadQuery(relayEnvironment, riskNodeQuery, { riskId }),
-    Component: lazy(() => import("/pages/organizations/risks/RiskDetailPage")),
+    loader: loaderFromQueryLoader(({ riskId }) =>
+      loadQuery<RiskGraphNodeQuery>(relayEnvironment, riskNodeQuery, { riskId: riskId! }),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/risks/RiskDetailPage"))),
    children: [
      {
        path: "",
@@ -84,9 +89,10 @@ export const riskRoutes = [
  {
    path: "snapshots/:snapshotId/risks/:riskId",
    fallback: PageSkeleton,
-    queryLoader: ({ riskId }) =>
-      loadQuery(relayEnvironment, riskNodeQuery, { riskId }),
-    Component: lazy(() => import("/pages/organizations/risks/RiskDetailPage")),
+    loader: loaderFromQueryLoader(({ riskId }) =>
+      loadQuery<RiskGraphNodeQuery>(relayEnvironment, riskNodeQuery, { riskId: riskId! }),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/risks/RiskDetailPage"))),
    children: [
      {
        path: "",
--- a/apps/console/src/routes/snapshotsRoutes.ts
+++ b/apps/console/src/routes/snapshotsRoutes.ts
@@ -2,26 +2,30 @@ import { loadQuery } from "react-relay";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { snapshotsQuery, snapshotNodeQuery } from "/hooks/graph/SnapshotGraph";
-import type { AppRoute } from "/routes";
 import { lazy } from "@probo/react-lazy";
+import type { SnapshotGraphListQuery } from "/hooks/graph/__generated__/SnapshotGraphListQuery.graphql";
+import type { SnapshotGraphNodeQuery } from "/hooks/graph/__generated__/SnapshotGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";

 export const snapshotsRoutes = [
  {
    path: "snapshots",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, snapshotsQuery, { organizationId }),
-    Component: lazy(
-      () => import("/pages/organizations/snapshots/SnapshotsPage")
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<SnapshotGraphListQuery>(relayEnvironment, snapshotsQuery, { organizationId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/snapshots/SnapshotsPage")
+    )),
  },
  {
    path: "snapshots/:snapshotId",
    fallback: PageSkeleton,
-    queryLoader: ({ snapshotId }) =>
-      loadQuery(relayEnvironment, snapshotNodeQuery, { snapshotId }),
-    Component: lazy(
-      () => import("/pages/organizations/snapshots/SnapshotDetailPage")
+    loader: loaderFromQueryLoader(({ snapshotId }) =>
+      loadQuery<SnapshotGraphNodeQuery>(relayEnvironment, snapshotNodeQuery, { snapshotId }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/snapshots/SnapshotDetailPage")
+    )),
  },
 ] satisfies AppRoute[];
--- a/apps/console/src/routes/taskRoutes.ts
+++ b/apps/console/src/routes/taskRoutes.ts
@@ -3,16 +3,17 @@ import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { loadQuery } from "react-relay";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { tasksQuery } from "/hooks/graph/TaskGraph";
-import type { AppRoute } from "/routes.tsx";
-
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";
+import type { TaskGraphQuery } from "/hooks/graph/__generated__/TaskGraphQuery.graphql";
 export const taskRoutes = [
  {
    path: "tasks",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, tasksQuery, {
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<TaskGraphQuery>(relayEnvironment, tasksQuery, {
        organizationId,
      }),
-    Component: lazy(() => import("/pages/organizations/tasks/TasksPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/tasks/TasksPage"))),
  },
 ] satisfies AppRoute[];
--- a/apps/console/src/routes/trustCenterRoutes.ts
+++ b/apps/console/src/routes/trustCenterRoutes.ts
@@ -4,17 +4,19 @@ import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { LinkCardSkeleton } from "/components/skeletons/LinkCardSkeleton";
 import { lazy } from "@probo/react-lazy";
 import { trustCenterQuery } from "../hooks/graph/TrustCenterGraph";
-import type { AppRoute } from "/routes";
+import type { TrustCenterGraphQuery } from "/hooks/graph/__generated__/TrustCenterGraphQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";

 export const trustCenterRoutes = [
  {
    path: "trust-center",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, trustCenterQuery, { organizationId }, { fetchPolicy: "network-only" }),
-    Component: lazy(
-      () => import("/pages/organizations/trustCenter/TrustCenterPage")
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<TrustCenterGraphQuery>(relayEnvironment, trustCenterQuery, { organizationId }, { fetchPolicy: "network-only" }),
    ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/trustCenter/TrustCenterPage")
+    )),
    children: [
      {
        index: true,
--- a/apps/console/src/routes/vendorRoutes.ts
+++ b/apps/console/src/routes/vendorRoutes.ts
@@ -1,42 +1,47 @@
 import { lazy } from "@probo/react-lazy";
 import { loadQuery } from "react-relay";
-import type { AppRoute } from "/routes.tsx";
 import { relayEnvironment } from "/providers/RelayProviders";
 import { PageSkeleton } from "/components/skeletons/PageSkeleton";
 import { vendorNodeQuery, vendorsQuery } from "/hooks/graph/VendorGraph";
 import { LinkCardSkeleton } from "/components/skeletons/LinkCardSkeleton";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "/routes";
+import type { VendorGraphListQuery } from "/hooks/graph/__generated__/VendorGraphListQuery.graphql";
+import type { VendorGraphNodeQuery } from "/hooks/graph/__generated__/VendorGraphNodeQuery.graphql";

 export const vendorRoutes = [
  {
    path: "vendors",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId }) =>
-      loadQuery(relayEnvironment, vendorsQuery, {
-        organizationId,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<VendorGraphListQuery>(relayEnvironment, vendorsQuery, {
+        organizationId: organizationId!,
        snapshotId: null
      }),
-    Component: lazy(() => import("/pages/organizations/vendors/VendorsPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/vendors/VendorsPage"))),
  },
  {
    path: "snapshots/:snapshotId/vendors",
    fallback: PageSkeleton,
-    queryLoader: ({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, vendorsQuery, {
-        organizationId,
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
+      loadQuery<VendorGraphListQuery>(relayEnvironment, vendorsQuery, {
+        organizationId: organizationId!,
        snapshotId
      }),
-    Component: lazy(() => import("/pages/organizations/vendors/VendorsPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/vendors/VendorsPage"))),
  },
  {
    path: "vendors/:vendorId",
    fallback: PageSkeleton,
-    queryLoader: ({ vendorId }) =>
-      loadQuery(relayEnvironment, vendorNodeQuery, {
-        vendorId,
+    loader: loaderFromQueryLoader(({ vendorId }) =>
+      loadQuery<VendorGraphNodeQuery>(relayEnvironment, vendorNodeQuery, {
+        vendorId: vendorId!,
      }),
-    Component: lazy(
-      () => import("../pages/organizations/vendors/VendorDetailPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/vendors/VendorDetailPage")
+    )),
    children: [
      {
        path: "overview",
@@ -94,13 +99,14 @@ export const vendorRoutes = [
  {
    path: "snapshots/:snapshotId/vendors/:vendorId",
    fallback: PageSkeleton,
-    queryLoader: ({ vendorId }) =>
-      loadQuery(relayEnvironment, vendorNodeQuery, {
-        vendorId,
+    loader: loaderFromQueryLoader(({ vendorId }) =>
+      loadQuery<VendorGraphNodeQuery>(relayEnvironment, vendorNodeQuery, {
+        vendorId: vendorId!,
      }),
-    Component: lazy(
-      () => import("../pages/organizations/vendors/VendorDetailPage")
    ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/vendors/VendorDetailPage")
+    )),
    children: [
      {
        path: "overview",