rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use loader for relay

Browse Source 
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
2025-05-23 13:08:33 +02:00
committed by Sacha Al Himdani
parent 1448d37d55
commit fbfc3bb2b5
11 changed files with 829 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
apps/console2/src/hooks/graph/RiskGraph.ts
View File

@@ -2,9 +2,14 @@ import { ConnectionHandler, graphql } from "relay-runtime";
import { useTranslate } from "@probo/i18n";
import { useMutationWithToasts } from "../useMutationWithToasts.ts";
import type { RiskGraphDeleteMutation } from "./__generated__/RiskGraphDeleteMutation.graphql.ts";
import { useLazyLoadQuery, useRefetchableFragment } from "react-relay";
import {
useLazyLoadQuery,
usePreloadedQuery,
useRefetchableFragment,
type PreloadedQuery,
} from "react-relay";
import { useOrganizationId } from "../useOrganizationId.ts";
import type { RiskGraphQuery } from "./__generated__/RiskGraphQuery.graphql.ts";
import type { RiskGraphListQuery } from "./__generated__/RiskGraphListQuery.graphql.ts";
import type { RiskGraphFragment$key } from "./__generated__/RiskGraphFragment.graphql.ts";
const deleteRiskMutation = graphql`
@@ -27,8 +32,8 @@ export function useDeleteRiskMutation() {
});
}
const risksQuery = graphql`
query RiskGraphQuery($organizationId: ID!) {
export const risksQuery = graphql`
query RiskGraphListQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
id
...RiskGraphFragment
@@ -74,13 +79,11 @@ const risksFragment = graphql`
export const RisksConnectionKey = "RisksListQuery_risks";
export function useRisksQuery() {
const data = useLazyLoadQuery<RiskGraphQuery>(risksQuery, {
organizationId: useOrganizationId(),
});
export function useRisksQuery(queryRef: PreloadedQuery<RiskGraphListQuery>) {
const data = usePreloadedQuery(risksQuery, queryRef);
const [dataFragment, refetch] = useRefetchableFragment(
risksFragment,
data.organization as RiskGraphFragment$key,
data.organization as RiskGraphFragment$key
);
const risks = dataFragment?.risks?.edges.map((edge) => edge.node);
return {
@@ -88,7 +91,26 @@ export function useRisksQuery() {
refetch,
connectionId: ConnectionHandler.getConnectionID(
data.organization.id,
RisksConnectionKey,
RisksConnectionKey
),
};
}
export const riskNodeQuery = graphql`
query RiskGraphNodeQuery($riskId: ID!) {
node(id: $riskId) {
... on Risk {
name
description
treatment
owner {
id
fullName
}
note
...useRiskFormFragment
...RiskOverviewTabFragment
}
}
}
`;

313
apps/console2/src/hooks/graph/__generated__/RiskGraphListQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,313 @@
/**
* @generated SignedSource<<8ae6d82b30ec5657f8a55bd47fab4e7e>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type RiskGraphListQuery$variables = {
organizationId: string;
};
export type RiskGraphListQuery$data = {
readonly organization: {
readonly id: string;
readonly " $fragmentSpreads": FragmentRefs<"RiskGraphFragment">;
};
};
export type RiskGraphListQuery = {
response: RiskGraphListQuery$data;
variables: RiskGraphListQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "organizationId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v4 = [
{
"kind": "Literal",
"name": "first",
"value": 50
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "RiskGraphListQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"args": null,
"kind": "FragmentSpread",
"name": "RiskGraphFragment"
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "RiskGraphListQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v4/*: any*/),
"concreteType": "RiskConnection",
"kind": "LinkedField",
"name": "risks",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "RiskEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Risk",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "treatment",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentRiskScore",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualRiskScore",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "note",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v2/*: any*/)
],
"storageKey": null
},
(v3/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasPreviousPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "startCursor",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "risks(first:50)"
},
{
"alias": null,
"args": (v4/*: any*/),
"filters": [
"orderBy"
],
"handle": "connection",
"key": "RisksListQuery_risks",
"kind": "LinkedHandle",
"name": "risks"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "36e237e142f201c74ebc23ff46d7345a",
"id": null,
"metadata": {},
"name": "RiskGraphListQuery",
"operationKind": "query",
"text": "query RiskGraphListQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n id\n ...RiskGraphFragment\n }\n}\n\nfragment RiskGraphFragment on Organization {\n risks(first: 50) {\n edges {\n node {\n id\n name\n category\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n ...useRiskFormFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
}
};
})();
(node as any).hash = "5d41ad11b598f63829f481ff0ae8aec7";
export default node;

