@vendure/dashboard 3.3.6-master-202506290242 → 3.3.6-master-202507010731

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -12,9 +12,13 @@ import { Trans, useLingui } from '@/lib/trans.js';
 
 import { Permission } from '@vendure/common/lib/generated-types';
 import {
+    assignProductsToChannelDocument,
     deleteProductsDocument,
     duplicateEntityDocument,
+    getProductsWithFacetValuesByIdsDocument,
+    productDetailDocument,
     removeProductsFromChannelDocument,
+    updateProductsDocument,
 } from '../products.graphql.js';
 import { AssignFacetValuesDialog } from './assign-facet-values-dialog.js';
 import { AssignToChannelDialog } from './assign-to-channel-dialog.js';
@@ -84,7 +88,9 @@ export const AssignProductsToChannelBulkAction: BulkActionComponent<any> = ({ se
             <AssignToChannelDialog
                 open={dialogOpen}
                 onOpenChange={setDialogOpen}
-                productIds={selection.map(s => s.id)}
+                entityIds={selection.map(s => s.id)}
+                entityType="products"
+                mutationFn={api.mutate(assignProductsToChannelDocument)}
                 onSuccess={handleSuccess}
             />
         </>
@@ -156,7 +162,11 @@ export const AssignFacetValuesToProductsBulkAction: BulkActionComponent<any> = (
             <AssignFacetValuesDialog
                 open={dialogOpen}
                 onOpenChange={setDialogOpen}
-                productIds={selection.map(s => s.id)}
+                entityIds={selection.map(s => s.id)}
+                entityType="products"
+                queryFn={variables => api.query(getProductsWithFacetValuesByIdsDocument, variables)}
+                mutationFn={api.mutate(updateProductsDocument)}
+                detailDocument={productDetailDocument}
                 onSuccess={handleSuccess}
             />
         </>

package/src/app/routes/_authenticated/_products/components/product-variants-table.tsx

@@ -1,12 +1,15 @@
-import { Money } from "@/components/data-display/money.js";
-import { PaginatedListDataTable, PaginatedListRefresherRegisterFn } from "@/components/shared/paginated-list-data-table.js";
-import { StockLevelLabel } from "@/components/shared/stock-level-label.js";
-import { useLocalFormat } from "@/hooks/use-local-format.js";
-import { DetailPageButton } from "@/index.js";
-import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
-import { useState } from "react";
-import { productVariantListDocument } from "../products.graphql.js";
+import { Money } from '@/components/data-display/money.js';
+import {
+    PaginatedListDataTable,
+    PaginatedListRefresherRegisterFn,
+} from '@/components/shared/paginated-list-data-table.js';
+import { StockLevelLabel } from '@/components/shared/stock-level-label.js';
 import { graphql } from '@/graphql/graphql.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { DetailPageButton } from '@/index.js';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { productVariantListDocument } from '../products.graphql.js';
 
 export const deleteProductVariantDocument = graphql(`
     mutation DeleteProductVariant($id: ID!) {
@@ -17,62 +20,78 @@ export const deleteProductVariantDocument = graphql(`
     }
 `);
 
-
 interface ProductVariantsTableProps {
     productId: string;
     registerRefresher?: PaginatedListRefresherRegisterFn;
+    fromProductDetailPage?: boolean;
 }
 
-export function ProductVariantsTable({ productId, registerRefresher }: ProductVariantsTableProps) {
+export function ProductVariantsTable({
+    productId,
+    registerRefresher,
+    fromProductDetailPage,
+}: ProductVariantsTableProps) {
     const { formatCurrencyName } = useLocalFormat();
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [sorting, setSorting] = useState<SortingState>([]);
     const [filters, setFilters] = useState<ColumnFiltersState>([]);
 
-    return <PaginatedListDataTable
-        registerRefresher={registerRefresher}
-        listQuery={productVariantListDocument}
-        deleteMutation={deleteProductVariantDocument}
-        transformVariables={variables => ({
-            ...variables,
-            productId,
-        })}
-        defaultVisibility={{
-            id: false,
-            currencyCode: false,
-        }}
-        customizeColumns={{
-            name: {
-                header: 'Variant name',
-                cell: ({ row: { original } }) => <DetailPageButton href={`../../product-variants/${original.id}`} label={original.name} />,
-            },
-            currencyCode: {
-                cell: ({ row: { original } }) => formatCurrencyName(original.currencyCode, 'full'),
-            },
-            price: {
-                cell: ({ row: { original } }) => <Money value={original.price} currency={original.currencyCode} />,
-            },
-            priceWithTax: {
-                cell: ({ row: { original } }) => <Money value={original.priceWithTax} currency={original.currencyCode} />,
-            },
-            stockLevels: {
-                cell: ({ row: { original } }) => <StockLevelLabel stockLevels={original.stockLevels} />,
-            },
-        }}
-        page={page}
-        itemsPerPage={pageSize}
-        sorting={sorting}
-        columnFilters={filters}
-        onPageChange={(_, page, perPage) => {
-            setPage(page);
-            setPageSize(perPage);
-        }}
-        onSortChange={(_, sorting) => {
-            setSorting(sorting);
-        }}
-        onFilterChange={(_, filters) => {
-            setFilters(filters);
-        }}
-    />;
+    return (
+        <PaginatedListDataTable
+            registerRefresher={registerRefresher}
+            listQuery={productVariantListDocument}
+            deleteMutation={deleteProductVariantDocument}
+            transformVariables={variables => ({
+                ...variables,
+                productId,
+            })}
+            defaultVisibility={{
+                id: false,
+                currencyCode: false,
+            }}
+            customizeColumns={{
+                name: {
+                    header: 'Variant name',
+                    cell: ({ row: { original } }) => (
+                        <DetailPageButton
+                            href={`../../product-variants/${original.id}`}
+                            label={original.name}
+                            search={fromProductDetailPage ? { from: 'product' } : undefined}
+                        />
+                    ),
+                },
+                currencyCode: {
+                    cell: ({ row: { original } }) => formatCurrencyName(original.currencyCode, 'full'),
+                },
+                price: {
+                    cell: ({ row: { original } }) => (
+                        <Money value={original.price} currency={original.currencyCode} />
+                    ),
+                },
+                priceWithTax: {
+                    cell: ({ row: { original } }) => (
+                        <Money value={original.priceWithTax} currency={original.currencyCode} />
+                    ),
+                },
+                stockLevels: {
+                    cell: ({ row: { original } }) => <StockLevelLabel stockLevels={original.stockLevels} />,
+                },
+            }}
+            page={page}
+            itemsPerPage={pageSize}
+            sorting={sorting}
+            columnFilters={filters}
+            onPageChange={(_, page, perPage) => {
+                setPage(page);
+                setPageSize(perPage);
+            }}
+            onSortChange={(_, sorting) => {
+                setSorting(sorting);
+            }}
+            onFilterChange={(_, filters) => {
+                setFilters(filters);
+            }}
+        />
+    );
 }

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -31,9 +31,12 @@ import { CreateProductVariantsDialog } from './components/create-product-variant
 import { ProductVariantsTable } from './components/product-variants-table.js';
 import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
 
+const pageId = 'product-detail';
+
 export const Route = createFileRoute('/_authenticated/_products/products_/$id')({
     component: ProductDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: productDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -53,6 +56,7 @@ function ProductDetailPage() {
     const refreshRef = useRef<() => void>(() => {});
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
+        pageId,
         entityName: 'Product',
         queryDocument: productDetailDocument,
         createDocument: createProductDocument,
@@ -91,7 +95,7 @@ function ProductDetailPage() {
     });
 
     return (
-        <Page pageId="product-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New product</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
@@ -148,6 +152,7 @@ function ProductDetailPage() {
                             registerRefresher={refresher => {
                                 refreshRef.current = refresher;
                             }}
+                            fromProductDetailPage={true}
                         />
                         <div className="mt-4">
                             <AddProductVariantDialog

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -31,9 +31,12 @@ import {
     updatePromotionDocument,
 } from './promotions.graphql.js';
 
+const pageId = 'promotion-detail';
+
 export const Route = createFileRoute('/_authenticated/_promotions/promotions_/$id')({
     component: PromotionDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: promotionDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -52,6 +55,7 @@ function PromotionDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: promotionDetailDocument,
         createDocument: createPromotionDocument,
         transformCreateInput: values => {
@@ -114,7 +118,7 @@ function PromotionDetailPage() {
     });
 
     return (
-        <Page pageId="promotion-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New promotion</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_roles/roles_.$id.tsx

@@ -22,9 +22,12 @@ import { toast } from 'sonner';
 import { PermissionsGrid } from './components/permissions-grid.js';
 import { createRoleDocument, roleDetailDocument, updateRoleDocument } from './roles.graphql.js';
 
+const pageId = 'role-detail';
+
 export const Route = createFileRoute('/_authenticated/_roles/roles_/$id')({
     component: RoleDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: roleDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -43,6 +46,7 @@ function RoleDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: roleDetailDocument,
         createDocument: createRoleDocument,
         updateDocument: updateRoleDocument,
@@ -71,7 +75,7 @@ function RoleDetailPage() {
     });
 
     return (
-        <Page pageId="role-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New role</Trans> : (entity?.description ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_sellers/sellers_.$id.tsx

@@ -20,9 +20,12 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { createSellerDocument, sellerDetailDocument, updateSellerDocument } from './sellers.graphql.js';
 
+const pageId = 'seller-detail';
+
 export const Route = createFileRoute('/_authenticated/_sellers/sellers_/$id')({
     component: SellerDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: sellerDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/sellers', label: 'Sellers' },
@@ -38,7 +41,8 @@ function SellerDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: sellerDetailDocument,
         createDocument: createSellerDocument,
         updateDocument: updateSellerDocument,
@@ -65,7 +69,7 @@ function SellerDetailPage() {
     });
 
     return (
-        <Page pageId="seller-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New seller</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -30,9 +30,12 @@ import {
     updateShippingMethodDocument,
 } from './shipping-methods.graphql.js';
 
+const pageId = 'shipping-method-detail';
+
 export const Route = createFileRoute('/_authenticated/_shipping-methods/shipping-methods_/$id')({
     component: ShippingMethodDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: shippingMethodDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -51,6 +54,7 @@ function ShippingMethodDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: shippingMethodDetailDocument,
         createDocument: createShippingMethodDocument,
         updateDocument: updateShippingMethodDocument,
@@ -94,7 +98,7 @@ function ShippingMethodDetailPage() {
     });
 
     return (
-        <Page pageId="shipping-method-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New shipping method</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_stock-locations/stock-locations_.$id.tsx

@@ -26,9 +26,12 @@ import {
     updateStockLocationDocument,
 } from './stock-locations.graphql.js';
 
+const pageId = 'stock-location-detail';
+
 export const Route = createFileRoute('/_authenticated/_stock-locations/stock-locations_/$id')({
     component: StockLocationDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: stockLocationDetailQuery,
         breadcrumb(isNew, entity) {
             return [
@@ -47,6 +50,7 @@ function StockLocationDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: stockLocationDetailQuery,
         createDocument: createStockLocationDocument,
         updateDocument: updateStockLocationDocument,
@@ -74,7 +78,7 @@ function StockLocationDetailPage() {
     });
 
     return (
-        <Page pageId="stock-location-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New stock location</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_tax-categories/tax-categories.graphql.ts

@@ -24,7 +24,7 @@ export const taxCategoryListQuery = graphql(
     [taxCategoryItemFragment],
 );
 
-export const taxCategoryDetailQuery = graphql(`
+export const taxCategoryDetailDocument = graphql(`
     query TaxCategoryDetail($id: ID!) {
         taxCategory(id: $id) {
             id

package/src/app/routes/_authenticated/_tax-categories/tax-categories_.$id.tsx

@@ -22,14 +22,17 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import {
     createTaxCategoryDocument,
-    taxCategoryDetailQuery,
+    taxCategoryDetailDocument,
     updateTaxCategoryDocument,
 } from './tax-categories.graphql.js';
 
+const pageId = 'tax-category-detail';
+
 export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories_/$id')({
     component: TaxCategoryDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: taxCategoryDetailQuery,
+        pageId,
+        queryDocument: taxCategoryDetailDocument,
         breadcrumb(isNew, entity) {
             return [
                 { path: '/tax-categories', label: 'Tax categories' },
@@ -46,8 +49,9 @@ function TaxCategoryDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
-        queryDocument: taxCategoryDetailQuery,
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: taxCategoryDetailDocument,
         createDocument: createTaxCategoryDocument,
         updateDocument: updateTaxCategoryDocument,
         setValuesForUpdate: entity => {
@@ -73,7 +77,7 @@ function TaxCategoryDetailPage() {
     });
 
     return (
-        <Page pageId="tax-category-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New tax category</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_tax-rates/tax-rates.graphql.ts

@@ -37,7 +37,7 @@ export const taxRateListQuery = graphql(
     [taxRateItemFragment],
 );
 
-export const taxRateDetailQuery = graphql(
+export const taxRateDetailDocument = graphql(
     `
         query TaxRateDetail($id: ID!) {
             taxRate(id: $id) {

package/src/app/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -23,12 +23,15 @@ import { useDetailPage } from '@/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
-import { createTaxRateDocument, taxRateDetailQuery, updateTaxRateDocument } from './tax-rates.graphql.js';
+import { createTaxRateDocument, taxRateDetailDocument, updateTaxRateDocument } from './tax-rates.graphql.js';
+
+const pageId = 'tax-rate-detail';
 
 export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates_/$id')({
     component: TaxRateDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: taxRateDetailQuery,
+        pageId,
+        queryDocument: taxRateDetailDocument,
         breadcrumb(isNew, entity) {
             return [
                 { path: '/tax-rates', label: 'Tax rates' },
@@ -46,7 +49,8 @@ function TaxRateDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        queryDocument: taxRateDetailQuery,
+        pageId,
+        queryDocument: taxRateDetailDocument,
         createDocument: createTaxRateDocument,
         updateDocument: updateTaxRateDocument,
         setValuesForUpdate: entity => {
@@ -77,7 +81,7 @@ function TaxRateDetailPage() {
     });
 
     return (
-        <Page pageId="tax-rate-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New tax rate</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_zones/zones.graphql.ts

@@ -42,7 +42,7 @@ export const zoneMembersQuery = graphql(`
     }
 `);
 
-export const zoneDetailQuery = graphql(
+export const zoneDetailDocument = graphql(
     `
         query ZoneDetail($id: ID!) {
             zone(id: $id) {

package/src/app/routes/_authenticated/_zones/zones_.$id.tsx

@@ -20,12 +20,15 @@ import { Trans, useLingui } from '@/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { ZoneCountriesTable } from './components/zone-countries-table.js';
-import { createZoneDocument, updateZoneDocument, zoneDetailQuery } from './zones.graphql.js';
+import { createZoneDocument, updateZoneDocument, zoneDetailDocument } from './zones.graphql.js';
+
+const pageId = 'zone-detail';
 
 export const Route = createFileRoute('/_authenticated/_zones/zones_/$id')({
     component: ZoneDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: zoneDetailQuery,
+        pageId,
+        queryDocument: zoneDetailDocument,
         breadcrumb(isNew, entity) {
             return [{ path: '/zones', label: 'Zones' }, isNew ? <Trans>New zone</Trans> : entity?.name];
         },
@@ -40,7 +43,8 @@ function ZoneDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        queryDocument: zoneDetailQuery,
+        pageId,
+        queryDocument: zoneDetailDocument,
         createDocument: createZoneDocument,
         updateDocument: updateZoneDocument,
         setValuesForUpdate: entity => {
@@ -66,7 +70,7 @@ function ZoneDetailPage() {
     });
 
     return (
-        <Page pageId="zone-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New zone</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/lib/components/shared/detail-page-button.tsx

@@ -7,18 +7,20 @@ export function DetailPageButton({
     href,
     label,
     disabled,
+    search,
 }: {
     label: string | React.ReactNode;
     id?: string;
     href?: string;
     disabled?: boolean;
+    search?: Record<string, string>;
 }) {
     if (!id && !href) {
         return <span>{label}</span>;
     }
     return (
         <Button asChild variant="ghost" disabled={disabled}>
-            <Link to={href ?? `./${id}`}>
+            <Link to={href ?? `./${id}`} search={search ?? {}}>
                 {label}
                 {!disabled && <ChevronRight className="h-3 w-3 text-muted-foreground" />}
             </Link>

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -30,6 +30,7 @@ import {
 import { DisplayComponent } from '@/framework/component-registry/dynamic-component.js';
 import { BulkAction } from '@/framework/data-table/data-table-types.js';
 import { ResultOf } from '@/graphql/graphql.js';
+import { useExtendedListQuery } from '@/hooks/use-extended-list-query.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
@@ -276,6 +277,7 @@ export function PaginatedListDataTable<
     const [searchTerm, setSearchTerm] = React.useState<string>('');
     const debouncedSearchTerm = useDebounce(searchTerm, 500);
     const queryClient = useQueryClient();
+    const extendedListQuery = useExtendedListQuery(listQuery);
 
     const sort = sorting?.reduce((acc: any, sort: ColumnSort) => {
         const direction = sort.desc ? 'DESC' : 'ASC';
@@ -300,7 +302,7 @@ export function PaginatedListDataTable<
 
     const defaultQueryKey = [
         PaginatedListDataTableKey,
-        listQuery,
+        extendedListQuery,
         page,
         itemsPerPage,
         sorting,
@@ -329,14 +331,14 @@ export function PaginatedListDataTable<
             } as V;
 
             const transformedVariables = transformVariables ? transformVariables(variables) : variables;
-            return api.query(listQuery, transformedVariables);
+            return api.query(extendedListQuery, transformedVariables);
         },
         queryKey,
         placeholderData: keepPreviousData,
     });
 
-    const fields = useListQueryFields(listQuery);
-    const paginatedListObjectPath = getObjectPathToPaginatedList(listQuery);
+    const fields = useListQueryFields(extendedListQuery);
+    const paginatedListObjectPath = getObjectPathToPaginatedList(extendedListQuery);
 
     let listData = data as any;
     for (const path of paginatedListObjectPath) {

package/src/lib/framework/data-table/data-table-extensions.ts

@@ -1,8 +1,10 @@
 import { BulkAction } from '@/framework/data-table/data-table-types.js';
+import { DocumentNode } from 'graphql';
 
 import { globalRegistry } from '../registry/global-registry.js';
 
 globalRegistry.register('bulkActionsRegistry', new Map<string, BulkAction[]>());
+globalRegistry.register('listQueryDocumentRegistry', new Map<string, DocumentNode[]>());
 
 export function getBulkActions(pageId: string, blockId = 'list-table'): BulkAction[] {
     const key = createKey(pageId, blockId);
@@ -16,6 +18,18 @@ export function addBulkAction(pageId: string, blockId: string | undefined, actio
     bulkActionsRegistry.set(key, [...existingActions, action]);
 }
 
+export function getListQueryDocuments(pageId: string, blockId = 'list-table'): DocumentNode[] {
+    const key = createKey(pageId, blockId);
+    return globalRegistry.get('listQueryDocumentRegistry').get(key) || [];
+}
+
+export function addListQueryDocument(pageId: string, blockId: string | undefined, document: DocumentNode) {
+    const listQueryDocumentRegistry = globalRegistry.get('listQueryDocumentRegistry');
+    const key = createKey(pageId, blockId);
+    const existingDocuments = listQueryDocumentRegistry.get(key) || [];
+    listQueryDocumentRegistry.set(key, [...existingDocuments, document]);
+}
+
 function createKey(pageId: string, blockId: string | undefined): string {
     return `${pageId}__${blockId ?? 'list-table'}`;
 }