@jetshop/core/hooks/ProductList/useProductListItems.js

import { useContext, useMemo, useState, useEffect } from 'react';
import { useQuery } from 'react-apollo';
import { flattenList, getProductDetailForFlattenedProductList } from './list-transforms';
import { ProductListContext } from './ProductListContext';
import getErrorDetail from '../../helpers/getErrorDetail';
/**
 * Returns a list of products ready to be rendered
 */
export function useProductListItems(
/** Passing null for id will retrieve the default product list */
id = null, options = {}) {
    if (id && typeof id !== 'string')
        throw new Error('Product list id must be a string or null');
    const { state: { list }, queries, dispatch, usingLocalList } = useContext(ProductListContext);
    const [hydrated, setHydrated] = useState(!usingLocalList);
    const flattenedList = useMemo(() => flattenList(list), [list]);
    // Make a `products` query containing every item in the list
    const productQueryResult = useQuery(queries.productsQuery, {
        skip: flattenedList.length === 0,
        errorPolicy: 'all',
        variables: {
            articleNumbers: flattenedList
                .map(listItem => listItem.articleNumber)
                .slice(0, options.limit)
        }
    });
    // Remove the invalid item from the product list if it does not exist
    if (productQueryResult.error) {
        const { codes, data } = getErrorDetail(productQueryResult.error);
        if (codes.includes('ProductNotFound')) {
            for (const item of data) {
                dispatch({ type: 'REMOVE', payload: { articleNumber: item.argument } });
            }
        }
    }
    //  When using localStorage, we only want to display the list values after
    //  hydration, to avoid the initial server and client render being different
    useEffect(() => {
        setHydrated(true);
    }, []);
    const result = {
        products: getProductDetailForFlattenedProductList(flattenedList, productQueryResult),
        loading: hydrated ? productQueryResult.loading : true
    };
    return result;
}
//# sourceMappingURL=useProductListItems.js.map