From 2fc614340914cdbbdb842b105c59891cb895bbb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Thu, 4 Dec 2025 14:51:48 +0400 Subject: [PATCH] Fix routes typing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Émile Ré --- apps/console/src/routes.tsx | 115 ++++++++---------- apps/console/src/routes/assetRoutes.ts | 42 ++++--- apps/console/src/routes/auditRoutes.ts | 21 ++-- .../src/routes/continualImprovementRoutes.ts | 50 ++++---- apps/console/src/routes/dataRoutes.ts | 47 ++++--- apps/console/src/routes/documentsRoutes.ts | 28 +++-- apps/console/src/routes/frameworkRoutes.ts | 32 +++-- apps/console/src/routes/measureRoutes.ts | 18 +-- apps/console/src/routes/meetingsRoutes.ts | 30 +++-- .../console/src/routes/nonconformityRoutes.ts | 52 ++++---- apps/console/src/routes/obligationRoutes.ts | 52 ++++---- apps/console/src/routes/peopleRoutes.ts | 20 +-- .../src/routes/processingActivityRoutes.ts | 50 ++++---- apps/console/src/routes/riskRoutes.ts | 38 +++--- apps/console/src/routes/snapshotsRoutes.ts | 22 ++-- apps/console/src/routes/taskRoutes.ts | 11 +- apps/console/src/routes/trustCenterRoutes.ts | 12 +- apps/console/src/routes/vendorRoutes.ts | 44 ++++--- 18 files changed, 375 insertions(+), 309 deletions(-) diff --git a/apps/console/src/routes.tsx b/apps/console/src/routes.tsx index 7ddec48c7..dc1092979 100644 --- 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 = Omit & { - Component?: React.ComponentType; - children?: AppRoute[]; - fallback?: React.ComponentType; - queryLoader?: undefined; +export function withQueryRef< + TQuery extends OperationType, + TEnvironmentProviderOptions = EnvironmentProviderOptions +>( + Component: LazyExoticComponent }>>, +) { + return () => { + const { queryRef, dispose } = useLoaderData(); + + useCleanup(dispose, 1000); + + return + } } -type AppRouteWithQuery = Omit & { - Component?: - LazyExoticComponent }>>; - children?: AppRoute[]; - fallback?: React.ComponentType; - queryLoader?: (params: VariablesOf) => PreloadedQuery; +export function loaderFromQueryLoader< + TQuery extends OperationType, + TEnvironmentProviderOptions = EnvironmentProviderOptions +>( + queryLoader: (params: Record) => PreloadedQuery +): LoaderFunction { + return ({ params }: LoaderFunctionArgs) => { + const query = queryLoader(params as Record); + return { + queryRef: query, + dispose: query.dispose, + }; + } } -export type AppRoute = AppRouteWithoutQuery | AppRouteWithQuery; +export type AppRoute = Omit & { + children?: AppRoute[]; + fallback?: ComponentType; +} /** * Top level error boundary @@ -154,11 +172,13 @@ const routes = [ { path: "settings", fallback: PageSkeleton, - queryLoader: ({ organizationId }: VariablesOf) => - 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[]; +] satisfies AppRoute[]; /** * Wrap components with suspense to handle lazy loading & relay loading states */ -function routeTransformer({ +function routeTransformer({ Component, fallback: FallbackComponent, - queryLoader, children, ...rest -}: AppRoute): 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: () => ( }> - ); - - route = { - ...route, - Component: RouteComponent, - }; - } else if (queryLoader) { - const OriginalComponent = Component as LazyExoticComponent }>>; - - RouteComponent = () => { - const { queryRef, dispose } = useLoaderData(); - - useCleanup(dispose, 1000); - - return ( - : null}> - - - ); - }; - - const loader: LoaderFunction = ({ params }) => { - const query = queryLoader(params as VariablesOf); - return { - queryRef: query, - dispose: query.dispose, - }; - }; - - route = { - ...route, - loader: loader, - Component: RouteComponent, - }; - } + ), + }; } return { ...route, - children: children?.map(routeTransformer), + children: children?.map(routeTransformer), } as RouteObject; } diff --git a/apps/console/src/routes/assetRoutes.ts b/apps/console/src/routes/assetRoutes.ts index ad3aacb1d..ed1f42cf9 100644 --- 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) => - loadQuery(relayEnvironment, assetsQuery, { - organizationId: params.organizationId, + loader: loaderFromQueryLoader(({ organizationId }) => + loadQuery(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) => - loadQuery(relayEnvironment, assetsQuery, { - organizationId: params.organizationId, - snapshotId: params.snapshotId, + loader: loaderFromQueryLoader(({ organizationId, snapshotId }) => + loadQuery(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) => - loadQuery(relayEnvironment, assetNodeQuery, { assetId: params.assetId }), - Component: lazy( - () => import("/pages/organizations/assets/AssetDetailsPage"), + loader: loaderFromQueryLoader(({ assetId }) => + loadQuery(relayEnvironment, assetNodeQuery, { assetId }), ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/assets/AssetDetailsPage"), + )), }, { path: "snapshots/:snapshotId/assets/:assetId", fallback: PageSkeleton, - queryLoader: (params: Record) => - loadQuery(relayEnvironment, assetNodeQuery, { assetId: params.assetId }), - Component: lazy( - () => import("/pages/organizations/assets/AssetDetailsPage"), + loader: loaderFromQueryLoader(({ assetId }) => + loadQuery(relayEnvironment, assetNodeQuery, { assetId }), ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/assets/AssetDetailsPage"), + )), }, ] satisfies AppRoute[]; diff --git a/apps/console/src/routes/auditRoutes.ts b/apps/console/src/routes/auditRoutes.ts index 6d3418e10..f253d1d40 100644 --- 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) => - loadQuery(relayEnvironment, auditsQuery, { organizationId: params.organizationId }), - Component: lazy( - () => import("/pages/organizations/audits/AuditsPage") + loader: loaderFromQueryLoader(({ organizationId }) => + loadQuery(relayEnvironment, auditsQuery, { organizationId }), ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/audits/AuditsPage") + )), }, { path: "audits/:auditId", fallback: PageSkeleton, - queryLoader: (params: Record) => - loadQuery(relayEnvironment, auditNodeQuery, { auditId: params.auditId }), - Component: lazy( - () => import("/pages/organizations/audits/AuditDetailsPage") + loader: loaderFromQueryLoader(({ auditId }) => + loadQuery(relayEnvironment, auditNodeQuery, { auditId }), ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/audits/AuditDetailsPage") + )), }, ]; diff --git a/apps/console/src/routes/continualImprovementRoutes.ts b/apps/console/src/routes/continualImprovementRoutes.ts index 64e63d593..4ca117d74 100644 --- 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) => - loadQuery(relayEnvironment, continualImprovementsQuery, { - organizationId: params.organizationId, + loader: loaderFromQueryLoader(({ organizationId }) => + loadQuery(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) => - loadQuery(relayEnvironment, continualImprovementsQuery, { - organizationId: params.organizationId, - snapshotId: params.snapshotId + loader: loaderFromQueryLoader(({ organizationId, snapshotId }) => + loadQuery(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) => - loadQuery(relayEnvironment, continualImprovementNodeQuery, { - continualImprovementId: params.improvementId + loader: loaderFromQueryLoader(({ improvementId }) => + loadQuery(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) => - loadQuery(relayEnvironment, continualImprovementNodeQuery, { - continualImprovementId: params.improvementId + loader: loaderFromQueryLoader(({ improvementId }) => + loadQuery(relayEnvironment, continualImprovementNodeQuery, { + continualImprovementId: improvementId!, }), - Component: lazy( - () => import("/pages/organizations/continualImprovements/ContinualImprovementDetailsPage") ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/continualImprovements/ContinualImprovementDetailsPage") + )), }, ] satisfies AppRoute[]; diff --git a/apps/console/src/routes/dataRoutes.ts b/apps/console/src/routes/dataRoutes.ts index 7436ab41a..f93b06031 100644 --- 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) => - loadQuery(relayEnvironment, dataQuery, { - organizationId: params.organizationId, + loader: loaderFromQueryLoader(({ organizationId }) => + loadQuery(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) => - loadQuery(relayEnvironment, dataQuery, { - organizationId: params.organizationId, - snapshotId: params.snapshotId + loader: loaderFromQueryLoader(({ organizationId, snapshotId }) => + loadQuery(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) => - loadQuery(relayEnvironment, datumNodeQuery, { dataId: params.dataId }), - Component: lazy( - () => import("../pages/organizations/data/DatumDetailsPage") + loader: loaderFromQueryLoader(({ dataId }) => + loadQuery(relayEnvironment, datumNodeQuery, { dataId }), ), + Component: withQueryRef(lazy( + () => import("../pages/organizations/data/DatumDetailsPage") + )), }, { path: "snapshots/:snapshotId/data/:dataId", fallback: PageSkeleton, - queryLoader: (params: Record) => - loadQuery(relayEnvironment, datumNodeQuery, { dataId: params.dataId }), - Component: lazy( - () => import("../pages/organizations/data/DatumDetailsPage") + loader: loaderFromQueryLoader(({ dataId }) => + loadQuery(relayEnvironment, datumNodeQuery, { dataId }), ), + Component: withQueryRef(lazy( + () => import("../pages/organizations/data/DatumDetailsPage") + )), }, -] +] satisfies AppRoute[]; diff --git a/apps/console/src/routes/documentsRoutes.ts b/apps/console/src/routes/documentsRoutes.ts index 6f2691052..c51584c1d 100644 --- 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(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(relayEnvironment, documentNodeQuery, { documentId: documentId! }), ), + Component: withQueryRef(lazy( + () => import("../pages/organizations/documents/DocumentDetailPage"), + )), children: [...documentTabs(""), ...documentTabs("versions/:versionId/")], }, ] satisfies AppRoute[]; diff --git a/apps/console/src/routes/frameworkRoutes.ts b/apps/console/src/routes/frameworkRoutes.ts index 87a37a2b6..06522eebf 100644 --- 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(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(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(relayEnvironment, frameworkControlNodeQuery, { controlId: controlId! }), ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/frameworks/FrameworkControlPage") + )), }, ], }, diff --git a/apps/console/src/routes/measureRoutes.ts b/apps/console/src/routes/measureRoutes.ts index 8cb7f4133..3a460dc0a 100644 --- 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(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(relayEnvironment, measureNodeQuery, { measureId: measureId! }), ), + Component: withQueryRef(lazy(() => import("/pages/organizations/measures/MeasureDetailPage"))), children: [ { path: "", diff --git a/apps/console/src/routes/meetingsRoutes.ts b/apps/console/src/routes/meetingsRoutes.ts index 92b7ebbc0..dfd1dc5fc 100644 --- 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(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(relayEnvironment, meetingNodeQuery, { meetingId }), ), + Component: withQueryRef(lazy( + () => import("../pages/organizations/meetings/MeetingDetailPage"), + )), children: [...meetingTabs("")], }, -] satisfies AppRoute[]; +]; diff --git a/apps/console/src/routes/nonconformityRoutes.ts b/apps/console/src/routes/nonconformityRoutes.ts index ce9922429..473a21bb4 100644 --- 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) => - loadQuery(relayEnvironment, nonconformitiesQuery, { - organizationId: params.organizationId, + loader: loaderFromQueryLoader(({ organizationId }) => + loadQuery(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) => - loadQuery(relayEnvironment, nonconformitiesQuery, { - organizationId: params.organizationId, - snapshotId: params.snapshotId + loader: loaderFromQueryLoader(({ organizationId, snapshotId }) => + loadQuery(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) => - loadQuery(relayEnvironment, nonconformityNodeQuery, { - nonconformityId: params.nonconformityId + loader: loaderFromQueryLoader(({ nonconformityId }) => + loadQuery(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) => - loadQuery(relayEnvironment, nonconformityNodeQuery, { - nonconformityId: params.nonconformityId + loader: loaderFromQueryLoader(({ nonconformityId }) => + loadQuery(relayEnvironment, nonconformityNodeQuery, { + nonconformityId: nonconformityId }), - Component: lazy( - () => import("../pages/organizations/nonconformities/NonconformityDetailsPage") ), + Component: withQueryRef(lazy( + () => import("../pages/organizations/nonconformities/NonconformityDetailsPage") + )), }, ] satisfies AppRoute[]; diff --git a/apps/console/src/routes/obligationRoutes.ts b/apps/console/src/routes/obligationRoutes.ts index a31da7f96..18de5253d 100644 --- 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) => - loadQuery(relayEnvironment, obligationsQuery, { - organizationId: params.organizationId, + loader: loaderFromQueryLoader(({ organizationId }) => + loadQuery(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) => - loadQuery(relayEnvironment, obligationsQuery, { - organizationId: params.organizationId, - snapshotId: params.snapshotId + loader: loaderFromQueryLoader(({ organizationId, snapshotId }) => + loadQuery(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) => - loadQuery(relayEnvironment, obligationNodeQuery, { - obligationId: params.obligationId + loader: loaderFromQueryLoader(({ obligationId }) => + loadQuery(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) => - loadQuery(relayEnvironment, obligationNodeQuery, { - obligationId: params.obligationId + loader: loaderFromQueryLoader(({ obligationId }) => + loadQuery(relayEnvironment, obligationNodeQuery, { + obligationId, }), - Component: lazy( - () => import("/pages/organizations/obligations/ObligationDetailsPage") ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/obligations/ObligationDetailsPage") + )), }, -] satisfies AppRoute[]; +]; diff --git a/apps/console/src/routes/peopleRoutes.ts b/apps/console/src/routes/peopleRoutes.ts index 8ff3ac174..a85c73fd1 100644 --- 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(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(relayEnvironment, peopleNodeQuery, { peopleId: peopleId! }), ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/people/PeopleDetailPage") + )), children: [ { path: "tasks", diff --git a/apps/console/src/routes/processingActivityRoutes.ts b/apps/console/src/routes/processingActivityRoutes.ts index 67c465075..25462b861 100644 --- 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) => - loadQuery(relayEnvironment, processingActivitiesQuery, { - organizationId: params.organizationId, + loader: loaderFromQueryLoader(({ organizationId }) => + loadQuery(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) => - loadQuery(relayEnvironment, processingActivitiesQuery, { - organizationId: params.organizationId, - snapshotId: params.snapshotId + loader: loaderFromQueryLoader(({ organizationId, snapshotId }) => + loadQuery(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) => - loadQuery(relayEnvironment, processingActivityNodeQuery, { - processingActivityId: params.activityId + loader: loaderFromQueryLoader(({ activityId }) => + loadQuery(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) => - loadQuery(relayEnvironment, processingActivityNodeQuery, { - processingActivityId: params.activityId + loader: loaderFromQueryLoader(({ activityId }) => + loadQuery(relayEnvironment, processingActivityNodeQuery, { + processingActivityId: activityId!, }), - Component: lazy( - () => import("/pages/organizations/processingActivities/ProcessingActivityDetailsPage") ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/processingActivities/ProcessingActivityDetailsPage") + )), }, ] satisfies AppRoute[]; diff --git a/apps/console/src/routes/riskRoutes.ts b/apps/console/src/routes/riskRoutes.ts index c57988f59..2fd93744f 100644 --- 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(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(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(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(relayEnvironment, riskNodeQuery, { riskId: riskId! }), + ), + Component: withQueryRef(lazy(() => import("/pages/organizations/risks/RiskDetailPage"))), children: [ { path: "", diff --git a/apps/console/src/routes/snapshotsRoutes.ts b/apps/console/src/routes/snapshotsRoutes.ts index 3efed2fc8..8303749f1 100644 --- 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(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(relayEnvironment, snapshotNodeQuery, { snapshotId }), ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/snapshots/SnapshotDetailPage") + )), }, ] satisfies AppRoute[]; diff --git a/apps/console/src/routes/taskRoutes.ts b/apps/console/src/routes/taskRoutes.ts index 729473159..e3b75c15d 100644 --- 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(relayEnvironment, tasksQuery, { organizationId, }), - Component: lazy(() => import("/pages/organizations/tasks/TasksPage")), + ), + Component: withQueryRef(lazy(() => import("/pages/organizations/tasks/TasksPage"))), }, ] satisfies AppRoute[]; diff --git a/apps/console/src/routes/trustCenterRoutes.ts b/apps/console/src/routes/trustCenterRoutes.ts index f5b765eb6..a47dc1d56 100644 --- 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(relayEnvironment, trustCenterQuery, { organizationId }, { fetchPolicy: "network-only" }), ), + Component: withQueryRef(lazy( + () => import("/pages/organizations/trustCenter/TrustCenterPage") + )), children: [ { index: true, diff --git a/apps/console/src/routes/vendorRoutes.ts b/apps/console/src/routes/vendorRoutes.ts index e2b209beb..7c7ec7095 100644 --- 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(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(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(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(relayEnvironment, vendorNodeQuery, { + vendorId: vendorId!, }), - Component: lazy( - () => import("../pages/organizations/vendors/VendorDetailPage") ), + Component: withQueryRef(lazy( + () => import("../pages/organizations/vendors/VendorDetailPage") + )), children: [ { path: "overview",