Architecture Overview

Sorting Products

The products query also enables us to change the order of the returned product collection through sorting. The products query takes the sortBy argument as input, and it allows you to specify which field to use for sorting along with the sorting order, i.e., ascending or descending.

Let's rework our previous query so that it also specifies the sorting:

  1. Navigate to graphql/queries/ProductFilterByName.graphql file and update the query:
# graphql/queries/ProductFilterByName.graphql
query ProductFilterByName($filter: ProductFilterInput!, $sortBy: ProductOrder) {
products(
first: 12
channel: "default-channel"
filter: $filter
sortBy: $sortBy
) { edges { node { id name thumbnail { url } category { name } } } } }

As with filtering, we use the $sortBy variable on our ProductFilterByName query so that the sorting can be specified dynamically in a React component as input to its React hook.

  1. Run the generate script in your Terminal or have it run in the watch mode, as described in the previous sections.
  2. Update the ProductCollection.tsx component with the changes below:
// components/ProductCollection.tsx
...
import { Product, useProductFilterByNameQuery, OrderDirection, ProductOrderField } from '@/saleor/api';
... const { loading, error, data } = useProductFilterByNameQuery({ variables: { filter: { search: 'juice' },
sortBy: {
field: ProductOrderField.Name,
direction: OrderDirection.Desc
}
} }); ...

In the example above, we have the product name as the field for sorting, along with the descending direction. That means we will be using the lexicographic order, and as a result, the products will be reversed:

Filtered products in the reversed order.
Filtered products in the reversed order.

Help us improve our docs. Edit this page on GitHub