[Category Filtering]:Complete Category Filtering Feature w/ GQL

[awilcoxa]

In #361 we completed the UI requirements for Category filtering but at the time we were blocked on completion due to GQL dependency. That GQL requirement is now completed and so additional effort is required to connect the UI to the backing GQL endpoint.

GQL dependency: magento/graphql-ce#259

Describe the solution you'd like
Category Filters are now complete and available in Venia

Please let us know what packages this feature is in regards to:

• venia-concept
• pwa-buildpack
• peregrine
• pwa-devdocs
• upward-js
• upward-spec

[sirugh]

@awilcoxa As far as I can tell we are still restricted to filtering products based on this schema: ProductFilterInput. If there is another way we are supposed to filter, I'd like to learn about it.

For context, we currently filter by category_id, which is an attribute on ProductFilterInput:

products(
  filter: { category_id: { eq: "11" } }
)

Assuming we are wanting to filter using that filter variable, I would expect to be able to expand the object similar to the code below, except that we aren't because the filter object is pre-defined to be the ProductFilterInput type.

products(
  filter: { 
    category_id: { eq: "11" }
    fashion_material: { eq: "39" } # 39 == cotton, but this fails because fashion_material is not a property of ProductFilterInput
  }
)

It's also possible I'm not even approaching this the right way so I'm just documenting my findings so far for my own sake. One thing I found interesting is that you have to provide a type for everything in GQL. I'm not sure how we are going to handle the potentially large number of random attributes/props our clients will want to filter by. Do we dynamically generate the schema for products such as ConfigurableProduct?

[sirugh]

Ah, looks like this is related: magento/graphql-ce#500 which should be released in 2.3.3.

[awilcoxa]

https://devdocs.magento.com/guides/v2.3/rest/performing-searches.html

Needs additional GQL research to determine if we are blocked.

[zetlen]

Posted a comment in magento/graphql-ce#500 suggesting an alternate input structure that the GQL team might find it easier to implement. They'd have to weigh in.

[TomashKhamlai]

🔔 magento/graphql-ce#500

[sirugh]

• Custom attributes will get added to the schema after you flush the config cache.

• ProductAttributeFilterInput on 2.3.4:
  https://i.gyazo.com/869d6bddc4840780426879282900f130.png

• When we click "Apply Filters" the filter state is updated locally. In the Apply
  callback we can access that state which will be keyed filter name and value.

• We should be able to pass an input object for filter constructed from the state.

filterState.get('fashion_style')

// outut
// {
//    title: 'Above Knee',
//    value: '16432'
// }

If we want to filter for "Bottoms" and "Above Knee", we would query:

{
  products(filter: {category_id: {eq: "28"}, fashion_style: {eq: "16432"}}) {
    total_count
    items {
      name
      sku
    }
  }
}

If we wanted to filter for "Buttoms and multiple styles, we would query:

{
  products(filter: {category_id: {eq: "28"}, fashion_style: {in: ["16432", "some-other-style-id"}}) {
    total_count
    items {
      name
      sku
    }
  }
}

[awilcoxa]

Currently in progress, removing help wanted label

[sirugh]

Category filtering is operational in the search page.