From a21156529c2cf6ec329418a07a573121cd339113 Mon Sep 17 00:00:00 2001 From: Sam Riley Date: Fri, 3 Sep 2021 13:07:19 +0100 Subject: [PATCH 1/2] Use categorySearch for fetching the category tree --- .../src/api/categorySearch/defaultQuery.ts | 67 +++++++++++++++++++ .../src/api/categorySearch/index.ts | 33 +++++++++ .../commercetools/api-client/src/api/index.ts | 1 + .../api-client/src/helpers/search/index.ts | 19 ++++++ .../commercetools/api-client/src/types/Api.ts | 2 + .../src/getters/categoryGetters.ts | 11 +-- .../composables/src/types/index.ts | 3 +- .../composables/src/useFacet/index.ts | 5 +- 8 files changed, 132 insertions(+), 9 deletions(-) create mode 100644 packages/commercetools/api-client/src/api/categorySearch/defaultQuery.ts create mode 100644 packages/commercetools/api-client/src/api/categorySearch/index.ts diff --git a/packages/commercetools/api-client/src/api/categorySearch/defaultQuery.ts b/packages/commercetools/api-client/src/api/categorySearch/defaultQuery.ts new file mode 100644 index 0000000000..85e252aaf0 --- /dev/null +++ b/packages/commercetools/api-client/src/api/categorySearch/defaultQuery.ts @@ -0,0 +1,67 @@ +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 + __typename + } + __typename + } + __typename + } + children { + ...DefaultCategorySearch + __typename + } + __typename + } + __typename + } +} + +fragment DefaultCategorySearch on CategorySearch { + id + slug(acceptLanguage: $acceptLanguage) + name(acceptLanguage: $acceptLanguage) + childCount + stagedProductCount + children { + ...CategorySearchChildren + children { + ...CategorySearchChildren + children { + ...CategorySearchChildren + __typename + } + __typename + } + __typename + } + __typename +} + +fragment CategorySearchChildren on CategorySearch { + id + slug(acceptLanguage: $acceptLanguage) + name(acceptLanguage: $acceptLanguage) + childCount + stagedProductCount + __typename +} +`; diff --git a/packages/commercetools/api-client/src/api/categorySearch/index.ts b/packages/commercetools/api-client/src/api/categorySearch/index.ts new file mode 100644 index 0000000000..e225871dd5 --- /dev/null +++ b/packages/commercetools/api-client/src/api/categorySearch/index.ts @@ -0,0 +1,33 @@ +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'; + +export interface CategoryData { + categorySearch: CategorySearchResult; +} + +const categorySearch = async (context, params, 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).query({ + query: gql`${categorySearch.query}`, + variables: categorySearch.variables, + fetchPolicy: 'no-cache' + }); + + return request; +}; + +export default categorySearch; diff --git a/packages/commercetools/api-client/src/api/index.ts b/packages/commercetools/api-client/src/api/index.ts index 4197c828bc..bdd26c64b8 100644 --- a/packages/commercetools/api-client/src/api/index.ts +++ b/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'; diff --git a/packages/commercetools/api-client/src/helpers/search/index.ts b/packages/commercetools/api-client/src/helpers/search/index.ts index 63ec298859..48ce064827 100644 --- a/packages/commercetools/api-client/src/helpers/search/index.ts +++ b/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 }; diff --git a/packages/commercetools/api-client/src/types/Api.ts b/packages/commercetools/api-client/src/types/Api.ts index 4cc2b015ad..5497c87feb 100644 --- a/packages/commercetools/api-client/src/types/Api.ts +++ b/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; getCart (cartId: string): Promise; getCategory (params): Promise>; + categorySearch (params): Promise>; getMe (params?: GetMeParams): Promise<{ data: { me: Me } }>; getOrders (params): Promise<{ data: { me: Me } }>; getProduct (params): Promise>; diff --git a/packages/commercetools/composables/src/getters/categoryGetters.ts b/packages/commercetools/composables/src/getters/categoryGetters.ts index dad423c138..32e937e92f 100644 --- a/packages/commercetools/composables/src/getters/categoryGetters.ts +++ b/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) { diff --git a/packages/commercetools/composables/src/types/index.ts b/packages/commercetools/composables/src/types/index.ts index f3b2ee7b21..a30a0c1685 100644 --- a/packages/commercetools/composables/src/types/index.ts +++ b/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; total: number; perPageOptions: number[]; diff --git a/packages/commercetools/composables/src/useFacet/index.ts b/packages/commercetools/composables/src/useFacet/index.ts index 46d6d9278c..a7dc2bed0e 100644 --- a/packages/commercetools/composables/src/useFacet/index.ts +++ b/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): Promise => { 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, From ee39458f53a146e569ed619136803072b254363d Mon Sep 17 00:00:00 2001 From: Sam Riley Date: Mon, 6 Sep 2021 12:21:37 +0100 Subject: [PATCH 2/2] Remove unused typenames and add typings for params --- .../api-client/src/api/categorySearch/defaultQuery.ts | 11 ----------- .../api-client/src/api/categorySearch/index.ts | 9 ++++++++- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/commercetools/api-client/src/api/categorySearch/defaultQuery.ts b/packages/commercetools/api-client/src/api/categorySearch/defaultQuery.ts index 85e252aaf0..d0f311caaa 100644 --- a/packages/commercetools/api-client/src/api/categorySearch/defaultQuery.ts +++ b/packages/commercetools/api-client/src/api/categorySearch/defaultQuery.ts @@ -19,19 +19,13 @@ export default gql` ...DefaultCategorySearch parent { ...DefaultCategorySearch - __typename } - __typename } - __typename } children { ...DefaultCategorySearch - __typename } - __typename } - __typename } } @@ -47,13 +41,9 @@ fragment DefaultCategorySearch on CategorySearch { ...CategorySearchChildren children { ...CategorySearchChildren - __typename } - __typename } - __typename } - __typename } fragment CategorySearchChildren on CategorySearch { @@ -62,6 +52,5 @@ fragment CategorySearchChildren on CategorySearch { name(acceptLanguage: $acceptLanguage) childCount stagedProductCount - __typename } `; diff --git a/packages/commercetools/api-client/src/api/categorySearch/index.ts b/packages/commercetools/api-client/src/api/categorySearch/index.ts index e225871dd5..9b82a47cf1 100644 --- a/packages/commercetools/api-client/src/api/categorySearch/index.ts +++ b/packages/commercetools/api-client/src/api/categorySearch/index.ts @@ -4,12 +4,19 @@ 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; } -const categorySearch = async (context, params, customQuery?: CustomQuery) => { +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),