249
apps/console2/src/hooks/graph/__generated__/RiskGraphNodeQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,249 @@
/**
* @generated SignedSource<<6efbbaf2cb9056e26a38c89835260547>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type RiskTreatment = "ACCEPTED" | "AVOIDED" | "MITIGATED" | "TRANSFERRED" | "%future added value";
export type RiskGraphNodeQuery$variables = {
riskId: string;
};
export type RiskGraphNodeQuery$data = {
readonly node: {
readonly description?: string;
readonly name?: string;
readonly note?: string;
readonly owner?: {
readonly fullName: string;
readonly id: string;
} | null | undefined;
readonly treatment?: RiskTreatment;
readonly " $fragmentSpreads": FragmentRefs<"RiskOverviewTabFragment" | "useRiskFormFragment">;
};
};
export type RiskGraphNodeQuery = {
response: RiskGraphNodeQuery$data;
variables: RiskGraphNodeQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "riskId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "riskId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "treatment",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v6 = {
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v5/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "note",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "RiskGraphNodeQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
{
"args": null,
"kind": "FragmentSpread",
"name": "useRiskFormFragment"
},
{
"args": null,
"kind": "FragmentSpread",
"name": "RiskOverviewTabFragment"
}
],
"type": "Risk",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "RiskGraphNodeQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v5/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentRiskScore",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualRiskScore",
"storageKey": null
}
],
"type": "Risk",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "f3e35dd3d4ea0933858541184c664b4d",
"id": null,
"metadata": {},
"name": "RiskGraphNodeQuery",
"operationKind": "query",
"text": "query RiskGraphNodeQuery(\n $riskId: ID!\n) {\n node(id: $riskId) {\n __typename\n ... on Risk {\n name\n description\n treatment\n owner {\n id\n fullName\n }\n note\n ...useRiskFormFragment\n ...RiskOverviewTabFragment\n }\n id\n }\n}\n\nfragment RiskOverviewTabFragment on Risk {\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
}
};
})();
(node as any).hash = "76afe5fc70188381350154bdba7aa066";
export default node;

19
apps/console2/src/hooks/useDelayedEffect.ts Normal file
View File

@@ -0,0 +1,19 @@
import { useEffect, useRef } from "react";
/**
* Hook to handle cleanup after a delay
*
* Used for disposing the graphQL query when the component unmounts
*/
export function useCleanup(callback: () => void, delay: number) {
const timer = useRef<ReturnType<typeof setTimeout>>(null);
useEffect(() => {
if (timer.current) {
clearTimeout(timer.current);
}
return () => {
timer.current = setTimeout(callback, delay);
};
}, [callback, delay]);
}

2
apps/console2/src/pages/organizations/risks/FormRiskDialog.tsx
View File

