fix(dashboard): Fix creation of new entities using UUID ids

Fixes #3658

packages/dashboard/src/lib/framework/page/use-detail-page.ts

@@ -13,7 +13,7 @@ import { FormEvent } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
 import { NEW_ENTITY_PATH } from '../../constants.js';
-import { api, Variables } from '../../graphql/api.js';
+import { api } from '../../graphql/api.js';
 import { useCustomFieldConfig } from '../../hooks/use-custom-field-config.js';
 import { useExtendedDetailQuery } from '../../hooks/use-extended-detail-query.js';
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
@@ -33,6 +33,8 @@ type RemoveNullFields<T> = {
     [K in keyof T]: RemoveNull<T[K]>;
 };
 
+const NEW_ENTITY_ID = '__NEW__';
+
 /**
  * @description
  * **Status: Developer Preview**
@@ -108,7 +110,7 @@ export interface DetailPageOptions<
     onError?: (error: unknown) => void;
 }
 
-export function getDetailQueryOptions<T, V extends Variables = Variables>(
+export function getDetailQueryOptions<T, V extends { id: string }>(
     document: TypedDocumentNode<T, V> | DocumentNode,
     variables: V,
     options: Partial<Parameters<typeof queryOptions>[0]> = {},
@@ -116,7 +118,7 @@ export function getDetailQueryOptions<T, V extends Variables = Variables>(
     const queryName = getQueryName(document);
     return queryOptions({
         queryKey: ['DetailPage', queryName, variables],
-        queryFn: () => api.query(document, variables),
+        queryFn: () => (variables.id === NEW_ENTITY_ID ? null : api.query(document, variables)),
         ...options,
     }) as DefinedInitialDataOptions;
 }
@@ -154,7 +156,6 @@ export type DetailPageEntity<
  */
 export interface UseDetailPageResult<
     T extends TypedDocumentNode<any, any>,
-    C extends TypedDocumentNode<any, any>,
     U extends TypedDocumentNode<any, any>,
     EntityField extends keyof ResultOf<T>,
 > {
@@ -244,7 +245,7 @@ export function useDetailPage<
     VarNameCreate extends keyof VariablesOf<C> = 'input',
 >(
     options: DetailPageOptions<T, C, U, EntityField, VarNameCreate, VarNameUpdate>,
-): UseDetailPageResult<T, C, U, EntityField> {
+): UseDetailPageResult<T, U, EntityField> {
     const {
         pageId,
         queryDocument,
@@ -265,12 +266,12 @@ export function useDetailPage<
     const customFieldConfig = useCustomFieldConfig(returnEntityName);
     const extendedDetailQuery = useExtendedDetailQuery(addCustomFields(queryDocument), pageId);
     const detailQueryOptions = getDetailQueryOptions(extendedDetailQuery, {
-        id: isNew ? '__NEW__' : params.id,
+        id: isNew ? NEW_ENTITY_ID : params.id,
     });
     const detailQuery = useSuspenseQuery(detailQueryOptions);
     const entityQueryField = entityField ?? getQueryName(extendedDetailQuery);
 
-    const entity = (detailQuery?.data as any)[entityQueryField] as
+    const entity = (detailQuery?.data as any)?.[entityQueryField] as
         | DetailPageEntity<T, EntityField>
         | undefined;