saleor: fix product sorting

framework/saleor/utils/get-search-variables.ts

@@ -1,4 +1,4 @@
-import getSortVariables from './get-sort-variables'
+import { getSortVariables } from './get-sort-variables'
 import type { SearchProductsInput } from '../product/use-search'
 
 export const getSearchVariables = ({
@@ -7,10 +7,11 @@ export const getSearchVariables = ({
   categoryId,
   sort,
 }: SearchProductsInput) => {
+  const sortBy = { direction: 'ASC', ...getSortVariables(sort, !!categoryId), channel: "default-channel"};
   return {
     categoryId,
     filter: { search },
-    ...getSortVariables(sort, !!categoryId),
+    sortBy
   }
 }
 

framework/saleor/utils/get-sort-variables.ts

@@ -1,32 +1,31 @@
-const getSortVariables = (sort?: string, isCategory: boolean = false) => {
+export const getSortVariables = (sort?: string, isCategory: boolean = false) => {
   let output = {}
   switch (sort) {
     case 'price-asc':
       output = {
-        sortKey: 'PRICE',
-        reverse: false,
+        field: 'PRICE',
+        direction: 'ASC'
       }
       break
     case 'price-desc':
       output = {
-        sortKey: 'PRICE',
-        reverse: true,
+        field: 'PRICE',
+        direction: 'DESC',
       }
       break
     case 'trending-desc':
       output = {
-        sortKey: 'BEST_SELLING',
-        reverse: false,
+        field: 'RANK',
+        direction: 'DESC',
       }
       break
     case 'latest-desc':
       output = {
-        sortKey: isCategory ? 'CREATED' : 'CREATED_AT',
-        reverse: true,
+        field: 'DATE',
+        direction: 'DESC'
       }
       break
   }
   return output
 }
 
-export default getSortVariables

framework/saleor/utils/index.ts

@@ -1,6 +1,7 @@
+export { getSortVariables } from './get-sort-variables'
+
 export { default as handleFetchResponse } from './handle-fetch-response'
 export { default as getSearchVariables } from './get-search-variables'
-export { default as getSortVariables } from './get-sort-variables'
 export { default as getVendors } from './get-vendors'
 export { default as getCategories } from './get-categories'
 export { default as getCheckoutId } from './get-checkout-id'

framework/saleor/utils/queries/get-all-products-query.ts

@@ -1,5 +1,5 @@
 export const productConnection = /* GraphQL */ `
-  fragment productConnnection on ProductCountableConnection {
+  fragment productConnection on ProductCountableConnection {
     pageInfo {
       hasNextPage
       hasPreviousPage
@@ -32,10 +32,11 @@ export const getAllProductsQuery = /* GraphQL */ `
   query getAllProducts(
     $first: Int = 100
     $filter: ProductFilterInput
+    $sortBy: ProductOrder
     $channel: String = "default-channel"
   ) {
-    products(first: $first, channel: $channel, filter: $filter) {
-      ...productConnnection
+    products(first: $first, channel: $channel, filter: $filter, sortBy: $sortBy) {
+      ...productConnection
     }
   }
   ${productConnection}

pages/search.tsx

@@ -48,10 +48,7 @@ export async function getStaticProps({
   }
 }
 
-export default function Search({
-  categories,
-  brands,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
+export default function Search({ categories, brands }: InferGetStaticPropsType<typeof getStaticProps>) {
   const [activeFilter, setActiveFilter] = useState('')
   const [toggleFilter, setToggleFilter] = useState(false)