@vendure/dashboard 3.3.6-master-202506280232 → 3.3.6-master-202507010243

package/src/lib/framework/extension-api/define-dashboard-extension.ts

@@ -1,4 +1,5 @@
-import { addBulkAction } from '@/framework/data-table/data-table-extensions.js';
+import { addBulkAction, addListQueryDocument } from '@/framework/data-table/data-table-extensions.js';
+import { parse } from 'graphql';
 
 import { registerDashboardWidget } from '../dashboard-widget/widget-extensions.js';
 import { addCustomFormComponent } from '../form-engine/custom-form-component-extensions.js';
@@ -91,6 +92,18 @@ export function defineDashboardExtension(extension: DashboardExtension) {
                         addBulkAction(dataTable.pageId, dataTable.blockId, action);
                     }
                 }
+                if (dataTable.extendListDocument) {
+                    const document =
+                        typeof dataTable.extendListDocument === 'function'
+                            ? dataTable.extendListDocument()
+                            : dataTable.extendListDocument;
+
+                    addListQueryDocument(
+                        dataTable.pageId,
+                        dataTable.blockId,
+                        typeof document === 'string' ? parse(document) : document,
+                    );
+                }
             }
         }
         const callbacks = globalRegistry.get('extensionSourceChangeCallbacks');

package/src/lib/framework/extension-api/extension-api-types.ts

@@ -1,5 +1,6 @@
 import { PageContextValue } from '@/framework/layout-engine/page-provider.js';
 import { AnyRoute, RouteOptions } from '@tanstack/react-router';
+import { DocumentNode } from 'graphql';
 import { LucideIcon } from 'lucide-react';
 import type React from 'react';
 
@@ -137,6 +138,11 @@ export interface DashboardDataTableDefinition {
      * An array of additional bulk actions that will be available on the data table.
      */
     bulkActions?: BulkAction[];
+    /**
+     * @description
+     * Allows you to extend the list document for the data table.
+     */
+    extendListDocument?: string | DocumentNode | (() => DocumentNode | string);
 }
 
 /**

package/src/lib/framework/page/detail-page-route-loader.tsx

@@ -2,7 +2,7 @@ import { NEW_ENTITY_PATH } from '@/constants.js';
 
 import { PageBreadcrumb } from '@/components/layout/generated-breadcrumbs.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { FileBaseRouteOptions } from '@tanstack/react-router';
+import { FileBaseRouteOptions, ParsedLocation } from '@tanstack/react-router';
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
 import { getQueryName, getQueryTypeFieldInfo } from '../document-introspection/get-document-structure.js';
 import { DetailEntity } from './page-types.js';
@@ -10,7 +10,11 @@ import { getDetailQueryOptions } from './use-detail-page.js';
 
 export interface DetailPageRouteLoaderConfig<T extends TypedDocumentNode<any, any>> {
     queryDocument: T;
-    breadcrumb: (isNew: boolean, entity: DetailEntity<T>) => Array<PageBreadcrumb | undefined>;
+    breadcrumb: (
+        isNew: boolean,
+        entity: DetailEntity<T>,
+        location: ParsedLocation,
+    ) => Array<PageBreadcrumb | undefined>;
 }
 
 export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
@@ -20,9 +24,11 @@ export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
     const loader: FileBaseRouteOptions<any, any>['loader'] = async ({
         context,
         params,
+        location,
     }: {
         context: any;
         params: any;
+        location: ParsedLocation;
     }) => {
         if (!params.id) {
             throw new Error('ID param is required');
@@ -42,7 +48,7 @@ export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
             throw new Error(`${entityName} with the ID ${params.id} was not found`);
         }
         return {
-            breadcrumb: breadcrumb(isNew, result?.[entityField]),
+            breadcrumb: breadcrumb(isNew, result?.[entityField], location),
         };
     };
     return loader;

package/src/lib/framework/registry/registry-types.ts

@@ -1,3 +1,4 @@
+import { DocumentNode } from 'graphql';
 import React from 'react';
 
 import { DashboardAlertDefinition } from '../alert/types.js';
@@ -20,4 +21,5 @@ export interface GlobalRegistryContents {
     dashboardAlertRegistry: Map<string, DashboardAlertDefinition>;
     customFormComponents: Map<string, React.FunctionComponent<CustomFormComponentInputProps>>;
     bulkActionsRegistry: Map<string, BulkAction[]>;
+    listQueryDocumentRegistry: Map<string, DocumentNode[]>;
 }

package/src/lib/hooks/use-extended-list-query.ts

@@ -0,0 +1,73 @@
+import { getListQueryDocuments } from '@/framework/data-table/data-table-extensions.js';
+import { extendDocument } from '@/framework/document-extension/extend-document.js';
+import { useLingui } from '@/lib/trans.js';
+import { DocumentNode } from 'graphql';
+import { useEffect, useMemo, useRef } from 'react';
+import { toast } from 'sonner';
+
+import { usePageBlock } from './use-page-block.js';
+import { usePage } from './use-page.js';
+
+export function useExtendedListQuery<T extends DocumentNode>(listQuery: T) {
+    const { pageId } = usePage();
+    const { blockId } = usePageBlock();
+    const { i18n } = useLingui();
+    const listQueryExtensions = pageId && blockId ? getListQueryDocuments(pageId, blockId) : [];
+    const hasShownError = useRef(false);
+
+    const extendedListQuery = useMemo(() => {
+        let result: T = listQuery;
+        let error: Error | null = null;
+
+        try {
+            result = listQueryExtensions.reduce(
+                (acc, extension) => extendDocument(acc, extension),
+                listQuery,
+            ) as T;
+        } catch (err) {
+            error = err instanceof Error ? err : new Error(String(err));
+            // Continue with the original query instead of the extended one
+            result = listQuery;
+        }
+
+        // Store error for useEffect to handle
+        if (error && !hasShownError.current) {
+            hasShownError.current = true;
+
+            // Provide a helpful error message based on the error type
+            let errorMessage = i18n.t('Failed to extend query document');
+            if (error.message.includes('Extension query must have at least one top-level field')) {
+                errorMessage = i18n.t('Query extension is invalid: must have at least one top-level field');
+            } else if (error.message.includes('The query extension must extend the')) {
+                errorMessage = i18n.t('Query extension mismatch: ') + error.message;
+            } else if (error.message.includes('Syntax Error')) {
+                errorMessage = i18n.t('Query extension contains invalid GraphQL syntax');
+            } else {
+                errorMessage = i18n.t('Query extension error: ') + error.message;
+            }
+
+            // Log the error and continue with the original query
+            // eslint-disable-next-line no-console
+            console.warn(`${errorMessage}. Continuing with original query.`, {
+                pageId,
+                blockId,
+                extensionsCount: listQueryExtensions.length,
+                error: error.message,
+            });
+
+            // Show a user-friendly toast notification
+            toast.error(i18n.t('Query extension error'), {
+                description: errorMessage + '. ' + i18n.t('The page will continue with the default query.'),
+            });
+        }
+
+        return result;
+    }, [listQuery, listQueryExtensions, pageId, blockId]);
+
+    // Reset error flag when dependencies change
+    useEffect(() => {
+        hasShownError.current = false;
+    }, [listQuery, listQueryExtensions, pageId, blockId]);
+
+    return extendedListQuery;
+}