import * as React from 'react'; import { useDebounce } from 'use-debounce'; import { useQuery } from './client'; import { FacetValueFilters } from './FacetValueFilters'; import './style.css'; const SEARCH_PRODUCTS = /*GraphQL*/ ` query SearchProducts($input: SearchInput!) { search(input: $input) { totalItems facetValues { count facetValue { id name facet { id name } } } items { productName slug productAsset { id preview } priceWithTax { ... on SinglePrice { value } ... on PriceRange { min max } } currencyCode } } } `; export default function App() { const [value, setValue] = React.useState('camera'); const [filterIds, setFilterIds] = React.useState([]); const [term] = useDebounce(value, 300); const { data, loading, error } = useQuery( SEARCH_PRODUCTS, { input: { term, groupByProduct: true, skip: 0, take: 10, facetValueFilters: filterIds.map((id) => ({ and: id })), }, }, [term, filterIds] ); if (loading) return

; if (error) return

Error : {error.message}

; return (

Search:{' '} { setValue(e.target.value); }} /> setFilterIds(ids)} />

{data.search.items.map(({ productName, slug, productAsset }) => (

{productName}

))}

); }