Fix routes typing

Signed-off-by: Émile Ré <nemile.re@gmail.com>

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 { OperationType } from "relay-runtime";
-import type { OrganizationGraph_ViewQuery } from "./hooks/graph/__generated__/OrganizationGraph_ViewQuery.graphql.ts";
 
-type AppRouteWithoutQuery<TQuery extends OperationType> = Omit<RouteObject, "Component" | "children"> & {
+export function withQueryRef<
-  Component?: React.ComponentType;
+  TQuery extends OperationType,
-  children?: AppRoute<TQuery>[];
+  TEnvironmentProviderOptions = EnvironmentProviderOptions
-  fallback?: React.ComponentType;
+>(
-  queryLoader?: undefined;
+  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"> & {
+export function loaderFromQueryLoader<
-  Component?:
+  TQuery extends OperationType,
-    LazyExoticComponent<ComponentType<{ queryRef: PreloadedQuery<TQuery, EnvironmentProviderOptions> }>>;
+  TEnvironmentProviderOptions = EnvironmentProviderOptions
-  children?: AppRoute<TQuery>[];
+>(
-  fallback?: React.ComponentType;
+  queryLoader: (params: Record<string, string>) => PreloadedQuery<TQuery, TEnvironmentProviderOptions>
-  queryLoader?: (params: VariablesOf<TQuery>) => PreloadedQuery<TQuery, EnvironmentProviderOptions>;
+): 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>) =>
+        loader: loaderFromQueryLoader(
+          ({ organizationId }) =>
             loadQuery(relayEnvironment, organizationViewQuery, {
-            organizationId,
+              organizationId: organizationId!,
-          }),
+            })
-        Component: lazy(() => import("./pages/organizations/SettingsPage")),
+        ),
+        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) {
+  if (Component && FallbackComponent) {
-    let RouteComponent = Component;
-
-    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;
 }
 

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>) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, assetsQuery, {
+      loadQuery<AssetGraphListQuery>(relayEnvironment, assetsQuery, {
-        organizationId: params.organizationId,
+        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>) =>
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, assetsQuery, {
+      loadQuery<AssetGraphListQuery>(relayEnvironment, assetsQuery, {
-        organizationId: params.organizationId,
+        organizationId: organizationId,
-        snapshotId: params.snapshotId,
+        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>) =>
+    loader: loaderFromQueryLoader(({ assetId }) =>
-      loadQuery(relayEnvironment, assetNodeQuery, { assetId: params.assetId }),
+      loadQuery<AssetGraphNodeQuery>(relayEnvironment, assetNodeQuery, { assetId }),
-    Component: lazy(
-      () => import("/pages/organizations/assets/AssetDetailsPage"),
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/assets/AssetDetailsPage"),
+    )),
   },
   {
     path: "snapshots/:snapshotId/assets/:assetId",
     fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
+    loader: loaderFromQueryLoader(({ assetId }) =>
-      loadQuery(relayEnvironment, assetNodeQuery, { assetId: params.assetId }),
+      loadQuery<AssetGraphNodeQuery>(relayEnvironment, assetNodeQuery, { assetId }),
-    Component: lazy(
-      () => import("/pages/organizations/assets/AssetDetailsPage"),
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/assets/AssetDetailsPage"),
+    )),
   },
 ] satisfies AppRoute[];

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>) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, auditsQuery, { organizationId: params.organizationId }),
+      loadQuery<AuditGraphListQuery>(relayEnvironment, auditsQuery, { organizationId }),
-    Component: lazy(
-      () => import("/pages/organizations/audits/AuditsPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/audits/AuditsPage")
+    )),
   },
   {
     path: "audits/:auditId",
     fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
+    loader: loaderFromQueryLoader(({ auditId }) =>
-      loadQuery(relayEnvironment, auditNodeQuery, { auditId: params.auditId }),
+      loadQuery<AuditGraphNodeQuery>(relayEnvironment, auditNodeQuery, { auditId }),
-    Component: lazy(
-      () => import("/pages/organizations/audits/AuditDetailsPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/audits/AuditDetailsPage")
+    )),
   },
 ];

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>) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, continualImprovementsQuery, {
+      loadQuery<ContinualImprovementGraphListQuery>(relayEnvironment, continualImprovementsQuery, {
-        organizationId: params.organizationId,
+        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>) =>
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, continualImprovementsQuery, {
+      loadQuery<ContinualImprovementGraphListQuery>(relayEnvironment, continualImprovementsQuery, {
-        organizationId: params.organizationId,
+        organizationId,
-        snapshotId: params.snapshotId
+        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>) =>
+    loader: loaderFromQueryLoader(({ improvementId }) =>
-      loadQuery(relayEnvironment, continualImprovementNodeQuery, {
+      loadQuery<ContinualImprovementGraphNodeQuery>(relayEnvironment, continualImprovementNodeQuery, {
-        continualImprovementId: params.improvementId
+        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>) =>
+    loader: loaderFromQueryLoader(({ improvementId }) =>
-      loadQuery(relayEnvironment, continualImprovementNodeQuery, {
+      loadQuery<ContinualImprovementGraphNodeQuery>(relayEnvironment, continualImprovementNodeQuery, {
-        continualImprovementId: params.improvementId
+        continualImprovementId: improvementId!,
       }),
-    Component: lazy(
-      () => import("/pages/organizations/continualImprovements/ContinualImprovementDetailsPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/continualImprovements/ContinualImprovementDetailsPage")
+    )),
   },
 ] satisfies AppRoute[];

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>) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, dataQuery, {
+      loadQuery<DatumGraphListQuery>(relayEnvironment, dataQuery, {
-        organizationId: params.organizationId,
+        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>) =>
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, dataQuery, {
+      loadQuery<DatumGraphListQuery>(relayEnvironment, dataQuery, {
-        organizationId: params.organizationId,
+        organizationId,
-        snapshotId: params.snapshotId
+        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>) =>
+    loader: loaderFromQueryLoader(({ dataId }) =>
-      loadQuery(relayEnvironment, datumNodeQuery, { dataId: params.dataId }),
+      loadQuery<DatumGraphNodeQuery>(relayEnvironment, datumNodeQuery, { dataId }),
-    Component: lazy(
-      () => import("../pages/organizations/data/DatumDetailsPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/data/DatumDetailsPage")
+    )),
   },
   {
     path: "snapshots/:snapshotId/data/:dataId",
     fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
+    loader: loaderFromQueryLoader(({ dataId }) =>
-      loadQuery(relayEnvironment, datumNodeQuery, { dataId: params.dataId }),
+      loadQuery<DatumGraphNodeQuery>(relayEnvironment, datumNodeQuery, { dataId }),
-    Component: lazy(
-      () => import("../pages/organizations/data/DatumDetailsPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/data/DatumDetailsPage")
+    )),
   },
-]
+] satisfies AppRoute[];

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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, documentsQuery, { organizationId }),
+      loadQuery<DocumentGraphListQuery>(relayEnvironment, documentsQuery, { organizationId: organizationId! }),
-    Component: lazy(
-      () => import("/pages/organizations/documents/DocumentsPage"),
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/documents/DocumentsPage"),
+    )),
   },
   {
     path: "documents/:documentId",
     fallback: PageSkeleton,
-    queryLoader: ({ documentId }) =>
+    loader: loaderFromQueryLoader(({ documentId }) =>
-      loadQuery(relayEnvironment, documentNodeQuery, { documentId }),
+      loadQuery<DocumentGraphNodeQuery>(relayEnvironment, documentNodeQuery, { documentId: documentId! }),
-    Component: lazy(
-      () => import("../pages/organizations/documents/DocumentDetailPage"),
     ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/documents/DocumentDetailPage"),
+    )),
     children: [...documentTabs(""), ...documentTabs("versions/:versionId/")],
   },
 ] satisfies AppRoute[];

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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, frameworksQuery, { organizationId }),
+      loadQuery<FrameworkGraphListQuery>(relayEnvironment, frameworksQuery, { organizationId: organizationId! }),
-    Component: lazy(
-      () => import("/pages/organizations/frameworks/FrameworksPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/frameworks/FrameworksPage")
+    )),
   },
   {
     path: "frameworks/:frameworkId",
     fallback: PageSkeleton,
-    queryLoader: ({ frameworkId }) =>
+    loader: loaderFromQueryLoader(({ frameworkId }) =>
-      loadQuery(relayEnvironment, frameworkNodeQuery, { frameworkId }),
+      loadQuery<FrameworkGraphNodeQuery>(relayEnvironment, frameworkNodeQuery, { frameworkId: frameworkId! }),
-    Component: lazy(
-      () => import("/pages/organizations/frameworks/FrameworkDetailPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/frameworks/FrameworkDetailPage")
+    )),
     children: [
       {
         path: "",
@@ -37,11 +42,12 @@ export const frameworkRoutes = [
       {
         path: "controls/:controlId",
         fallback: ControlSkeleton,
-        queryLoader: ({ controlId }) =>
+        loader: loaderFromQueryLoader(({ controlId }) =>
-          loadQuery(relayEnvironment, frameworkControlNodeQuery, { controlId }),
+          loadQuery<FrameworkGraphControlNodeQuery>(relayEnvironment, frameworkControlNodeQuery, { controlId: controlId! }),
-        Component: lazy(
-          () => import("/pages/organizations/frameworks/FrameworkControlPage")
         ),
+        Component: withQueryRef(lazy(
+          () => import("/pages/organizations/frameworks/FrameworkControlPage")
+        )),
       },
     ],
   },

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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, measuresQuery, { organizationId }),
+      loadQuery<MeasureGraphListQuery>(relayEnvironment, measuresQuery, { organizationId: organizationId! }),
-    Component: lazy(() => import("/pages/organizations/measures/MeasuresPage")),
+    ),
+    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 }) =>
+    loader: loaderFromQueryLoader(({ measureId }) =>
-      loadQuery(relayEnvironment, measureNodeQuery, { measureId }),
+      loadQuery<MeasureGraphNodeQuery>(relayEnvironment, measureNodeQuery, { measureId: measureId! }),
-    Component: lazy(
-      () => import("/pages/organizations/measures/MeasureDetailPage")
     ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/measures/MeasureDetailPage"))),
     children: [
       {
         path: "",

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

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 = [
   {
     path: "nonconformities",
     fallback: PageSkeleton,
-    queryLoader: (params: Record<string, string>) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, nonconformitiesQuery, {
+      loadQuery<NonconformityGraphListQuery>(relayEnvironment, nonconformitiesQuery, {
-        organizationId: params.organizationId,
+        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>) =>
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, nonconformitiesQuery, {
+      loadQuery<NonconformityGraphListQuery>(relayEnvironment, nonconformitiesQuery, {
-        organizationId: params.organizationId,
+        organizationId,
-        snapshotId: params.snapshotId
+        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>) =>
+    loader: loaderFromQueryLoader(({ nonconformityId }) =>
-      loadQuery(relayEnvironment, nonconformityNodeQuery, {
+      loadQuery<NonconformityGraphNodeQuery>(relayEnvironment, nonconformityNodeQuery, {
-        nonconformityId: params.nonconformityId
+        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>) =>
+    loader: loaderFromQueryLoader(({ nonconformityId }) =>
-      loadQuery(relayEnvironment, nonconformityNodeQuery, {
+      loadQuery<NonconformityGraphNodeQuery>(relayEnvironment, nonconformityNodeQuery, {
-        nonconformityId: params.nonconformityId
+        nonconformityId: nonconformityId
       }),
-    Component: lazy(
-      () => import("../pages/organizations/nonconformities/NonconformityDetailsPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/nonconformities/NonconformityDetailsPage")
+    )),
   },
 ] satisfies AppRoute[];

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>) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, obligationsQuery, {
+      loadQuery<ObligationGraphListQuery>(relayEnvironment, obligationsQuery, {
-        organizationId: params.organizationId,
+        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>) =>
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, obligationsQuery, {
+      loadQuery<ObligationGraphListQuery>(relayEnvironment, obligationsQuery, {
-        organizationId: params.organizationId,
+        organizationId,
-        snapshotId: params.snapshotId
+        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>) =>
+    loader: loaderFromQueryLoader(({ obligationId }) =>
-      loadQuery(relayEnvironment, obligationNodeQuery, {
+      loadQuery<ObligationGraphNodeQuery>(relayEnvironment, obligationNodeQuery, {
-        obligationId: params.obligationId
+        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>) =>
+    loader: loaderFromQueryLoader(({ obligationId }) =>
-      loadQuery(relayEnvironment, obligationNodeQuery, {
+      loadQuery<ObligationGraphNodeQuery>(relayEnvironment, obligationNodeQuery, {
-        obligationId: params.obligationId
+        obligationId,
       }),
-    Component: lazy(
-      () => import("/pages/organizations/obligations/ObligationDetailsPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/obligations/ObligationDetailsPage")
+    )),
   },
-] satisfies AppRoute[];
+];

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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, paginatedPeopleQuery, { organizationId }),
+      loadQuery<PeopleGraphPaginatedQuery>(relayEnvironment, paginatedPeopleQuery, { organizationId: organizationId! }),
-    Component: lazy(() => import("/pages/organizations/people/PeopleListPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/people/PeopleListPage"))),
   },
   {
     path: "people/:peopleId",
     fallback: PageSkeleton,
-    queryLoader: ({ peopleId }) =>
+    loader: loaderFromQueryLoader(({ peopleId }) =>
-      loadQuery(relayEnvironment, peopleNodeQuery, { peopleId }),
+      loadQuery<PeopleGraphNodeQuery>(relayEnvironment, peopleNodeQuery, { peopleId: peopleId! }),
-    Component: lazy(
-      () => import("/pages/organizations/people/PeopleDetailPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/people/PeopleDetailPage")
+    )),
     children: [
       {
         path: "tasks",

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>) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, processingActivitiesQuery, {
+      loadQuery<ProcessingActivityGraphListQuery>(relayEnvironment, processingActivitiesQuery, {
-        organizationId: params.organizationId,
+        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>) =>
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, processingActivitiesQuery, {
+      loadQuery<ProcessingActivityGraphListQuery>(relayEnvironment, processingActivitiesQuery, {
-        organizationId: params.organizationId,
+        organizationId: organizationId!,
-        snapshotId: params.snapshotId
+        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>) =>
+    loader: loaderFromQueryLoader(({ activityId }) =>
-      loadQuery(relayEnvironment, processingActivityNodeQuery, {
+      loadQuery<ProcessingActivityGraphNodeQuery>(relayEnvironment, processingActivityNodeQuery, {
-        processingActivityId: params.activityId
+        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>) =>
+    loader: loaderFromQueryLoader(({ activityId }) =>
-      loadQuery(relayEnvironment, processingActivityNodeQuery, {
+      loadQuery<ProcessingActivityGraphNodeQuery>(relayEnvironment, processingActivityNodeQuery, {
-        processingActivityId: params.activityId
+        processingActivityId: activityId!,
       }),
-    Component: lazy(
-      () => import("/pages/organizations/processingActivities/ProcessingActivityDetailsPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/processingActivities/ProcessingActivityDetailsPage")
+    )),
   },
 ] satisfies AppRoute[];

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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, risksQuery, {
+      loadQuery<RiskGraphListQuery>(relayEnvironment, risksQuery, {
-        organizationId,
+        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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, risksQuery, {
+      loadQuery<RiskGraphListQuery>(relayEnvironment, risksQuery, {
-        organizationId,
+        organizationId: organizationId!,
-        snapshotId
+        snapshotId: snapshotId!
       }),
-    Component: lazy(() => import("/pages/organizations/risks/RisksPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/risks/RisksPage"))),
   },
   {
     path: "risks/:riskId",
     fallback: PageSkeleton,
-    queryLoader: ({ riskId }) =>
+    loader: loaderFromQueryLoader(({ riskId }) =>
-      loadQuery(relayEnvironment, riskNodeQuery, { riskId }),
+      loadQuery<RiskGraphNodeQuery>(relayEnvironment, riskNodeQuery, { riskId: riskId! }),
-    Component: lazy(() => import("/pages/organizations/risks/RiskDetailPage")),
+    ),
+    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 }) =>
+    loader: loaderFromQueryLoader(({ riskId }) =>
-      loadQuery(relayEnvironment, riskNodeQuery, { riskId }),
+      loadQuery<RiskGraphNodeQuery>(relayEnvironment, riskNodeQuery, { riskId: riskId! }),
-    Component: lazy(() => import("/pages/organizations/risks/RiskDetailPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/risks/RiskDetailPage"))),
     children: [
       {
         path: "",

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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, snapshotsQuery, { organizationId }),
+      loadQuery<SnapshotGraphListQuery>(relayEnvironment, snapshotsQuery, { organizationId }),
-    Component: lazy(
-      () => import("/pages/organizations/snapshots/SnapshotsPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/snapshots/SnapshotsPage")
+    )),
   },
   {
     path: "snapshots/:snapshotId",
     fallback: PageSkeleton,
-    queryLoader: ({ snapshotId }) =>
+    loader: loaderFromQueryLoader(({ snapshotId }) =>
-      loadQuery(relayEnvironment, snapshotNodeQuery, { snapshotId }),
+      loadQuery<SnapshotGraphNodeQuery>(relayEnvironment, snapshotNodeQuery, { snapshotId }),
-    Component: lazy(
-      () => import("/pages/organizations/snapshots/SnapshotDetailPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/snapshots/SnapshotDetailPage")
+    )),
   },
 ] satisfies AppRoute[];

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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, tasksQuery, {
+      loadQuery<TaskGraphQuery>(relayEnvironment, tasksQuery, {
         organizationId,
       }),
-    Component: lazy(() => import("/pages/organizations/tasks/TasksPage")),
+    ),
+    Component: withQueryRef(lazy(() => import("/pages/organizations/tasks/TasksPage"))),
   },
 ] satisfies AppRoute[];

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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, trustCenterQuery, { organizationId }, { fetchPolicy: "network-only" }),
+      loadQuery<TrustCenterGraphQuery>(relayEnvironment, trustCenterQuery, { organizationId }, { fetchPolicy: "network-only" }),
-    Component: lazy(
-      () => import("/pages/organizations/trustCenter/TrustCenterPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("/pages/organizations/trustCenter/TrustCenterPage")
+    )),
     children: [
       {
         index: true,

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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId }) =>
-      loadQuery(relayEnvironment, vendorsQuery, {
+      loadQuery<VendorGraphListQuery>(relayEnvironment, vendorsQuery, {
-        organizationId,
+        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 }) =>
+    loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
-      loadQuery(relayEnvironment, vendorsQuery, {
+      loadQuery<VendorGraphListQuery>(relayEnvironment, vendorsQuery, {
-        organizationId,
+        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 }) =>
+    loader: loaderFromQueryLoader(({ vendorId }) =>
-      loadQuery(relayEnvironment, vendorNodeQuery, {
+      loadQuery<VendorGraphNodeQuery>(relayEnvironment, vendorNodeQuery, {
-        vendorId,
+        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 }) =>
+    loader: loaderFromQueryLoader(({ vendorId }) =>
-      loadQuery(relayEnvironment, vendorNodeQuery, {
+      loadQuery<VendorGraphNodeQuery>(relayEnvironment, vendorNodeQuery, {
-        vendorId,
+        vendorId: vendorId!,
       }),
-    Component: lazy(
-      () => import("../pages/organizations/vendors/VendorDetailPage")
     ),
+    Component: withQueryRef(lazy(
+      () => import("../pages/organizations/vendors/VendorDetailPage")
+    )),
     children: [
       {
         path: "overview",