title: How to filter products by productType on Shopify?
body: <p>The desired behaviour is for users to be able to filter products by their <code>productType</code> using buttons in a menu.</p>
  <p>At the moment I'm querying the Shopify storefront API and fetching back products in <code>lib/Shopify.js</code></p>
  <pre><code>export async function getProductsInCollection() {
    const query = `
    {
      collectionByHandle(handle: &quot;frontpage&quot;) {
        title
        products(first: 25) {
          edges {
            node {
              id
              title
              productType
              handle
            }
          }
        }
      }
    }`
  
    const response = await ShopifyData(query)
    const allProducts = response.data.collectionByHandle.products.edges ? response.data.collectionByHandle.products.edges : []
    return allProducts
  }
  
  export function filter(type) {
    let filtredProducts = getProductsInCollection().filter(product =&gt; product.node.productType === type);
    return filtredProducts;
  }
  </code></pre>
  <p><code>lib/Shopify.js</code> also contains a function to fetch all the productTypes in the store.</p>
  <pre><code>export async function getProductTypes() {
    const query = 
    `{
      shop {
        products(first:250, query:&quot;-product_type:''&quot;) {
          edges {
              node {
                productType
            }
          }
        }
      }
    }`
  
    const response = await ShopifyData(query)
    const rawProductTypes = response.data.shop.products ? response.data.shop.products.edges : []
    const productTypes = Array.from(new Set(rawProductTypes));
    return productTypes
  }
  </code></pre>
  <p>Then <code>shop.js</code> loops through all of the productTypes and displays them in a menu. It also loops through all of the products.</p>
  <pre><code>import { getProductsInCollection, getProductTypes, filter } from &quot;../lib/shopify&quot;
  import React, { useState, useEffect } from &quot;react&quot;;
  import Link from 'next/link'
  
  export default function Shop({ products, pages, projects, productTypes }) {
    const [filtredProducts, setFiltredProducts] = useState(null);
  
    useEffect(() =&gt; {
      setFiltredProducts(getProductsInCollection());
    }, []);
  
    var categories = new Map();
    productTypes.forEach( function( item ) {
      categories.set(JSON.stringify(item), item);
    });
  
    function handleCategories(e) {
      let type = e.target.value;
      type !== &quot;all&quot;
        ? setFiltredProducts(filter(type))
        : setFiltredProducts(getProductsInCollection());
    }
  
    const deduped = Array.from(new Set(productTypes));
  
    return (
      &lt;div&gt;
        &lt;div&gt;
           {categories &amp;&amp;
          [...categories.values()].map((category, index) =&gt; (
            &lt;&gt;
              &lt;button className=&quot;mr-8 mb-6 underline&quot; key={index} value={category.node.productType} onClick={handleCategories}&gt;
               {category.node.productType}
              &lt;/button&gt;
            &lt;/&gt;
          ))}
        {filtredProducts &amp;&amp;
            filtredProducts.map(p =&gt; (
              &lt;ul&gt;
                &lt;li&gt;{p.node.title}&lt;/li&gt;
              &lt;/ul&gt;
            ))}
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export async function getStaticProps() {
      const products = await getProductsInCollection()
      const productTypes = await getProductTypes()
    
      return {
        props: { 
          products,
          productTypes,
        },
      }
    }
  </code></pre>
  <p>When the user tries to click on the filter they get the following error.</p>
  <blockquote>
  <p>TypeError: getProductsInCollection(...).filter is not a function</p>
  </blockquote>
  <p>What's the correct way to get the filter to work so the menu filters the products below?</p>