lazy load product attributes per visible column using assignedAttribute(slug)

Replace bulk assignedAttributes fetch with per-attribute lazy loading:
- New ProductListAttribute query uses assignedAttribute(slug:) to fetch
  one attribute at a time per visible column
- Add slug field to GridAttributes selectedAttributes query
- useProductListAttributes hook fires parallel queries per visible slug
- Replaced useLazyQuery with useQuery/client.query for Apollo 3.4 compat
- GridAttributes query now uses useQuery instead of useLazyQuery

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: lkostrowski

src/attributes/utils/assignedAttributes.ts

@@ -1,8 +1,8 @@
-import { type ProductListQuery } from "@dashboard/graphql";
+import { type ProductListAttributeQuery } from "@dashboard/graphql";
 import { type RelayToFlat } from "@dashboard/types";
 
-type ProductListItems = NonNullable<RelayToFlat<ProductListQuery["products"]>>;
-type AssignedAttributeItem = ProductListItems[number]["assignedAttributes"][number];
+type ProductListAttributeItems = NonNullable<RelayToFlat<ProductListAttributeQuery["products"]>>;
+type AssignedAttributeItem = NonNullable<ProductListAttributeItems[number]["assignedAttribute"]>;
 
 export function getDisplayValueFromAssignedAttribute(attr: AssignedAttributeItem): string {
   switch (attr.__typename) {

src/graphql/hooks.generated.ts

@@ -15939,9 +15939,6 @@ export const ProductListDocument = gql`
         updatedAt
         created
         description
-        assignedAttributes {
-          ...ProductListAssignedAttribute
-        }
       }
     }
     pageInfo {
@@ -15953,8 +15950,7 @@ export const ProductListDocument = gql`
     totalCount
   }
 }
