refactor!: refactor the useApi composable

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 <MUTATION = any, MUTATION_VARIABLES = any>(
     mutationVariables,
     fetchPolicy,
   }: {
-    mutation: string,
+    mutation: DocumentNode,
     mutationVariables: MUTATION_VARIABLES,
     fetchPolicy?: Extract<FetchPolicy, 'network-only' | 'no-cache'>,
   },
 ): Promise<FetchResult<MUTATION>> => context.client.mutate<MUTATION, MUTATION_VARIABLES>({
-  mutation: gql`${mutation}`,
+  mutation,
   variables: { ...mutationVariables },
   fetchPolicy: fetchPolicy || 'no-cache',
   context: {

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 <QUERY = any, QUERY_VARIABLES = any>(
     queryVariables,
     fetchPolicy,
   }: {
-    query: string,
+    query: DocumentNode,
     queryVariables?: QUERY_VARIABLES,
     fetchPolicy?: FetchPolicy,
   },
 ): Promise<ApolloQueryResult<QUERY>> => context.client.query<QUERY, QUERY_VARIABLES>({
-  query: gql`${query}`,
+  query,
   variables: { ...queryVariables },
   fetchPolicy: fetchPolicy || 'no-cache',
   context: {

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<ApolloQueryResult<CustomerOrdersQuery>>;
 
   customQuery<QUERY, QUERY_VARIABLES = any>(params: {
-    query: string,
+    query: DocumentNode,
     queryVariables?: QUERY_VARIABLES,
     fetchPolicy?: FetchPolicy,
   }): Promise<ApolloQueryResult<QUERY>>;
 
   customMutation<MUTATION, MUTATION_VARIABLES = any>(params: {
-    mutation: string,
+    mutation: DocumentNode,
     mutationVariables: MUTATION_VARIABLES,
     fetchPolicy?: Extract<FetchPolicy, 'network-only' | 'no-cache'>,
   }): Promise<FetchResult<MUTATION>>;

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

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 = <DATA, VARIABLES extends Variables = Variables>(
-  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 };
   };

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

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 {

packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue

@@ -8,7 +8,7 @@
     <SfCheckbox
       v-for="option in filter.options"
       :key="`${filter.attribute_code}-${option.value}`"
-      :label="option.label + `${option.count ? ` (${option.count})` : ''}`"
+      :label="option.label"
       :selected="Boolean(selected(filter.attribute_code, option.value))"
       class="filters__item"
       data-testid="category-filter"

packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue

@@ -9,9 +9,7 @@
       v-for="option in filter.options"
       :key="`${filter.attribute_code}-${option.value}`"
       class="radio-filter"
-      :label="`${option.label}${
-        option.count ? ` (${option.count})` : ''
-      }`"
+      :label="`${option.label}`"
       :selected="selected(filter.attribute_code, option.value)"
       :value="option.value"
       name="filter__price"

packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue

@@ -35,7 +35,7 @@ export default defineComponent({
     const { app: { i18n } } = useContext();
     const { isFilterSelected } = inject('UseFiltersProvider');
     const selected = computed(() => ((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 };
   },
 });

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);

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);

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);

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 {

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) => {

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 {

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 ?? '';

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 {

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",

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,