camiinthisthang · January 11, 2022 07:17
diff --git a/useQuery-hook.js b/useQuery-hook.js
 //This assumes that you've already set up Apollo Client and have wrapped your React app in an ApolloProvider component.
 //Inside your component you want to make the query from and display that data in:
 import { gql, useQuery } from "@apollo/client";
 const AddOns = () => {
    const [cartItems, setCartItems] = useState([]);

    const [sort, setSort] = useState("salePrice_DESC");
    const [productTypeFilter, setProductTypeFilter] = useState([]);
    const [strainTypeFilter, setstrainTypeFilter] = useState([]);

    const allProductsQuery = gql`
        query GetAllProducts(
            $order: [ProductOrder]
            $products: [String]
            $strains: [String]
        ) {
            productCollection(
                where: {
                    product_contains_some: $products
                    strain_contains_some: $strains
                }
                order: $order
            ) {
                items {
                    sys{
                        id
                    }
                    name
                    strainName
                    strain
                    product
                    thc
                    quantityInStock
                    costPrice
                    salePrice
                    saleDescription
                    unitDescriptor
                    sale
                    retailPriceMsrp
                    photo {
                        url
                        title
                    }
                }
            }
        }
    `;
    

    const { loading, error, data } = useQuery(allProductsQuery, {
        variables: {
            order: [sort],
            products:
                productTypeFilter.length === 0 ? undefined : productTypeFilter,
            strains:
                strainTypeFilter.length === 0 ? undefined : strainTypeFilter,
        },
    });

    if (loading) {
        return <Loading />;
    }

    if (error) {
        console.log("error", error);
        return <div>Please Reload Page</div>;
    }

    return (
        <html className='min-h-screen'>
            <Head>
                <title>Calibaba | A Monthly Cannabis Subscription Box</title>
            </Head>

            <main className='h-full'>
                <div className='shop-container border'>
                    <section>
                        <div className='max-w-2xl mx-auto py-16 px-4 sm:py-16 sm:px-6 lg:max-w-7xl lg:px-8'>
                            {/* Display Header */}
                            <header className='flex items-center justify-between'>
                                <h1 className='text-4xl font-bold text-primarybg'>
                                    Add On Shop
                                </h1>
                            </header>
                            {/* Display Shop Products */}
                            <div className='mt-8 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8'>
                              //map over the data/response from your query and pass the info as props to another component to display the data to your UI
                                {data.productCollection.items.map((product) => (
                                    <Product
                                        imagesrc={product.photo.url}
                                        name={product.name}
                                        strain={product.strain}
                                        thc={product.thc}
                                        retailPrice={product.retailPriceMsrp}
                                        salePrice={product.salePrice}
                                        description={product.saleDescription}
                                    />
                                ))}
                            </div>
                        </div>
                    </section>
                </div>
            </main>
        </html>
    );
 };

 export default AddOns;
	//This assumes that you've already set up Apollo Client and have wrapped your React app in an ApolloProvider component.
	//Inside your component you want to make the query from and display that data in:
	import { gql, useQuery } from "@apollo/client";
	const AddOns = () => {
	const [cartItems, setCartItems] = useState([]);

	const [sort, setSort] = useState("salePrice_DESC");
	const [productTypeFilter, setProductTypeFilter] = useState([]);
	const [strainTypeFilter, setstrainTypeFilter] = useState([]);

	const allProductsQuery = gql`
	query GetAllProducts(
	$order: [ProductOrder]
	$products: [String]
	$strains: [String]
	) {
	productCollection(
	where: {
	product_contains_some: $products
	strain_contains_some: $strains
	}
	order: $order
	) {
	items {
	sys{
	id
	}
	name
	strainName
	strain
	product
	thc
	quantityInStock
	costPrice
	salePrice
	saleDescription
	unitDescriptor
	sale
	retailPriceMsrp
	photo {
	url
	title
	}
	}
	}
	}
	`;


	const { loading, error, data } = useQuery(allProductsQuery, {
	variables: {
	order: [sort],
	products:
	productTypeFilter.length === 0 ? undefined : productTypeFilter,
	strains:
	strainTypeFilter.length === 0 ? undefined : strainTypeFilter,
	},
	});

	if (loading) {
	return <Loading />;
	}

	if (error) {
	console.log("error", error);
	return <div>Please Reload Page</div>;
	}

	return (
	<html className='min-h-screen'>
	<Head>
	<title>Calibaba \| A Monthly Cannabis Subscription Box</title>
	</Head>

	<main className='h-full'>
	<div className='shop-container border'>
	<section>
	<div className='max-w-2xl mx-auto py-16 px-4 sm:py-16 sm:px-6 lg:max-w-7xl lg:px-8'>
	{/* Display Header */}
	<header className='flex items-center justify-between'>
	<h1 className='text-4xl font-bold text-primarybg'>
	Add On Shop
	</h1>
	</header>
	{/* Display Shop Products */}
	<div className='mt-8 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8'>
	//map over the data/response from your query and pass the info as props to another component to display the data to your UI
	{data.productCollection.items.map((product) => (
	<Product
	imagesrc={product.photo.url}
	name={product.name}
	strain={product.strain}
	thc={product.thc}
	retailPrice={product.retailPriceMsrp}
	salePrice={product.salePrice}
	description={product.saleDescription}
	/>
	))}
	</div>
	</div>
	</section>
	</div>
	</main>
	</html>
	);
	};

	export default AddOns;