Product Filters

Filters are used to narrow down the list of products displayed to the user when making a Category or Search query.

The API supports 4 filter types.

  • BooleanFilter
  • ListFilter
  • NumericRangeFilter
  • MultiListFilter

Each of these filter types has an associated hook in @jetshop/core/hooks that can be used to modify the filter state.

Querying for filters

When making a Search or Category query, you can fetch the filters that are available for the resulting products. An example of this query is included in Template Trend.

The API returns the filters that are available, and the Flight framework extends the response by making it possible to also query for which filters are active. Notice the @client directives in the following fragment:

Copy
Copied
... on ListFilter {
  hasActiveItems @client
  items {
    id
    text
    value
    resultCount
    isActive @client
  }
}

These client fields are added to the response using Apollo local state. Querying for these extra client-only fields is necessary in order for the filter hooks to work.

Copyright © Norce 2023. All right reserved.