Use categorySearch for fetching the category tree

packages/commercetools/api-client/src/api/categorySearch/defaultQuery.ts

@@ -0,0 +1,56 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  query ($filter: [SearchFilter!], $acceptLanguage: [Locale!]) {
+  categorySearch(filters: $filter) {
+    offset
+    count
+    total
+    results {
+      id
+      slug(acceptLanguage: $acceptLanguage)
+      name(acceptLanguage: $acceptLanguage)
+      description(acceptLanguage: $acceptLanguage)
+      childCount
+      stagedProductCount
+      parent {
+        ...DefaultCategorySearch
+        parent {
+          ...DefaultCategorySearch
+          parent {
+            ...DefaultCategorySearch
+          }
+        }
+      }
+      children {
+        ...DefaultCategorySearch
+      }
+    }
+  }
+}
+
+fragment DefaultCategorySearch on CategorySearch {
+  id
+  slug(acceptLanguage: $acceptLanguage)
+  name(acceptLanguage: $acceptLanguage)
+  childCount
+  stagedProductCount
+  children {
+    ...CategorySearchChildren
+    children {
+      ...CategorySearchChildren
+      children {
+        ...CategorySearchChildren
+      }
+    }
+  }
+}
+
+fragment CategorySearchChildren on CategorySearch {
+  id
+  slug(acceptLanguage: $acceptLanguage)
+  name(acceptLanguage: $acceptLanguage)
+  childCount
+  stagedProductCount
+}
+`;

packages/commercetools/api-client/src/api/categorySearch/index.ts

@@ -0,0 +1,40 @@
+import gql from 'graphql-tag';
+import defaultQuery from './defaultQuery';
+import { CategorySearchResult } from '../../types/GraphQL';
+import { buildCategoryFilter } from '../../helpers/search';
+import ApolloClient from 'apollo-client';
+import { CustomQuery } from '@vue-storefront/core';
+import { CategoryWhereSearch } from '@vue-storefront/commercetools-api';
+
+export interface CategoryData {
+  categorySearch: CategorySearchResult;
+}
+
+export interface CategorySearchParams {
+  filter?: CategoryWhereSearch;
+  limit?: number;
+  offset?: number;
+}
+
+const categorySearch = async (context, params?: CategorySearchParams, customQuery?: CustomQuery) => {
+  const { acceptLanguage } = context.config;
+  const defaultVariables = params ? {
+    filter: buildCategoryFilter(context.config, params),
+    limit: params.limit,
+    offset: params.offset,
+    acceptLanguage
+  } : { acceptLanguage };
+
+  const { categorySearch } = context.extendQuery(customQuery,
+    { categorySearch: { query: defaultQuery, variables: defaultVariables } }
+  );
+  const request = await (context.client as ApolloClient<any>).query<CategoryData>({
+    query: gql`${categorySearch.query}`,
+    variables: categorySearch.variables,
+    fetchPolicy: 'no-cache'
+  });
+
+  return request;
+};
+
+export default categorySearch;

packages/commercetools/api-client/src/api/index.ts

@@ -10,6 +10,7 @@ export { default as customerUpdateMe } from './customerUpdateMe';
 export { default as deleteCart } from './deleteCart';
 export { default as getCart } from './getCart';
 export { default as getCategory } from './getCategory';
+export { default as categorySearch } from './categorySearch';
 export { default as getMe } from './getMe';
 export { default as getOrders } from './getOrders';
 export { default as getProduct } from './getProduct';

packages/commercetools/api-client/src/helpers/search/index.ts

@@ -105,6 +105,24 @@ const buildCategoryWhere = (settings: Config, search: CategoryWhereSearch) => {
   return undefined;
 };
 
+const buildCategoryFilter = (settings: Config, filter: CategoryWhereSearch) => {
+  const { acceptLanguage } = settings;
+
+  if (filter?.catId) {
+    return [`id:"${filter.catId}"`];
+  }
+
+  if (filter?.slug) {
+    return [`slug.${acceptLanguage[0]}:"${filter.slug}"`];
+  }
+
+  if (filter?.key) {
+    return [`key:"${filter.key}"`];
+  }
+
+  return undefined;
+};
+
 const buildOrderWhere = (search: OrderWhereSearch): string => {
   if (search?.id) {
     return `id="${search.id}"`;
@@ -120,6 +138,7 @@ const buildOrderWhere = (search: OrderWhereSearch): string => {
 export {
   buildProductWhere,
   buildCategoryWhere,
+  buildCategoryFilter,
   buildOrderWhere,
   buildInventoryEntriesWhere
 };

packages/commercetools/api-client/src/types/Api.ts

@@ -21,6 +21,7 @@ import {
   Address,
   LineItem,
   CategoryQueryResult,
+  CategorySearchResult,
   ProductQueryResult,
   Me,
   CartQueryInterface,
@@ -127,6 +128,7 @@ interface ApiMethods {
   deleteCart ({ id, version }: CartDetails): Promise<CartResponse>;
   getCart (cartId: string): Promise<CartQueryResponse>;
   getCategory (params): Promise<QueryResponse<'categories', CategoryQueryResult>>;
+  categorySearch (params): Promise<QueryResponse<'categorySearch', CategorySearchResult>>;
   getMe (params?: GetMeParams): Promise<{ data: { me: Me } }>;
   getOrders (params): Promise<{ data: { me: Me } }>;
   getProduct (params): Promise<QueryResponse<'products', ProductQueryResult>>;

packages/commercetools/composables/src/getters/categoryGetters.ts

@@ -1,14 +1,15 @@
 import { CategoryGetters, AgnosticCategoryTree } from '@vue-storefront/core';
-import { Category } from './../types/GraphQL';
+import { Category, CategorySearch } from './../types/GraphQL';
 
-export const getCategoryTree = (category: Category): AgnosticCategoryTree | null => {
-  const getRoot = (category: Category): Category => (category.parent ? getRoot(category.parent) : category);
-  const buildTree = (rootCategory: Category) => ({
+export const getCategoryTree = (category: Category | CategorySearch): AgnosticCategoryTree | null => {
+  const getRoot = (category: Category | CategorySearch): Category => (category.parent ? getRoot(category.parent) : category) as Category;
+  const buildTree = (rootCategory: Category | CategorySearch) => ({
     label: rootCategory.name,
     slug: rootCategory.slug,
     id: rootCategory.id,
     isCurrent: rootCategory.id === category.id,
-    items: rootCategory.children.map(buildTree)
+    items: rootCategory.children?.map(buildTree),
+    count: rootCategory.stagedProductCount
   });
 
   if (!category) {

packages/commercetools/composables/src/types/index.ts

@@ -2,6 +2,7 @@ import {
   Filter,
   ProductVariant,
   Category,
+  CategorySearch,
   ResetPasswordResponse,
   CreatePasswordResetTokenResponse,
   Store
@@ -29,7 +30,7 @@ export interface ProductsSearchParams {
 
 export interface FacetResultsData {
   products: ProductVariant[];
-  categories: Category[];
+  categories: Category[]|CategorySearch[];
   facets: Record<string, Filter>;
   total: number;
   perPageOptions: number[];

packages/commercetools/composables/src/useFacet/index.ts

@@ -10,9 +10,8 @@ const ITEMS_PER_PAGE = [20, 40, 100];
 const useFacetFactoryParams = {
   search: async (context: Context, params: FacetSearchResult<FacetResultsData>): Promise<FacetResultsData> => {
     const itemsPerPage = params.input.itemsPerPage;
-
-    const categoryResponse = await context.$ct.api.getCategory({ slug: params.input.categorySlug });
-    const categories = categoryResponse.data.categories.results;
+    const categoryResponse = await context.$ct.api.categorySearch({ slug: params.input.categorySlug });
+    const categories = categoryResponse.data.categorySearch.results;
     const inputFilters = params.input.filters;
     const filters = Object.keys(inputFilters).reduce((prev, curr) => ([
       ...prev,