import * as React from 'react'; import { query, useQuery } from './client'; import './style.css'; const GET_COLLECTION_PRODUCTS = /*GraphQL*/ ` query GetCollectionProducts($slug: String!, $skip: Int!, $take: Int!) { collection(slug: $slug) { id name description featuredAsset { id preview } } search( input: { collectionSlug: $slug, groupByProduct: true, skip: $skip, take: $take } ) { totalItems items { productName slug productAsset { id preview } priceWithTax { ... on SinglePrice { value } ... on PriceRange { min max } } currencyCode } } } `; export default function App() { const [slug, setSlug] = React.useState('electronics'); const { data, loading, error } = useQuery( GET_COLLECTION_PRODUCTS, { slug: slug, skip: 0, take: 10, }, [slug] ); if (loading) return

; if (error) return

Error : {error.message}

; return (

setSlug(slug)} />

{data.collection.name}

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

{productName}

))}

); } function Header(props: { navigate: (slug: string) => void }) { return (

); }