Fix issue with fragment read inline

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/console/src/pages/organizations/vendors/dialogs/CommonThirdPartyCombobox.tsx

@@ -15,30 +15,51 @@
 import { Avatar, ComboboxItem } from "@probo/ui";
 import type { PreloadedQuery } from "react-relay";
 import { graphql, usePreloadedQuery } from "react-relay";
+import { readInlineData } from "relay-runtime";
 
 import type {
-  CommonThirdPartyComboboxQuery$data,
+  CommonThirdPartyCombobox_commonThirdParty$data,
-  CommonThirdPartyComboboxQuery,
+  CommonThirdPartyCombobox_commonThirdParty$key,
-} from "#/__generated__/core/CommonThirdPartyComboboxQuery.graphql";
+} from "#/__generated__/core/CommonThirdPartyCombobox_commonThirdParty.graphql";
+import type { CommonThirdPartyComboboxQuery } from "#/__generated__/core/CommonThirdPartyComboboxQuery.graphql";
+import type { CreateVendorInput } from "#/__generated__/core/VendorGraphCreateMutation.graphql";
 
 export type CommonThirdPartyRef
-  = CommonThirdPartyComboboxQuery$data["commonThirdParties"][number];
+  = CommonThirdPartyCombobox_commonThirdParty$data;
+
+const commonThirdPartyFragment = graphql`
+  fragment CommonThirdPartyCombobox_commonThirdParty on CommonThirdParty @inline {
+    name
+    logoUrl
+    category
+    websiteUrl
+    headquarterAddress
+    legalName
+    privacyPolicyUrl
+    serviceLevelAgreementUrl
+    dataProcessingAgreementUrl
+    certifications
+    securityPageUrl
+    trustPageUrl
+    statusPageUrl
+    termsOfServiceUrl
+  }
+`;
 
 export const commonThirdPartiesQuery = graphql`
   query CommonThirdPartyComboboxQuery($name: String!) {
     commonThirdParties(name: $name) {
       id
       name
-      websiteUrl
       logoUrl
-      ...CreateVendorDialog_commonThirdParty
+      ...CommonThirdPartyCombobox_commonThirdParty
     }
   }
 `;
 
 interface CommonThirdPartyComboboxProps {
   queryRef: PreloadedQuery<CommonThirdPartyComboboxQuery>;
-  onSelect: (thirdPartyRef: CommonThirdPartyRef) => void;
+  onSelect: (thridParty: Omit<CreateVendorInput, "organizationId">) => void;
 }
 
 export function CommonThirdPartyCombobox({
@@ -52,7 +73,27 @@ export function CommonThirdPartyCombobox({
       {data.commonThirdParties.map(thirdParty => (
         <ComboboxItem
           key={thirdParty.id}
-          onClick={() => onSelect(thirdParty)}
+          onClick={() => {
+            const tp = readInlineData<CommonThirdPartyCombobox_commonThirdParty$key>(
+              commonThirdPartyFragment,
+              thirdParty,
+            );
+            onSelect({
+              name: tp.name,
+              headquarterAddress: tp.headquarterAddress,
+              legalName: tp.legalName,
+              websiteUrl: tp.websiteUrl,
+              category: tp.category,
+              privacyPolicyUrl: tp.privacyPolicyUrl,
+              serviceLevelAgreementUrl: tp.serviceLevelAgreementUrl,
+              dataProcessingAgreementUrl: tp.dataProcessingAgreementUrl,
+              certifications: tp.certifications,
+              securityPageUrl: tp.securityPageUrl,
+              trustPageUrl: tp.trustPageUrl,
+              statusPageUrl: tp.statusPageUrl,
+              termsOfServiceUrl: tp.termsOfServiceUrl,
+            });
+          }}
         >
           <Avatar
             name={thirdParty.name}

apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx

@@ -22,39 +22,19 @@ import {
   IconPlusLarge,
   useDialogRef,
 } from "@probo/ui";
-import { type ReactNode, Suspense, useEffect, useRef, useState, useCallback } from "react";
+import { type ReactNode, Suspense, useCallback, useState } from "react";
 import { useQueryLoader } from "react-relay";
-import { graphql, readInlineData } from "relay-runtime";
 import { useDebounceCallback } from "usehooks-ts";
 
 import type { CommonThirdPartyComboboxQuery } from "#/__generated__/core/CommonThirdPartyComboboxQuery.graphql";
-import type { CreateVendorDialog_commonThirdParty$key } from "#/__generated__/core/CreateVendorDialog_commonThirdParty.graphql";
+import type { CreateVendorInput } from "#/__generated__/core/VendorGraphCreateMutation.graphql";
 import { useCreateVendorMutation } from "#/hooks/graph/VendorGraph";
 
 import {
   commonThirdPartiesQuery,
   CommonThirdPartyCombobox,
-  type CommonThirdPartyRef,
 } from "./CommonThirdPartyCombobox";
 
-const commonThirdPartyFragment = graphql`
-  fragment CreateVendorDialog_commonThirdParty on CommonThirdParty @inline {
-    name
-    category
-    websiteUrl
-    headquarterAddress
-    legalName
-    privacyPolicyUrl
-    serviceLevelAgreementUrl
-    dataProcessingAgreementUrl
-    certifications
-    securityPageUrl
-    trustPageUrl
-    statusPageUrl
-    termsOfServiceUrl
-  }
-`;
-
 type Props = {
   children: ReactNode;
   organizationId: string;
@@ -73,38 +53,18 @@ export function CreateVendorDialog({
   const [queryRef, loadQuery]
     = useQueryLoader<CommonThirdPartyComboboxQuery>(commonThirdPartiesQuery);
 
-  const onSelect = async (thirdPartyRef: CommonThirdPartyRef | string) => {
+  const onSelect = async (thirdParty: Omit<CreateVendorInput, "organizationId"> | string) => {
     const input
-      = typeof thirdPartyRef === "string"
+      = typeof thirdParty === "string"
         ? {
             organizationId,
-            name: thirdPartyRef,
+            name: thirdParty,
             category: null,
           }
-        : (() => {
+        : {
-            const tp = readInlineData<CreateVendorDialog_commonThirdParty$key>(
+            ...thirdParty,
-              commonThirdPartyFragment,
+            organizationId,
-              thirdPartyRef,
+          };
-            );
-            return {
-              organizationId,
-              name: tp.name,
-              headquarterAddress: tp.headquarterAddress || null,
-              legalName: tp.legalName || null,
-              websiteUrl: tp.websiteUrl || null,
-              category: tp.category || null,
-              privacyPolicyUrl: tp.privacyPolicyUrl || null,
-              serviceLevelAgreementUrl:
-                tp.serviceLevelAgreementUrl || null,
-              dataProcessingAgreementUrl:
-                tp.dataProcessingAgreementUrl || null,
-              certifications: tp.certifications,
-              securityPageUrl: tp.securityPageUrl || null,
-              trustPageUrl: tp.trustPageUrl || null,
-              statusPageUrl: tp.statusPageUrl || null,
-              termsOfServiceUrl: tp.termsOfServiceUrl || null,
-            };
-          })();
     await createVendor({
       variables: {
         input,