refactor: refactored useUrlResolver

Author: Marcin Kwiatkowski

packages/composables/src/composables/useUrlResolver/index.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version 1.0.0
+ */
 import { Context, Logger } from '@vue-storefront/core';
 import { Route } from '@vue-storefront/magento-api';
 import { useUrlResolverFactory, UseUrlResolverFactoryParams } from '../../factories/useUrlResolverFactory';

packages/composables/src/factories/useUrlResolverFactory.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version 1.0.0
+ */
 import {
   configureFactoryParams,
   Context,

packages/theme/composables/useUrlResolver.ts

@@ -1,26 +1,46 @@
-import {
-  useUrlResolver as urlResolver,
-} from '@vue-storefront/magento';
-import { useRoute, useContext } from '@nuxtjs/composition-api';
+import { useRoute, useContext, ref } from '@nuxtjs/composition-api';
+import { Logger } from '@vue-storefront/core';
+import { Maybe } from '~/composables/types';
+import { UrlResolverQuery } from '~/modules/GraphQL/types';
 
 export const useUrlResolver = () => {
   const route = useRoute();
-  const { error } = useContext();
+  const { error: nuxtError, app } = useContext();
+  const context = app.$vsf;
   const { path } = route.value;
+  const loading = ref(false);
+  const error = ref({
+    search: null,
+  });
 
-  const {
-    search,
-    result,
-    loading,
-  } = urlResolver(`router:${path}`);
+  const search = async (): Promise<Maybe<UrlResolverQuery>> => {
+    loading.value = true;
+    let results = null;
+
+    try {
+      const clearUrl = path.replace(/[a-z]+\/[cp|]\//gi, '');
+      Logger.debug('[Magento] Find information based on URL', { clearUrl });
+      const { data } = await context.$magento.api.urlResolver(clearUrl);
+      results = data.urlResolver;
+
+      if (!results) nuxtError({ statusCode: 404 });
+
+      Logger.debug('[Result]:', { results });
+    } catch (err) {
+      error.value.search = err;
+
+      Logger.error('useUrlResolver/search', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return results;
+  };
 
   return {
     path,
-    search: async () => {
-      await search({ url: path });
-      if (!result?.value) error({ statusCode: 404 });
-    },
-    result,
+    error,
+    search,
     loading,
   };
 };

packages/theme/modules/catalog/pages/default.vue

@@ -437,7 +437,7 @@ export default defineComponent({
     const facets = ref([]);
     const pagination = ref({});
 
-    const { path, result: routeData, search: resolveUrl } = useUrlResolver();
+    const { path, search: resolveUrl } = useUrlResolver();
     const {
       $magento: { config: magentoConfig },
     } = useVSFContext();
@@ -520,23 +520,23 @@ export default defineComponent({
         : addItemToWishlistBase({ product }));
     };
 
-    const searchCategoryProduct = async () => {
+    const searchCategoryProduct = async (categoryId) => {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       await search({
         ...uiHelpers.getFacetsFromURL(),
-        categoryId: routeData.value?.entity_uid,
+        categoryId,
       });
     };
 
     useFetch(async () => {
-      await resolveUrl();
-      const content = await getContentData(routeData.value?.id);
+      const routeData = await resolveUrl();
+      const content = await getContentData(routeData?.id);
 
       cmsContent.value = content?.cmsBlock?.content ?? '';
       isShowCms.value = content.isShowCms;
       isShowProducts.value = content.isShowProducts;
 
-      await searchCategoryProduct();
+      await searchCategoryProduct(routeData?.entity_uid);
       selectedFilters.value = getSelectedFilterValues();
       products.value = facetGetters.getProducts(result.value) ?? [];
       sortBy.value = facetGetters.getSortOptions(result.value);
@@ -560,7 +560,6 @@ export default defineComponent({
     const { getMagentoImage, imageSizes } = useImage();
 
     return {
-      routeData,
       ...productGetters,
       ...uiHelpers,
       ...uiState,