From aaf9ae20bc3c4539faee150c5b5a25ed20ca65a3 Mon Sep 17 00:00:00 2001 From: Bartosz Herba Date: Thu, 9 Jun 2022 13:00:13 +0200 Subject: [PATCH 1/2] refactor: refactor use api - add graphql-tag - remove count from filters --- .../api-client/src/api/customMutation/index.ts | 6 +++--- packages/api-client/src/api/customQuery/index.ts | 6 +++--- packages/api-client/src/types/API.ts | 6 +++--- .../TopBar/checkStoresAndCurrency.gql.ts | 4 +++- packages/theme/composables/useApi/index.ts | 14 +++++++++++++- .../category/components/cms/categoryContent.gql.ts | 4 +++- .../command/getProductFilterByCategory.gql.ts | 4 +++- .../components/filters/renderer/CheckboxType.vue | 2 +- .../components/filters/renderer/RadioType.vue | 4 +--- .../components/filters/renderer/YesNoType.vue | 2 +- .../composables/useFacet/getFacetData.gql.ts | 4 +++- .../input/createProductAttributeFilterInput.ts | 2 +- .../category/stores/graphql/categoryList.gql.ts | 6 ++++-- packages/theme/modules/catalog/pages/category.vue | 4 ++-- .../modules/catalog/pricing/getPricesQuery.gql.ts | 4 +++- packages/theme/package.json | 1 + packages/theme/plugins/query/StoreConfig.gql.ts | 4 +++- 17 files changed, 51 insertions(+), 26 deletions(-) diff --git a/packages/api-client/src/api/customMutation/index.ts b/packages/api-client/src/api/customMutation/index.ts index bb6d2c25f..dbe9d36cc 100644 --- a/packages/api-client/src/api/customMutation/index.ts +++ b/packages/api-client/src/api/customMutation/index.ts @@ -1,5 +1,5 @@ -import gql from 'graphql-tag'; import { FetchPolicy, FetchResult } from '@apollo/client/core'; +import { DocumentNode } from 'graphql'; import { Context } from '../../types/context'; import getHeaders from '../getHeaders'; @@ -10,12 +10,12 @@ export default async ( mutationVariables, fetchPolicy, }: { - mutation: string, + mutation: DocumentNode, mutationVariables: MUTATION_VARIABLES, fetchPolicy?: Extract, }, ): Promise> => context.client.mutate({ - mutation: gql`${mutation}`, + mutation, variables: { ...mutationVariables }, fetchPolicy: fetchPolicy || 'no-cache', context: { diff --git a/packages/api-client/src/api/customQuery/index.ts b/packages/api-client/src/api/customQuery/index.ts index 903c2cadb..970f3c1e7 100644 --- a/packages/api-client/src/api/customQuery/index.ts +++ b/packages/api-client/src/api/customQuery/index.ts @@ -1,5 +1,5 @@ -import gql from 'graphql-tag'; import { ApolloQueryResult, FetchPolicy } from '@apollo/client/core'; +import { DocumentNode } from 'graphql'; import { Context } from '../../types/context'; import getHeaders from '../getHeaders'; @@ -10,12 +10,12 @@ export default async ( queryVariables, fetchPolicy, }: { - query: string, + query: DocumentNode, queryVariables?: QUERY_VARIABLES, fetchPolicy?: FetchPolicy, }, ): Promise> => context.client.query({ - query: gql`${query}`, + query, variables: { ...queryVariables }, fetchPolicy: fetchPolicy || 'no-cache', context: { diff --git a/packages/api-client/src/types/API.ts b/packages/api-client/src/types/API.ts index debc3e52d..a01a1f4dd 100644 --- a/packages/api-client/src/types/API.ts +++ b/packages/api-client/src/types/API.ts @@ -1,5 +1,5 @@ import { ApolloQueryResult, FetchPolicy, FetchResult } from '@apollo/client/core'; -import { ExecutionResult } from 'graphql'; +import { DocumentNode, ExecutionResult } from 'graphql'; import { CustomQuery } from '@vue-storefront/core'; import { AddConfigurableProductsToCartInput, @@ -279,13 +279,13 @@ export interface MagentoApiMethods { ): Promise>; customQuery(params: { - query: string, + query: DocumentNode, queryVariables?: QUERY_VARIABLES, fetchPolicy?: FetchPolicy, }): Promise>; customMutation(params: { - mutation: string, + mutation: DocumentNode, mutationVariables: MUTATION_VARIABLES, fetchPolicy?: Extract, }): Promise>; diff --git a/packages/theme/components/TopBar/checkStoresAndCurrency.gql.ts b/packages/theme/components/TopBar/checkStoresAndCurrency.gql.ts index 5dbc99ddf..55536b414 100644 --- a/packages/theme/components/TopBar/checkStoresAndCurrency.gql.ts +++ b/packages/theme/components/TopBar/checkStoresAndCurrency.gql.ts @@ -1,4 +1,6 @@ -export default ` +import gql from 'graphql-tag'; + +export default gql` query getStoresAndCurrencies { availableStores { store_code diff --git a/packages/theme/composables/useApi/index.ts b/packages/theme/composables/useApi/index.ts index de270c4dc..e6782b031 100644 --- a/packages/theme/composables/useApi/index.ts +++ b/packages/theme/composables/useApi/index.ts @@ -1,4 +1,6 @@ import { useContext } from '@nuxtjs/composition-api'; +import type { DocumentNode } from 'graphql'; +import { Logger } from '~/helpers/logger'; export type FetchPolicy = 'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby'; @@ -17,7 +19,7 @@ export type Error = { }; export type Request = ( - request: string, + request: DocumentNode, variables?: VARIABLES, fetchPolicy?: FetchPolicy, ) => Promise<{ data: DATA, errors: Error[] }>; @@ -73,6 +75,10 @@ export interface UseApiInterface { mutate: Request; } +function getGqlString(doc: DocumentNode) { + return doc.loc && doc.loc.source.body; +} + /** * Allows executing arbitrary GraphQL queries and mutations. * @@ -86,7 +92,10 @@ export function useApi(): UseApiInterface { request, variables, ) => { + const reqID = `id${Math.random().toString(16).slice(2)}`; + Logger.debug(`customQuery/request/${reqID}`, getGqlString(request)); const { data, errors } = await context.app.$vsf.$magento.api.customQuery({ query: request, queryVariables: variables }); + Logger.debug(`customQuery/result/${reqID}`, { data, errors }); return { data, errors }; }; @@ -96,7 +105,10 @@ export function useApi(): UseApiInterface { request, variables, ) => { + const reqID = `id${Math.random().toString(16).slice(2)}`; + Logger.debug(`customQuery/request/${reqID}`, getGqlString(request)); const { data, errors } = await context.app.$vsf.$magento.api.customMutation({ mutation: request, mutationVariables: variables }); + Logger.debug(`customQuery/result/${reqID}`, { data, errors }); return { data, errors }; }; diff --git a/packages/theme/modules/catalog/category/components/cms/categoryContent.gql.ts b/packages/theme/modules/catalog/category/components/cms/categoryContent.gql.ts index dce23a8e0..88c745af2 100644 --- a/packages/theme/modules/catalog/category/components/cms/categoryContent.gql.ts +++ b/packages/theme/modules/catalog/category/components/cms/categoryContent.gql.ts @@ -1,4 +1,6 @@ -export default ` +import gql from 'graphql-tag'; + +export default gql` query getCategoryContentData($filters: CategoryFilterInput) { categoryList(filters: $filters) { uid diff --git a/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts b/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts index c0cedc9b9..573a1404e 100644 --- a/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts +++ b/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts @@ -1,4 +1,6 @@ -export default ` +import gql from 'graphql-tag'; + +export default gql` query getProductFiltersByCategory($categoryIdFilter: FilterEqualTypeInput!) { products(filter: { category_uid: $categoryIdFilter }) { aggregations { diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue index db07422e1..04f51d2f5 100644 --- a/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue +++ b/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue @@ -8,7 +8,7 @@ ((id: string, optVal: string) => isFilterSelected(id, optVal))); - const label = (option: AggregationOption) => `${(option.value === '1' ? i18n.t('Yes') : i18n.t('No'))} ${`(${option.count})`}`; + const label = (option: AggregationOption) => `${(option.value === '1' ? i18n.t('Yes') : i18n.t('No'))}`; return { selected, label }; }, }); diff --git a/packages/theme/modules/catalog/category/composables/useFacet/getFacetData.gql.ts b/packages/theme/modules/catalog/category/composables/useFacet/getFacetData.gql.ts index 41073bdf8..4a9a821c1 100644 --- a/packages/theme/modules/catalog/category/composables/useFacet/getFacetData.gql.ts +++ b/packages/theme/modules/catalog/category/composables/useFacet/getFacetData.gql.ts @@ -1,8 +1,10 @@ +import gql from 'graphql-tag'; + /** * GraphQL Query that fetches products using received search term and the params * for filter, sort and pagination. */ -export default ` +export default gql` query getFacetData($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) { products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) { items { diff --git a/packages/theme/modules/catalog/category/composables/useFacet/input/createProductAttributeFilterInput.ts b/packages/theme/modules/catalog/category/composables/useFacet/input/createProductAttributeFilterInput.ts index 88b79d502..3774807ef 100644 --- a/packages/theme/modules/catalog/category/composables/useFacet/input/createProductAttributeFilterInput.ts +++ b/packages/theme/modules/catalog/category/composables/useFacet/input/createProductAttributeFilterInput.ts @@ -9,7 +9,7 @@ export function createProductAttributeFilterInput(params: ComposableFunctionArgs const inputFilters = params?.filters ?? {}; const categoryFilter = { - category_id: { in: [params.categoryId, ...inputFilters.category_id ?? []] }, + category_uid: { in: [params.category_uid, ...inputFilters.category_uid ?? []] }, }; Object.keys(inputFilters).forEach((key: string) => { diff --git a/packages/theme/modules/catalog/category/stores/graphql/categoryList.gql.ts b/packages/theme/modules/catalog/category/stores/graphql/categoryList.gql.ts index aa5582c55..1435131eb 100644 --- a/packages/theme/modules/catalog/category/stores/graphql/categoryList.gql.ts +++ b/packages/theme/modules/catalog/category/stores/graphql/categoryList.gql.ts @@ -1,4 +1,6 @@ -const fragmentCategory = ` +import gql from 'graphql-tag'; + +const fragmentCategory = gql` fragment CategoryFields on CategoryTree { is_anchor name @@ -11,7 +13,7 @@ const fragmentCategory = ` } `; -export default ` +export default gql` query categoryList { categories { items { diff --git a/packages/theme/modules/catalog/pages/category.vue b/packages/theme/modules/catalog/pages/category.vue index 5a0cf3d22..22fc1b231 100644 --- a/packages/theme/modules/catalog/pages/category.vue +++ b/packages/theme/modules/catalog/pages/category.vue @@ -193,11 +193,11 @@ export default defineComponent({ const resolvedUrl = await resolveUrl(); if (isCategoryTreeRoute(resolvedUrl)) routeData.value = resolvedUrl; - const categoryId = routeData.value?.id; + const categoryUid = routeData.value?.uid; const [content] = await Promise.all([ getContentData(routeData.value?.uid), - search({ ...uiHelpers.getFacetsFromURL(), categoryId }), + search({ ...uiHelpers.getFacetsFromURL(), category_uid: categoryUid }), ]); cmsContent.value = content?.cmsBlock?.content ?? ''; diff --git a/packages/theme/modules/catalog/pricing/getPricesQuery.gql.ts b/packages/theme/modules/catalog/pricing/getPricesQuery.gql.ts index 771ec3551..441fa1221 100644 --- a/packages/theme/modules/catalog/pricing/getPricesQuery.gql.ts +++ b/packages/theme/modules/catalog/pricing/getPricesQuery.gql.ts @@ -1,4 +1,6 @@ -export default ` +import gql from 'graphql-tag'; + +export default gql` query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 20, $currentPage: Int = 1, $sort: ProductAttributeSortInput) { products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) { items { diff --git a/packages/theme/package.json b/packages/theme/package.json index 9be51dc50..f8fdbf6df 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -46,6 +46,7 @@ "cookie-universal-nuxt": "^2.1.5", "deepdash": "^5.3.9", "express": "4.17.3", + "graphql-tag": "^2.12.6", "is-https": "^4.0.0", "isomorphic-dompurify": "^0.18.0", "lodash.debounce": "^4.0.8", diff --git a/packages/theme/plugins/query/StoreConfig.gql.ts b/packages/theme/plugins/query/StoreConfig.gql.ts index 8bcadb908..1d36bb7bd 100644 --- a/packages/theme/plugins/query/StoreConfig.gql.ts +++ b/packages/theme/plugins/query/StoreConfig.gql.ts @@ -1,5 +1,7 @@ +import gql from 'graphql-tag'; + /** GraphQL Query that fetches store configuration from the API */ -export const StoreConfigQuery = ` +export const StoreConfigQuery = gql` query storeConfig { storeConfig { store_code, From 047edfe278608668937393bc38b2576b12285d44 Mon Sep 17 00:00:00 2001 From: Bartosz Herba Date: Fri, 10 Jun 2022 07:56:17 +0200 Subject: [PATCH 2/2] refactor: useApi - update unit tests --- .../filters/renderer/__tests__/CheckboxType.spec.ts | 4 +--- .../components/filters/renderer/__tests__/RadioType.spec.ts | 4 +--- .../components/filters/renderer/__tests__/YesNoType.spec.ts | 4 +--- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/CheckboxType.spec.ts b/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/CheckboxType.spec.ts index 49c5adb41..90894c358 100644 --- a/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/CheckboxType.spec.ts +++ b/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/CheckboxType.spec.ts @@ -41,9 +41,7 @@ describe('CheckboxType.vue', () => { filter: categoryFiltersDataWithOneOption as Aggregation, }, }); - const labelText = `${categoryFiltersDataWithOneOption.options[0].label}${categoryFiltersDataWithOneOption.options[0].count - ? ` (${categoryFiltersDataWithOneOption.options[0].count})` - : ''}`; + const labelText = `${categoryFiltersDataWithOneOption.options[0].label}`; const filterLabel = getByLabelText(labelText); await userEvent.click(filterLabel); diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/RadioType.spec.ts b/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/RadioType.spec.ts index 3b28addc2..afbfc3c6a 100644 --- a/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/RadioType.spec.ts +++ b/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/RadioType.spec.ts @@ -46,9 +46,7 @@ describe('RadioType.vue', () => { filter: categoryFiltersDataWithOneOption as Aggregation, }, }); - const labelText = `${categoryFiltersDataWithOneOption.options[0].label}${categoryFiltersDataWithOneOption.options[0].count - ? ` (${categoryFiltersDataWithOneOption.options[0].count})` - : ''}`; + const labelText = `${categoryFiltersDataWithOneOption.options[0].label}`; const filterLabel = getByLabelText(labelText); await userEvent.click(filterLabel); diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/YesNoType.spec.ts b/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/YesNoType.spec.ts index 4419a6ab9..b368e4a1e 100644 --- a/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/YesNoType.spec.ts +++ b/packages/theme/modules/catalog/category/components/filters/renderer/__tests__/YesNoType.spec.ts @@ -54,9 +54,7 @@ describe('YesNoType.vue', () => { filter: categoryFiltersDataWithOneOption as Aggregation, }, }); - const labelText = `No ${categoryFiltersDataWithOneOption.options[0].count - ? `(${categoryFiltersDataWithOneOption.options[0].count})` - : ''}`; + const labelText = 'No'; const filterLabel = getByLabelText(labelText); await userEvent.click(filterLabel);