-    ${ProductForListFragmentDoc}
-${ProductListAssignedAttributeFragmentDoc}`;
+    ${ProductForListFragmentDoc}`;
 
 /**
  * __useProductListQuery__
@@ -16317,6 +16313,7 @@ export const GridAttributesDocument = gql`
       node {
         id
         name
+        slug
       }
     }
   }
@@ -16457,6 +16454,49 @@ export function useGridWarehousesLazyQuery(baseOptions?: ApolloReactHooks.LazyQu
 export type GridWarehousesQueryHookResult = ReturnType<typeof useGridWarehousesQuery>;
 export type GridWarehousesLazyQueryHookResult = ReturnType<typeof useGridWarehousesLazyQuery>;
 export type GridWarehousesQueryResult = Apollo.QueryResult<Types.GridWarehousesQuery, Types.GridWarehousesQueryVariables>;
+export const ProductListAttributeDocument = gql`
+    query ProductListAttribute($ids: [ID!]!, $slug: String!) {
+  products(where: {ids: $ids}, first: 100) {
+    edges {
+      node {
+        id
+        assignedAttribute(slug: $slug) {
+          ...ProductListAssignedAttribute
+        }
+      }
+    }
+  }
+}
+    ${ProductListAssignedAttributeFragmentDoc}`;
+
+/**
+ * __useProductListAttributeQuery__
+ *
+ * To run a query within a React component, call `useProductListAttributeQuery` and pass it any options that fit your needs.
+ * When your component renders, `useProductListAttributeQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useProductListAttributeQuery({
+ *   variables: {
+ *      ids: // value for 'ids'
+ *      slug: // value for 'slug'
+ *   },
+ * });
+ */
+export function useProductListAttributeQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.ProductListAttributeQuery, Types.ProductListAttributeQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.ProductListAttributeQuery, Types.ProductListAttributeQueryVariables>(ProductListAttributeDocument, options);
+      }
+export function useProductListAttributeLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.ProductListAttributeQuery, Types.ProductListAttributeQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.ProductListAttributeQuery, Types.ProductListAttributeQueryVariables>(ProductListAttributeDocument, options);
+        }
+export type ProductListAttributeQueryHookResult = ReturnType<typeof useProductListAttributeQuery>;
+export type ProductListAttributeLazyQueryHookResult = ReturnType<typeof useProductListAttributeLazyQuery>;
+export type ProductListAttributeQueryResult = Apollo.QueryResult<Types.ProductListAttributeQuery, Types.ProductListAttributeQueryVariables>;
 export const ChannelDiagnosticsDocument = gql`
     query ChannelDiagnostics {
   channels {

src/graphql/types.generated.ts

@@ -12928,7 +12928,7 @@ export type ProductListQueryVariables = Exact<{
 }>;
 
 
-export type ProductListQuery = { __typename: 'Query', products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', updatedAt: any, created: any, description: any | null, id: string, name: string, assignedAttributes: Array<{ __typename: 'AssignedBooleanAttribute', booleanValue: boolean | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedDateAttribute', dateValue: string | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedDateTimeAttribute', dateTimeValue: any | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedFileAttribute', attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiCategoryReferenceAttribute', multiCategoryReferenceValue: Array<{ __typename: 'Category', name: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiChoiceAttribute', multiChoiceValue: Array<{ __typename: 'AssignedChoiceAttributeValue', name: string | null }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiCollectionReferenceAttribute', multiCollectionReferenceValue: Array<{ __typename: 'Collection', name: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiPageReferenceAttribute', multiPageReferenceValue: Array<{ __typename: 'Page', title: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiProductReferenceAttribute', multiProductReferenceValue: Array<{ __typename: 'Product', name: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiProductVariantReferenceAttribute', multiVariantReferenceValue: Array<{ __typename: 'ProductVariant', name: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedNumericAttribute', numericValue: number | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedPlainTextAttribute', plainTextValue: string | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleCategoryReferenceAttribute', categoryReferenceValue: { __typename: 'Category', name: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleChoiceAttribute', singleChoiceValue: { __typename: 'AssignedChoiceAttributeValue', name: string | null } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleCollectionReferenceAttribute', collectionReferenceValue: { __typename: 'Collection', name: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSinglePageReferenceAttribute', pageReferenceValue: { __typename: 'Page', title: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleProductReferenceAttribute', productReferenceValue: { __typename: 'Product', name: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleProductVariantReferenceAttribute', variantReferenceValue: { __typename: 'ProductVariant', name: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSwatchAttribute', swatchValue: { __typename: 'AssignedSwatchAttributeValue', name: string | null } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedTextAttribute', attribute: { __typename: 'Attribute', id: string } }>, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, category?: { __typename: 'Category', id: string, name: string } | null, collections?: Array<{ __typename: 'Collection', id: string, name: string }> | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, pricing?: { __typename: 'ProductPricingInfo', priceRange: { __typename: 'TaxedMoneyRange', start: { __typename: 'TaxedMoney', net: { __typename: 'Money', amount: number, currency: string } } | null, stop: { __typename: 'TaxedMoney', net: { __typename: 'Money', amount: number, currency: string } } | null } | null } | null, channel: { __typename: 'Channel', id: string, name: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', hasPreviousPage: boolean, hasNextPage: boolean, startCursor: string | null, endCursor: string | null } } | null };
+export type ProductListQuery = { __typename: 'Query', products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', updatedAt: any, created: any, description: any | null, id: string, name: string, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, category?: { __typename: 'Category', id: string, name: string } | null, collections?: Array<{ __typename: 'Collection', id: string, name: string }> | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, pricing?: { __typename: 'ProductPricingInfo', priceRange: { __typename: 'TaxedMoneyRange', start: { __typename: 'TaxedMoney', net: { __typename: 'Money', amount: number, currency: string } } | null, stop: { __typename: 'TaxedMoney', net: { __typename: 'Money', amount: number, currency: string } } | null } | null } | null, channel: { __typename: 'Channel', id: string, name: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', hasPreviousPage: boolean, hasNextPage: boolean, startCursor: string | null, endCursor: string | null } } | null };
 
 export type ProductCountQueryVariables = Exact<{
   filter?: InputMaybe<ProductFilterInput>;
@@ -13000,7 +13000,7 @@ export type GridAttributesQueryVariables = Exact<{
 }>;
 
 
-export type GridAttributesQuery = { __typename: 'Query', availableAttributes: { __typename: 'AttributeCountableConnection', edges: Array<{ __typename: 'AttributeCountableEdge', node: { __typename: 'Attribute', id: string, name: string | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, selectedAttributes: { __typename: 'AttributeCountableConnection', edges: Array<{ __typename: 'AttributeCountableEdge', node: { __typename: 'Attribute', id: string, name: string | null } }> } | null };
+export type GridAttributesQuery = { __typename: 'Query', availableAttributes: { __typename: 'AttributeCountableConnection', edges: Array<{ __typename: 'AttributeCountableEdge', node: { __typename: 'Attribute', id: string, name: string | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, selectedAttributes: { __typename: 'AttributeCountableConnection', edges: Array<{ __typename: 'AttributeCountableEdge', node: { __typename: 'Attribute', id: string, name: string | null, slug: string | null } }> } | null };
 
 export type AvailableColumnAttributesQueryVariables = Exact<{
   search: Scalars['String'];
@@ -13022,6 +13022,14 @@ export type GridWarehousesQueryVariables = Exact<{
 
 export type GridWarehousesQuery = { __typename: 'Query', availableWarehouses: { __typename: 'WarehouseCountableConnection', edges: Array<{ __typename: 'WarehouseCountableEdge', node: { __typename: 'Warehouse', id: string, name: string } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, selectedWarehouses: { __typename: 'WarehouseCountableConnection', edges: Array<{ __typename: 'WarehouseCountableEdge', node: { __typename: 'Warehouse', id: string, name: string } }> } | null };
 
+export type ProductListAttributeQueryVariables = Exact<{
+  ids: Array<Scalars['ID']> | Scalars['ID'];
+  slug: Scalars['String'];
+}>;
+
+
+export type ProductListAttributeQuery = { __typename: 'Query', products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, assignedAttribute: { __typename: 'AssignedBooleanAttribute', booleanValue: boolean | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedDateAttribute', dateValue: string | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedDateTimeAttribute', dateTimeValue: any | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedFileAttribute', attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiCategoryReferenceAttribute', multiCategoryReferenceValue: Array<{ __typename: 'Category', name: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiChoiceAttribute', multiChoiceValue: Array<{ __typename: 'AssignedChoiceAttributeValue', name: string | null }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiCollectionReferenceAttribute', multiCollectionReferenceValue: Array<{ __typename: 'Collection', name: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiPageReferenceAttribute', multiPageReferenceValue: Array<{ __typename: 'Page', title: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiProductReferenceAttribute', multiProductReferenceValue: Array<{ __typename: 'Product', name: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedMultiProductVariantReferenceAttribute', multiVariantReferenceValue: Array<{ __typename: 'ProductVariant', name: string }>, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedNumericAttribute', numericValue: number | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedPlainTextAttribute', plainTextValue: string | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleCategoryReferenceAttribute', categoryReferenceValue: { __typename: 'Category', name: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleChoiceAttribute', singleChoiceValue: { __typename: 'AssignedChoiceAttributeValue', name: string | null } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleCollectionReferenceAttribute', collectionReferenceValue: { __typename: 'Collection', name: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSinglePageReferenceAttribute', pageReferenceValue: { __typename: 'Page', title: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleProductReferenceAttribute', productReferenceValue: { __typename: 'Product', name: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSingleProductVariantReferenceAttribute', variantReferenceValue: { __typename: 'ProductVariant', name: string } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedSwatchAttribute', swatchValue: { __typename: 'AssignedSwatchAttributeValue', name: string | null } | null, attribute: { __typename: 'Attribute', id: string } } | { __typename: 'AssignedTextAttribute', attribute: { __typename: 'Attribute', id: string } } | null } }> } | null };
+
 export type ChannelDiagnosticsQueryVariables = Exact<{ [key: string]: never; }>;
 
 

src/products/components/ProductListDatagrid/ProductListDatagrid.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import { type LazyQueryResult } from "@apollo/client/react";
+import { type QueryResult } from "@apollo/client/react";
 import { ColumnPicker } from "@dashboard/components/Datagrid/ColumnPicker/ColumnPicker";
 import { useColumns } from "@dashboard/components/Datagrid/ColumnPicker/useColumns";
 import { Datagrid } from "@dashboard/components/Datagrid/Datagrid";
@@ -49,14 +49,15 @@ import {
 } from "./datagrid";
 import { messages } from "./messages";
 import { usePriceClick } from "./usePriceClick";
+import { useProductListAttributes } from "./useProductListAttributes";
 
 interface ProductListDatagridProps
   extends ListProps<ProductListColumns>,
     PageListProps<ProductListColumns>,
     SortPage<ProductListUrlSortField>,
     ChannelProps {
   activeAttributeSortId: string;
-  gridAttributesOpts: LazyQueryResult<
+  gridAttributesOpts: QueryResult<
     GridAttributesQuery,
     Exact<{
       ids: string | string[];
@@ -98,6 +99,32 @@ export const ProductListDatagrid = ({
   const productsLength = getProductRowsLength(disabled, products, disabled);
   const onPriceClick = usePriceClick({ isChannelSelected });
 
+  const productIds = useMemo(() => products?.map(p => p.id) ?? [], [products]);
+
+  const visibleAttributeSlugs = useMemo(() => {
+    const selectedAttributes = mapEdgesToItems(gridAttributesOpts.data?.selectedAttributes);
+    const visibleAttrIds = (settings?.columns ?? [])
+      .filter(isAttributeColumnValue)
+      .map(getAttributeIdFromColumnValue);
+
+    if (visibleAttrIds.length === 0 || !selectedAttributes) {
+      return [];
+    }
+
+    return visibleAttrIds
+      .map(id => {
+        const attr = selectedAttributes.find(a => a.id === id);
+
+        return attr?.slug ? { id, slug: attr.slug } : null;
+      })
+      .filter(Boolean) as Array<{ id: string; slug: string }>;
+  }, [settings?.columns, gridAttributesOpts.data]);
+
+  const { getAssignedAttribute, attributesLoading } = useProductListAttributes({
+    productIds,
+    visibleAttributeSlugs,
+  });
+
   const handleColumnChange = useCallback(
     (picked: ProductListColumns[]) => {
       onUpdateListSettings("columns", picked.filter(Boolean));
@@ -247,8 +274,18 @@ export const ProductListDatagrid = ({
         theme,
         locale,
         selectedChannelId,
+        getAssignedAttribute,
+        attributesLoading,
       }),
-    [visibleColumns, products, intl, locale, selectedChannelId],
+    [
+      visibleColumns,
+      products,
+      intl,
+      locale,
+      selectedChannelId,
+      getAssignedAttribute,
+      attributesLoading,
+    ],
   );
 
   return (