@@ -36,7 +36,7 @@ type Props = {
open?: boolean;
risk?: RiskKey;
onSuccess?: () => void;
connection: string;
connection?: string;
};
type RiskTemplate = {

56
apps/console2/src/pages/organizations/risks/RiskDetailPage.tsx
View File

@@ -11,50 +11,27 @@ import {
IconTrashCan,
PageHeader,
PropertyRow,
RiskOverview,
} from "@probo/ui";
import { useNavigate, useParams } from "react-router";
import { Outlet, useNavigate, useParams } from "react-router";
import { useTranslate } from "@probo/i18n";
import { getTreatment, sprintf } from "@probo/helpers";
import { ConnectionHandler, graphql } from "relay-runtime";
import { useLazyLoadQuery } from "react-relay";
import type {
RiskDetailPageQuery,
RiskDetailPageQuery$data,
} from "./__generated__/RiskDetailPageQuery.graphql";
import { ConnectionHandler } from "relay-runtime";
import { usePreloadedQuery, type PreloadedQuery } from "react-relay";
import FormRiskDialog from "./FormRiskDialog";
import { usePageTitle } from "@probo/hooks";
import { useOrganizationId } from "../../../hooks/useOrganizationId";
import {
riskNodeQuery,
RisksConnectionKey,
useDeleteRiskMutation,
} from "../../../hooks/graph/RiskGraph";
import type { RiskGraphNodeQuery } from "../../../hooks/graph/__generated__/RiskGraphNodeQuery.graphql";
const riskQuery = graphql`
query RiskDetailPageQuery($riskId: ID!) {
node(id: $riskId) {
... on Risk {
name
description
treatment
owner {
id
fullName
}
inherentLikelihood
inherentImpact
residualLikelihood
residualImpact
note
createdAt
updatedAt
...useRiskFormFragment
}
}
}
`;
type Props = {
queryRef: PreloadedQuery<RiskGraphNodeQuery>;
};
export default function RiskDetailPage() {
export default function RiskDetailPage(props: Props) {
const { riskId } = useParams<{ riskId: string }>();
const organizationId = useOrganizationId();
const navigate = useNavigate();
@@ -64,8 +41,8 @@ export default function RiskDetailPage() {
}
const { __ } = useTranslate();
const data = useLazyLoadQuery<RiskDetailPageQuery>(riskQuery, { riskId });
const risk = data.node as Required<RiskDetailPageQuery$data["node"]>;
const data = usePreloadedQuery(riskNodeQuery, props.queryRef);
const risk = data.node;
const [deleteRisk] = useDeleteRiskMutation();
usePageTitle(risk.name ?? "Risk detail");
@@ -73,7 +50,7 @@ export default function RiskDetailPage() {
const onDelete = (riskId: string) => {
const connectionId = ConnectionHandler.getConnectionID(
organizationId,
RisksConnectionKey,
RisksConnectionKey
);
deleteRisk({
variables: {
@@ -114,9 +91,9 @@ export default function RiskDetailPage() {
<ConfirmDialog
message={sprintf(
__(
'This will permanently delete the risk "%s". This action cannot be undone.',
'This will permanently delete the risk "%s". This action cannot be undone.'
),
risk.name,
risk.name
)}
onConfirm={() => onDelete(riskId)}
>
@@ -130,10 +107,7 @@ export default function RiskDetailPage() {
<PageHeader title={risk.name} />
<div className="grid grid-cols-2">
<RiskOverview type="inherent" risk={risk} />
<RiskOverview type="residual" risk={risk} />
</div>
<Outlet context={{ risk }} />
<Drawer>
<PropertyRow label={__("Owner")}>

30
apps/console2/src/pages/organizations/risks/RiskOverviewTab.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { useFragment } from "react-relay";
import { useOutletContext } from "react-router";
import { graphql } from "relay-runtime";
import type { RiskOverviewTabFragment$key } from "./__generated__/RiskOverviewTabFragment.graphql";
import { RiskOverview } from "@probo/ui";
const overviewFragment = graphql`
fragment RiskOverviewTabFragment on Risk {
inherentLikelihood
inherentImpact
residualLikelihood
residualImpact
inherentRiskScore
residualRiskScore
}
`;
export default function RiskOverviewTab() {
const { risk: key } = useOutletContext<{
risk: RiskOverviewTabFragment$key;
}>();
const risk = useFragment(overviewFragment, key);
return (
<div className="grid grid-cols-2">
<RiskOverview type="inherent" risk={risk} />
<RiskOverview type="residual" risk={risk} />
</div>
);
}

16
apps/console2/src/pages/organizations/risks/RisksPage.tsx
View File

@@ -27,16 +27,22 @@ import {
useRisksQuery,
} from "../../../hooks/graph/RiskGraph";
import { SortableTable, SortableTh } from "../../../components/SortableTable";
import type { PreloadedQuery } from "react-relay";
import type { RiskGraphQuery } from "../../../hooks/graph/__generated__/RiskGraphQuery.graphql";
export default function RisksPage() {
type Props = {
queryRef: PreloadedQuery<RiskGraphQuery>;
};
export default function RisksPage(props: Props) {
const { __ } = useTranslate();
const [editedRisk, setEditedRisk] = useState<ItemOf<typeof risks> | null>(
null,
null
);
const organizationId = useOrganizationId();
const [deleteRisk] = useDeleteRiskMutation();
const { connectionId, risks, refetch } = useRisksQuery();
const { connectionId, risks, refetch } = useRisksQuery(props.queryRef);
const onDelete = (riskId: string) => {
deleteRisk({
@@ -119,9 +125,9 @@ export default function RisksPage() {
<ConfirmDialog
message={sprintf(
__(
'This will permanently delete the risk "%s". This action cannot be undone.',
'This will permanently delete the risk "%s". This action cannot be undone.'
),
risk.name,
risk.name
)}
onConfirm={() => onDelete(risk.id)}
>

82
apps/console2/src/pages/organizations/risks/__generated__/RiskOverviewTabFragment.graphql.ts generated Normal file
View File

@@ -0,0 +1,82 @@
/**
* @generated SignedSource<<2b276a39b8020e7be036acb6fe4ca077>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type RiskOverviewTabFragment$data = {
readonly inherentImpact: number;
readonly inherentLikelihood: number;
readonly inherentRiskScore: number;
readonly residualImpact: number;
readonly residualLikelihood: number;
readonly residualRiskScore: number;
readonly " $fragmentType": "RiskOverviewTabFragment";
};
export type RiskOverviewTabFragment$key = {
readonly " $data"?: RiskOverviewTabFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"RiskOverviewTabFragment">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "RiskOverviewTabFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentRiskScore",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualRiskScore",
"storageKey": null
}
],
"type": "Risk",
"abstractKey": null
};
(node as any).hash = "ba472e37a44c06c48847501204080fb6";
export default node;

14
apps/console2/src/providers/RelayProviders.tsx
View File

@@ -30,7 +30,7 @@ const fetchRelay: FetchFunction = async (
request,
variables,
_,
uploadables
uploadables,
) => {
const requestInit: RequestInit = {
method: "POST",
@@ -46,7 +46,7 @@ const fetchRelay: FetchFunction = async (
operationName: request.name,
query: request.text,
variables: variables,
})
}),
);
const uploadableMap: {
@@ -80,7 +80,7 @@ const fetchRelay: FetchFunction = async (
const response = await fetch(
import.meta.env.VITE_API_URL + "/api/console/v1/query",
requestInit
requestInit,
);
if (response.status === 500) {
@@ -100,8 +100,8 @@ const fetchRelay: FetchFunction = async (
`Error fetching GraphQL query '${
request.name
}' with variables '${JSON.stringify(variables)}': ${JSON.stringify(
json.errors
)}`
json.errors,
)}`,
);
}
@@ -114,7 +114,7 @@ const store = new Store(source, {
gcReleaseBufferSize: 20,
});
const environment = new Environment({
export const relayEnvironment = new Environment({
network: Network.create(fetchRelay),
store,
});
@@ -124,7 +124,7 @@ const environment = new Environment({
*/
export const RelayProvider = ({ children }: PropsWithChildren) => {
return (
<RelayEnvironmentProvider environment={environment}>
<RelayEnvironmentProvider environment={relayEnvironment}>
{children}
</RelayEnvironmentProvider>
);

91
apps/console2/src/routes.tsx
View File

@@ -1,14 +1,27 @@
import {
createBrowserRouter,
useLoaderData,
useRouteError,
type RouteObject,
} from "react-router";
import { MainLayout } from "./layouts/MainLayout";
import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
import { lazy, Suspense, type FC } from "react";
import { UnAuthenticatedError } from "./providers/RelayProviders";
import {
lazy,
Suspense,
useEffect,
type FC,
type LazyExoticComponent,
} from "react";
import {
relayEnvironment,
UnAuthenticatedError,
} from "./providers/RelayProviders";
import { RisksPageSkeleton } from "./components/skeletons/RisksPageSkeleton.tsx";
import { PageSkeleton } from "./components/skeletons/PageSkeleton.tsx";
import { loadQuery, type PreloadedQuery } from "react-relay";
import { riskNodeQuery, risksQuery } from "./hooks/graph/RiskGraph.ts";
import { useCleanup } from "./hooks/useDelayedEffect.ts";
function ErrorBoundary() {
const error = useRouteError();
@@ -20,12 +33,11 @@ function ErrorBoundary() {
}
type Route = {
path: string;
Component: FC;
Component: FC<any> | LazyExoticComponent<FC<any>>;
children?: Route[];
ErrorBoundary?: FC;
fallback?: FC;
};
queryLoader?: (params: Record<string, string>) => PreloadedQuery<any>;
} & Omit<RouteObject, "Component" | "children">;
const routes = [
{
@@ -50,7 +62,7 @@ const routes = [
{
path: "organizations/new",
Component: lazy(
() => import("./pages/organizations/NewOrganizationPage")
() => import("./pages/organizations/NewOrganizationPage"),
),
},
],
@@ -64,20 +76,32 @@ const routes = [
path: "vendors",
fallback: PageSkeleton,
Component: lazy(
() => import("./pages/organizations/vendors/VendorsPage")
() => import("./pages/organizations/vendors/VendorsPage"),
),
},
{
path: "risks",
fallback: RisksPageSkeleton,
queryLoader: ({ organizationId }) =>
loadQuery(relayEnvironment, risksQuery, { organizationId }),
Component: lazy(() => import("./pages/organizations/risks/RisksPage")),
},
{
path: "risks/:riskId",
fallback: PageSkeleton,
queryLoader: ({ riskId }) =>
loadQuery(relayEnvironment, riskNodeQuery, { riskId }),
Component: lazy(
() => import("./pages/organizations/risks/RiskDetailPage")
() => import("./pages/organizations/risks/RiskDetailPage"),
),
children: [
{
path: "",
Component: lazy(
() => import("./pages/organizations/risks/RiskOverviewTab"),
),
},
],
},
],
},
@@ -86,23 +110,48 @@ const routes = [
/**
* Wrap component with a suspense to handle lazy loading & relay loading states
*/
function routeTransformer(route: Route): RouteObject {
if ("fallback" in route && route.fallback) {
const fallback = <route.fallback />;
return {
...route,
children: route.children?.map(routeTransformer),
Component: () => (
<Suspense fallback={fallback}>
<route.Component />
function routeTransformer({
fallback: FallbackComponent,
queryLoader,
...route
}: Route): RouteObject {
let result = { ...route };
if (FallbackComponent) {
result = {
...result,
Component: (props) => (
<Suspense fallback={<FallbackComponent />}>
<route.Component {...props} />
</Suspense>
),
} as RouteObject;
};
}
if (queryLoader) {
result = {
...result,
loader: ({ params }) => {
const query = queryLoader(params as Record<string, string>);
return {
queryRef: query,
dispose: () => {
console.log("cleaning up query");
query.dispose();
},
};
},
Component: () => {
const { queryRef, dispose } = useLoaderData();
useCleanup(dispose, 1000);
return <route.Component queryRef={queryRef} />;
},
};
}
return {
...route,
...result,
children: route.children?.map(routeTransformer),
};
} as RouteObject;
}
export const router = createBrowserRouter(routes.map(routeTransformer));