Relation Selector Components

interface RelationSelectorConfig<T> {    /** The GraphQL query document for fetching items */    listQuery: DocumentNode;    /** The property key for the entity ID */    idKey: keyof T;    /** The property key for the display label (used as fallback when label function not provided) */    labelKey: keyof T;    /** Number of items to load per page (default: 25) */    pageSize?: number;    /** Placeholder text for the search input */    placeholder?: string;    /** Whether to enable multi-select mode */    multiple?: boolean;    /** Custom filter function for search */    buildSearchFilter?: (searchTerm: string) => any;    /** Custom label renderer function for rich display */    label?: (item: T) => React.ReactNode;}

import {    SingleRelationInput,    createRelationSelectorConfig,    graphql,    ResultOf,    DashboardFormComponentProps,} from '@vendure/dashboard';const productListQuery = graphql(`    query GetProductsWithDetails($options: ProductListOptions) {        products(options: $options) {            items {                id                name                slug                featuredAsset {                    id                    preview                }                variants {                    id                    price                    currencyCode                }            }            totalItems        }    }`);const richProductConfig = createRelationSelectorConfig<    ResultOf<typeof productListQuery>['products']['items'][0]>({    listQuery: productListQuery,    idKey: 'id',    labelKey: 'name', // Used as fallback    placeholder: 'Search products...',    label: product => (        <div className="flex items-center gap-3 py-1">            {product.featuredAsset?.preview && (                <img                    src={product.featuredAsset.preview}                    alt={product.name}                    className="w-10 h-10 rounded object-cover"                />            )}            <div className="flex-1 min-w-0">                <div className="font-medium truncate">{product.name}</div>                <div className="text-sm text-muted-foreground">                    {product.variants[0] && (                        <span>                            {product.variants[0].price / 100} {product.variants[0].currencyCode}                        </span>                    )}                </div>            </div>        </div>    ),    buildSearchFilter: (term: string) => ({        name: { contains: term },    }),});export function RichProductSelectorComponent({ value, onChange, disabled }: DashboardFormComponentProps) {    return (        <SingleRelationInput            value={value}            onChange={onChange}            config={richProductConfig}            disabled={disabled}        />    );}

import {    MultiRelationInput,    createRelationSelectorConfig,    graphql,    ResultOf,    DashboardFormComponentProps,} from '@vendure/dashboard';const customerListQuery = graphql(`    query GetCustomersWithStatus($options: CustomerListOptions) {        customers(options: $options) {            items {                id                firstName                lastName                emailAddress                user {                    verified                    lastLogin                }                orders {                    totalQuantity                }            }            totalItems        }    }`);const customerConfig = createRelationSelectorConfig<    ResultOf<typeof customerListQuery>['customers']['items'][0]>({    listQuery: customerListQuery,    idKey: 'id',    labelKey: 'emailAddress',    placeholder: 'Search customers...',    label: customer => (        <div className="flex items-center justify-between py-1 w-full">            <div className="flex-1 min-w-0">                <div className="font-medium truncate">                    {customer.firstName} {customer.lastName}                </div>                <div className="text-sm text-muted-foreground truncate">{customer.emailAddress}</div>            </div>            <div className="flex items-center gap-2 ml-2">                {customer.user?.verified ? (                    <span className="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">                        Verified                    </span>                ) : (                    <span className="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-800">                        Unverified                    </span>                )}                <span className="text-xs text-muted-foreground">{customer.orders.totalQuantity} orders</span>            </div>        </div>    ),    buildSearchFilter: (term: string) => ({        or: [            { emailAddress: { contains: term } },            { firstName: { contains: term } },            { lastName: { contains: term } },        ],    }),});export function CustomerSelectorWithStatusComponent({    value,    onChange,    disabled,}: DashboardFormComponentProps) {    return (        <MultiRelationInput            value={value || []}            onChange={onChange}            config={customerConfig}            disabled={disabled}        />    );}

import {    SingleRelationInput,    createRelationSelectorConfig,    graphql,    ResultOf,    DashboardFormComponentProps,} from '@vendure/dashboard';const reviewFragment = graphql(`    fragment ReviewForSelector on ProductReview {        id        title        rating        summary        state        product {            name        }    }`);const reviewListQuery = graphql(    `        query GetReviewsForSelection($options: ProductReviewListOptions) {            productReviews(options: $options) {                items {                    ...ReviewForSelector                }                totalItems            }        }    `,    [reviewFragment],);const reviewConfig = createRelationSelectorConfig<ResultOf<typeof reviewFragment>>({    listQuery: reviewListQuery,    idKey: 'id',    labelKey: 'title',    placeholder: 'Search reviews by title or summary...',    pageSize: 20, // Custom page size    buildSearchFilter: (term: string) => ({        // Search across multiple fields        or: [            { title: { contains: term } },            { summary: { contains: term } },            { product: { name: { contains: term } } },        ],    }),});export function ReviewSelectorComponent({ value, onChange }: DashboardFormComponentProps) {    return <SingleRelationInput value={value} onChange={onChange} config={reviewConfig} />;}

import {    graphql,    createRelationSelectorConfig,    SingleRelationInput,    DashboardFormComponentProps,} from '@vendure/dashboard';const assetListQuery = graphql(`    query GetAssetsForSelection($options: AssetListOptions) {        assets(options: $options) {            items {                id                name                preview                type                fileSize            }            totalItems        }    }`);const imageAssetConfig = createRelationSelectorConfig({    listQuery: assetListQuery,    idKey: 'id',    labelKey: 'name',    placeholder: 'Search images...',    buildSearchFilter: (term: string) => ({        and: [            { type: { eq: 'IMAGE' } }, // Only show images            {                or: [{ name: { contains: term } }, { preview: { contains: term } }],            },        ],    }),});export function ImageSelectorComponent({ value, onChange }: DashboardFormComponentProps) {    return <SingleRelationInput value={value} onChange={onChange} config={imageAssetConfig} />;}

import {    MultiRelationInput,    createRelationSelectorConfig,    graphql,    DashboardFormComponentProps,} from '@vendure/dashboard';const customerListQuery = graphql(`    query GetCustomersForSelection($options: CustomerListOptions) {        customers(options: $options) {            items {                id                firstName                lastName                emailAddress                user {                    verified                }            }            totalItems        }    }`);const activeCustomerConfig = createRelationSelectorConfig({    listQuery: customerListQuery,    idKey: 'id',    labelKey: 'emailAddress',    placeholder: 'Search verified customers...',    pageSize: 30,    buildSearchFilter: (term: string) => ({        and: [            { user: { verified: { eq: true } } }, // Only verified customers            {                or: [                    { emailAddress: { contains: term } },                    { firstName: { contains: term } },                    { lastName: { contains: term } },                ],            },        ],    }),});export function ActiveCustomerSelectorComponent({ value, onChange }: DashboardFormComponentProps) {    return <MultiRelationInput value={value || []} onChange={onChange} config={activeCustomerConfig} />;}

import { defineDashboardExtension } from '@vendure/dashboard';import {    ProductSelectorComponent,    ReviewSelectorComponent,    ImageSelectorComponent,    ActiveCustomerSelectorComponent,} from './components';defineDashboardExtension({    detailForms: [        {            pageId: 'product-detail',            inputs: [                {                    blockId: 'product-form',                    field: 'featuredProductId',                    component: ProductSelectorComponent,                },                {                    blockId: 'product-form',                    field: 'relatedCustomerIds',                    component: ActiveCustomerSelectorComponent,                },            ],        },        {            pageId: 'collection-detail',            inputs: [                {                    blockId: 'collection-form',                    field: 'featuredImageId',                    component: ImageSelectorComponent,                },                {                    blockId: 'collection-form',                    field: 'featuredReviewId',                    component: ReviewSelectorComponent,                },            ],        },    ],});

import {    productRelationConfig,    customerRelationConfig,    collectionRelationConfig,    SingleRelationInput,    MultiRelationInput,    DashboardFormComponentProps,} from '@vendure/dashboard';// Use pre-built configurationsexport function QuickProductSelector({ value, onChange }: DashboardFormComponentProps) {    return <SingleRelationInput value={value} onChange={onChange} config={productRelationConfig} />;}export function QuickCustomerMultiSelector({ value, onChange }: DashboardFormComponentProps) {    return <MultiRelationInput value={value || []} onChange={onChange} config={customerRelationConfig} />;}

// Good: Minimal required fieldsconst productListQuery = graphql(`    query GetProductsForSelection($options: ProductListOptions) {        products(options: $options) {            items {                id                name                # Only include what you need            }            totalItems        }    }`);// Avoid: Over-fetching unnecessary dataconst productListQuery = graphql(`    query GetProductsForSelection($options: ProductListOptions) {        products(options: $options) {            items {                id                name                description                featuredAsset { ... } # Only if you display it                variants { ... }      # Usually not needed for selection                # etc.            }            totalItems        }    }`);

const config = createRelationSelectorConfig({    listQuery: myQuery,    idKey: 'id',    labelKey: 'name',    pageSize: 25, // Good default, adjust based on your data    buildSearchFilter: (term: string) => ({        // Use indexed fields for better performance        name: { contains: term },    }),});

interface MyEntity {    id: string;    title: string;    status: 'ACTIVE' | 'INACTIVE';}const myEntityConfig = createRelationSelectorConfig<MyEntity>({    listQuery: myEntityQuery,    idKey: 'id', // ✅ TypeScript knows this must be a key of MyEntity    labelKey: 'title', // ✅ TypeScript validates this field exists    buildSearchFilter: (term: string) => ({        title: { contains: term }, // ✅ Auto-completion and validation    }),});

// Good: Simple, robust label designlabel: item => (    <div className="flex items-center gap-2">        {item.image && <img src={item.image} alt={item.name} className="w-8 h-8 rounded object-cover" />}        <div className="flex-1 min-w-0">            <div className="font-medium truncate">{item.name}</div>            {item.status && <div className="text-sm text-muted-foreground">{item.status}</div>}        </div>    </div>);// Avoid: Overly complex layoutslabel: item => (    <div className="complex-grid-layout-with-many-nested-elements">        {/* Too much complexity can hurt performance */}    </div>);

// Problem: Wrong field used for searchbuildSearchFilter: (term: string) => ({    wrongField: { contains: term }, // This field doesn't exist});// Solution: Use correct field namesbuildSearchFilter: (term: string) => ({    name: { contains: term }, // Correct field name});

// Problem: Missing type parameterconst config = createRelationSelectorConfig({    // TypeScript can't infer the entity type});// Solution: Provide explicit type or use proper typingconst config = createRelationSelectorConfig<MyEntityType>({    // Now TypeScript knows the shape of your entity});

// Efficient search filterbuildSearchFilter: (term: string) => ({    name: { contains: term }, // Simple, indexed field});// Less efficientbuildSearchFilter: (term: string) => ({    or: [        { name: { contains: term } },        { description: { contains: term } },        { deepNestedField: { someComplexFilter: term } }, // Avoid deep nesting    ],});