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

Refactor create vendor mutation to use connection update

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-19 10:37:55 +01:00
parent bb85434340
commit d9c76878c0
8 changed files with 598 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
apps/console/src/pages/VendorListPage.tsx
View File

@@ -5,6 +5,7 @@ import {
usePreloadedQuery,
useQueryLoader,
useMutation,
ConnectionHandler,
} from "react-relay";
import { useSearchParams } from "react-router";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -16,6 +17,10 @@ import { Link } from "react-router";
import Fuse from "fuse.js";
import type { VendorListPageQuery as VendorListPageQueryType } from "./__generated__/VendorListPageQuery.graphql";
import { Helmet } from "react-helmet-async";
import { VendorListPageCreateVendorMutation } from "./__generated__/VendorListPageCreateVendorMutation.graphql";
import { VendorListPageDeleteVendorMutation } from "./__generated__/VendorListPageDeleteVendorMutation.graphql";
import { toast } from "@/hooks/use-toast";
const ITEMS_PER_PAGE = 20;
const vendorListPageQuery = graphql`
@@ -25,10 +30,11 @@ const vendorListPageQuery = graphql`
$last: Int
$before: CursorKey
) {
node(id: "AZSfP_xAcAC5IAAAAAAltA") {
currentOrganization: node(id: "AZSfP_xAcAC5IAAAAAAltA") {
id
... on Organization {
vendors(first: $first, after: $after, last: $last, before: $before) {
vendors(first: $first, after: $after, last: $last, before: $before)
@connection(key: "VendorListPageQuery_vendors") {
edges {
node {
id
@@ -51,12 +57,16 @@ const vendorListPageQuery = graphql`
`;
const createVendorMutation = graphql`
mutation VendorListPageCreateVendorMutation($input: CreateVendorInput!) {
mutation VendorListPageCreateVendorMutation($input: CreateVendorInput!, $connections: [ID!]!) {
createVendor(input: $input) {
id
name
createdAt
updatedAt
vendorEdge @prependEdge(connections: $connections) {
node {
id
name
createdAt
updatedAt
}
}
}
}
`;
@@ -92,14 +102,9 @@ const vendorsList = [
{ id: "17", name: "CircleCI", createdAt: new Date().toISOString() },
];
type LoadQueryType = ReturnType<
typeof useQueryLoader<VendorListPageQueryType>
>[1];
function VendorListContent({
queryRef,
onPageChange,
loadQuery,
}: {
queryRef: PreloadedQuery<VendorListPageQueryType>;
onPageChange: (params: {
@@ -108,18 +113,17 @@ function VendorListContent({
last?: number;
before?: string;
}) => void;
loadQuery: LoadQueryType;
}) {
const data = usePreloadedQuery(vendorListPageQuery, queryRef);
const [searchParams, setSearchParams] = useSearchParams();
const [isPending, startTransition] = useTransition();
const [searchTerm, setSearchTerm] = useState("");
const [filteredVendors, setFilteredVendors] = useState<Array<any>>([]);
const [createVendor] = useMutation(createVendorMutation);
const [deleteVendor] = useMutation(deleteVendorMutation);
const [createVendor] = useMutation<VendorListPageCreateVendorMutation>(createVendorMutation);
const [deleteVendor] = useMutation<VendorListPageDeleteVendorMutation>(deleteVendorMutation);
const vendors = data.node?.vendors?.edges?.map((edge) => edge?.node) ?? [];
const pageInfo = data.node?.vendors?.pageInfo;
const vendors = data.currentOrganization.vendors?.edges.map((edge) => edge.node) ?? [];
const pageInfo = data.currentOrganization.vendors?.pageInfo;
const fuse = new Fuse(vendorsList, {
keys: ["name"],
@@ -204,23 +208,23 @@ function VendorListContent({
onClick={() => {
createVendor({
variables: {
connections: [ConnectionHandler.getConnectionID(data.currentOrganization.id, "VendorListPageQuery_vendors")],
input: {
organizationId: data.node.id,
organizationId: data.currentOrganization.id,
name: vendor.name,
description: "",
serviceStartAt: new Date().toISOString(),
serviceCriticality: "LOW",
riskTier: "GENERAL",
},
},
onCompleted(response: any) {
onCompleted(response) {
setSearchTerm("");
setFilteredVendors([]);
loadQuery(
{
first: ITEMS_PER_PAGE,
after: undefined,
last: undefined,
before: undefined,
},
{ fetchPolicy: "network-only" },
);
toast({
title: "Vendor added",
description: "The vendor has been added successfully",
});
},
});
}}
@@ -297,15 +301,10 @@ function VendorListContent({
},
},
onCompleted() {
loadQuery(
{
first: ITEMS_PER_PAGE,
after: undefined,
last: undefined,
before: undefined,
},
{ fetchPolicy: "network-only" },
);
toast({
title: "Vendor deleted",
description: "The vendor has been deleted successfully",
});
},
});
}
@@ -360,7 +359,6 @@ export default function VendorListPage() {
const [queryRef, loadQuery] =
useQueryLoader<VendorListPageQueryType>(vendorListPageQuery);
// Initialize with URL params
useEffect(() => {
const after = searchParams.get("after");
const before = searchParams.get("before");
@@ -408,7 +406,6 @@ export default function VendorListPage() {
<VendorListContent
queryRef={queryRef}
onPageChange={handlePageChange}
loadQuery={loadQuery}
/>
</Suspense>
</>

201
apps/console/src/pages/__generated__/VendorListPageCreateVendorMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<055f5292e2ca7bfecd0d701ce34c8d34>>
* @generated SignedSource<<03e542b8e2ecf3c17be86da4526541d2>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,20 +9,34 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type RiskTier = "CRITICAL" | "GENERAL" | "SIGNIFICANT";
export type ServiceCriticality = "HIGH" | "LOW" | "MEDIUM";
export type CreateVendorInput = {
description: string;
name: string;
organizationId: string;
privacyPolicyUrl?: string | null | undefined;
riskTier: RiskTier;
serviceCriticality: ServiceCriticality;
serviceStartAt: any;
serviceTerminationAt?: any | null | undefined;
statusPageUrl?: string | null | undefined;
termsOfServiceUrl?: string | null | undefined;
};
export type VendorListPageCreateVendorMutation$variables = {
connections: ReadonlyArray<string>;
input: CreateVendorInput;
};
export type VendorListPageCreateVendorMutation$data = {
readonly createVendor: {
readonly createdAt: any;
readonly id: string;
readonly name: string;
readonly updatedAt: any;
readonly vendorEdge: {
readonly node: {
readonly createdAt: any;
readonly id: string;
readonly name: string;
readonly updatedAt: any;
};
};
};
};
export type VendorListPageCreateVendorMutation = {
@@ -31,88 +45,149 @@ export type VendorListPageCreateVendorMutation = {
};
const node: ConcreteRequest = (function(){
var v0 = [
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "Vendor",
"kind": "LinkedField",
"name": "createVendor",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
}
],
"storageKey": null
}
];
v3 = {
"alias": null,
"args": null,
"concreteType": "VendorEdge",
"kind": "LinkedField",
"name": "vendorEdge",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Vendor",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "VendorListPageCreateVendorMutation",
"selections": (v1/*: any*/),
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateVendorPayload",
"kind": "LinkedField",
"name": "createVendor",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "VendorListPageCreateVendorMutation",
"selections": (v1/*: any*/)
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateVendorPayload",
"kind": "LinkedField",
"name": "createVendor",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "prependEdge",
"key": "",
"kind": "LinkedHandle",
"name": "vendorEdge",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "11eabcf8c7c1fef7b2cb37bcadf52666",
"cacheID": "ddfddd8b4266631b16341e6fe2e04cb5",
"id": null,
"metadata": {},
"name": "VendorListPageCreateVendorMutation",
"operationKind": "mutation",
"text": "mutation VendorListPageCreateVendorMutation(\n $input: CreateVendorInput!\n) {\n createVendor(input: $input) {\n id\n name\n createdAt\n updatedAt\n }\n}\n"
"text": "mutation VendorListPageCreateVendorMutation(\n $input: CreateVendorInput!\n) {\n createVendor(input: $input) {\n vendorEdge {\n node {\n id\n name\n createdAt\n updatedAt\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "aeb5751c0d301a9433e706d237a025cd";
(node as any).hash = "03c48ba8f1db919da507322208e5e136";
export default node;

330
apps/console/src/pages/__generated__/VendorListPageQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<3b4f62f431760660274bbff4ae888d0a>>
* @generated SignedSource<<874e734a238db8fc4ab486da7d49ceee>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -16,7 +16,7 @@ export type VendorListPageQuery$variables = {
last?: number | null | undefined;
};
export type VendorListPageQuery$data = {
readonly node: {
readonly currentOrganization: {
readonly id: string;
readonly vendors?: {
readonly edges: ReadonlyArray<{
@@ -78,134 +78,127 @@ v5 = {
"storageKey": null
},
v6 = {
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "after",
"variableName": "after"
},
{
"kind": "Variable",
"name": "before",
"variableName": "before"
},
{
"kind": "Variable",
"name": "first",
"variableName": "first"
},
{
"kind": "Variable",
"name": "last",
"variableName": "last"
}
],
"concreteType": "VendorConnection",
"kind": "LinkedField",
"name": "vendors",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "VendorEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Vendor",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v5/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
}
],
"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": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasPreviousPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "startCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "Organization",
"abstractKey": null
};
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v7 = [
{
"alias": null,
"args": null,
"concreteType": "VendorEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Vendor",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v5/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
(v6/*: 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": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasPreviousPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "startCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
}
],
"storageKey": null
}
],
v8 = [
{
"kind": "Variable",
"name": "after",
"variableName": "after"
},
{
"kind": "Variable",
"name": "before",
"variableName": "before"
},
{
"kind": "Variable",
"name": "first",
"variableName": "first"
},
{
"kind": "Variable",
"name": "last",
"variableName": "last"
}
];
return {
"fragment": {
"argumentDefinitions": [
@@ -219,7 +212,7 @@ return {
"name": "VendorListPageQuery",
"selections": [
{
"alias": null,
"alias": "currentOrganization",
"args": (v4/*: any*/),
"concreteType": null,
"kind": "LinkedField",
@@ -227,7 +220,23 @@ return {
"plural": false,
"selections": [
(v5/*: any*/),
(v6/*: any*/)
{
"kind": "InlineFragment",
"selections": [
{
"alias": "vendors",
"args": null,
"concreteType": "VendorConnection",
"kind": "LinkedField",
"name": "__VendorListPageQuery_vendors_connection",
"plural": false,
"selections": (v7/*: any*/),
"storageKey": null
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": "node(id:\"AZSfP_xAcAC5IAAAAAAltA\")"
}
@@ -247,38 +256,69 @@ return {
"name": "VendorListPageQuery",
"selections": [
{
"alias": null,
"alias": "currentOrganization",
"args": (v4/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v6/*: any*/),
(v5/*: any*/),
(v6/*: any*/)
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v8/*: any*/),
"concreteType": "VendorConnection",
"kind": "LinkedField",
"name": "vendors",
"plural": false,
"selections": (v7/*: any*/),
"storageKey": null
},
{
"alias": null,
"args": (v8/*: any*/),
"filters": null,
"handle": "connection",
"key": "VendorListPageQuery_vendors",
"kind": "LinkedHandle",
"name": "vendors"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": "node(id:\"AZSfP_xAcAC5IAAAAAAltA\")"
}
]
},
"params": {
"cacheID": "d38a5cbe98c811f237ea5722871aabf6",
"cacheID": "079490495e96d3609a263570f185673b",
"id": null,
"metadata": {},
"metadata": {
"connection": [
{
"count": null,
"cursor": null,
"direction": "bidirectional",
"path": [
"currentOrganization",
"vendors"
]
}
]
},
"name": "VendorListPageQuery",
"operationKind": "query",
"text": "query VendorListPageQuery(\n $first: Int\n $after: CursorKey\n $last: Int\n $before: CursorKey\n) {\n node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n __typename\n id\n ... on Organization {\n vendors(first: $first, after: $after, last: $last, before: $before) {\n edges {\n node {\n id\n name\n createdAt\n updatedAt\n }\n cursor\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n}\n"
"text": "query VendorListPageQuery(\n $first: Int\n $after: CursorKey\n $last: Int\n $before: CursorKey\n) {\n currentOrganization: node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n __typename\n id\n ... on Organization {\n vendors(first: $first, after: $after, last: $last, before: $before) {\n edges {\n node {\n id\n name\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "e371fe8685ccc70b229f0d5b07d6e271";
(node as any).hash = "9613eb9b1e34b2ebffda69c5909f5f5b";
export default node;