refactor: m2-528. refactored useUrlResolver to use the route query

Author: Marcin Kwiatkowski

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

@@ -60,5 +60,6 @@ export { default as updateCustomerAddress } from './updateCustomerAddress';
 export { default as updateCustomerEmail } from './updateCustomerEmail';
 export { default as upsellProduct } from './upsellProduct';
 export { default as urlResolver } from './urlResolver';
+export { default as route } from './route';
 export { default as wishlist } from './wishlist';
 export { default as wishlistItemsCount } from './wishlistItemsCount';

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

@@ -0,0 +1,34 @@
+import type { ApolloQueryResult } from '@apollo/client/core';
+import type { CustomQuery } from '@vue-storefront/core';
+import type { QueryRouteArgs, RoutableInterface } from '../../types/GraphQL';
+import routeQuery from './route';
+import type { Context } from '../../types/context';
+
+export type RouteQuery<ROUTE_TYPE> = {
+  route: ROUTE_TYPE
+};
+
+/**
+ * Returns the canonical URL for a specified product, category, or CMS page
+ *
+ * @param context VSF Context
+ * @param url the URL to be resolved
+ * @param [customQuery] (optional) - custom GraphQL query that extends the default one
+ */
+export default async function route<ROUTE_TYPE extends RoutableInterface>(
+  context: Context,
+  url: string,
+  customQuery: CustomQuery = { route: 'route' },
+): Promise<ApolloQueryResult<RouteQuery<ROUTE_TYPE>>> {
+  const { route: routeGQL } = context.extendQuery(customQuery, {
+    route: {
+      query: routeQuery,
+      variables: { url },
+    },
+  });
+
+  return context.client.query<RouteQuery<ROUTE_TYPE>, QueryRouteArgs>({
+    query: routeGQL.query,
+    variables: routeGQL.variables,
+  });
+}

packages/api-client/src/api/route/route.ts

@@ -0,0 +1,16 @@
+import gql from 'graphql-tag';
+
+/** GraphQL Query that fetches the resolver for received URL. */
+export default gql`
+  query route($url: String!) {
+    route(url: $url) {
+      relative_url
+      redirect_code
+      type
+      ... on CategoryTree {
+        uid
+        id
+      }
+    }
+  }
+`;

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

@@ -10,6 +10,7 @@ import type { Context } from '../../types/context';
  * @param context VSF Context
  * @param url the URL to be resolved
  * @param [customQuery] (optional) - custom GraphQL query that extends the default one
+ * @deprecated - use route instead
  */
 export default async function urlResolver(
   context: Context,

packages/api-client/src/types/API.ts

@@ -112,6 +112,7 @@ import {
 import { SetPaymentMethodOnCartInputs } from '../api/setPaymentMethodOnCart';
 import { CustomerProductReviewParams } from '../api/customerProductReview';
 import { AddProductsToCartInput } from '../api/addProductsToCart';
+import type { RouteQuery } from '../api/route';
 
 export interface Product extends ProductInterface, ConfigurableProduct, Omit<BundleProduct, 'items'>, Omit<GroupedProduct, 'items'>, Omit<DownloadableProduct, 'items'>, Omit<VirtualProduct, 'items'> {
 }
@@ -440,6 +441,11 @@ export interface MagentoApiMethods {
     customQuery?: CustomQuery
   ): Promise<ApolloQueryResult<UrlResolverQuery>>;
 
+  route<ROUTE_TYPE>(
+    url: string,
+    customQuery?: CustomQuery
+  ): Promise<ApolloQueryResult<RouteQuery<ROUTE_TYPE>>>;
+
   wishlist(
     searchParams: WishlistQueryVariables,
     customQuery?: CustomQuery,

packages/theme/composables/useUrlResolver/UseUrlResolver.ts

@@ -1,5 +1,5 @@
 import type { DeepReadonly, Ref } from '@nuxtjs/composition-api';
-import type { EntityUrl } from '~/modules/GraphQL/types';
+import { RoutableInterface } from '@vue-storefront/magento-api';
 
 /**
  * Errors that occured in the {@link UseUrlResolverErrors|UseUrlResolverErrors()} composable
@@ -12,9 +12,14 @@ export interface UseUrlResolverErrors {
 }
 
 /**
- * Data and methods returned from the {@link useUrlResolver|useUrlResolver()} composable
+ * Data and methods returned from the {@link useUrlResolver|useUrlResolver()} composable.
+ *
+ * @remarks
+ *
+ * `ROUTE_TYPE` is a generic type and can be one of: `CategoryTree`, `CmsPage`, `VirtualProduct`, `SimpleProduct`,
+ * `DownloadableProduct`, `BundleProduct`, `GroupedProduct` or `ConfigurableProduct`
  */
-export interface UseUrlResolverInterface {
+export interface UseUrlResolverInterface<ROUTE_TYPE extends RoutableInterface> {
   /**
    * The current route path
    */
@@ -33,5 +38,5 @@ export interface UseUrlResolverInterface {
   /**
    * Searches the resolver for current route URL
    */
-  search(): Promise<EntityUrl | {}>;
+  search(): Promise<ROUTE_TYPE>;
 }

packages/theme/composables/useUrlResolver/index.ts

@@ -4,17 +4,17 @@ import {
   useRoute,
   useContext,
 } from '@nuxtjs/composition-api';
+import type { RoutableInterface } from '@vue-storefront/magento-api';
 import { Logger } from '~/helpers/logger';
-import type { EntityUrl } from '~/modules/GraphQL/types';
-import type { UseUrlResolverErrors, UseUrlResolverInterface } from './UseUrlResolver';
+import type { UseUrlResolverErrors, UseUrlResolverInterface } from '~/composables';
 
 /**
  * Allows searching the resolver for current
  * route path (URL).
  *
  * See the {@link UseUrlResolverInterface} for a list of methods and values available in this composable.
  */
-export function useUrlResolver(): UseUrlResolverInterface {
+export function useUrlResolver<ROUTE_TYPE extends RoutableInterface>(): UseUrlResolverInterface<ROUTE_TYPE> {
   const route = useRoute();
   const { error: nuxtError, app } = useContext();
   const context = app.$vsf;
@@ -24,15 +24,16 @@ export function useUrlResolver(): UseUrlResolverInterface {
     search: null,
   });
 
-  const search = async (): Promise<EntityUrl | {}> => {
+  const search = async (): Promise<ROUTE_TYPE> => {
     loading.value = true;
-    let results: EntityUrl = {};
+    let results: ROUTE_TYPE | null = 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;
+      const { data } = await context.$magento.api.route(clearUrl);
+      // @ts-ignore
+      results = data.route;
 
       if (!results) nuxtError({ statusCode: 404 });
 

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

@@ -111,6 +111,7 @@ import {
   defineComponent, onMounted, ref, ssrRef, useFetch,
 } from '@nuxtjs/composition-api';
 import { CacheTagPrefix, useCache } from '@vue-storefront/cache';
+import type { CategoryTree } from '~/modules/GraphQL/types';
 import { facetGetters } from '~/getters';
 import {
   useFacet,
@@ -125,7 +126,6 @@ import { useAddToCart } from '~/helpers/cart/addToCart';
 import { useCategoryContent } from '~/modules/catalog/category/components/cms/useCategoryContent';
 import { usePrice } from '~/modules/catalog/pricing/usePrice';
 import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar.vue';
-import type { EntityUrl } from '~/modules/GraphQL/types';
 import { useTraverseCategory } from '~/modules/catalog/category/helpers/useTraverseCategory';
 import CategoryBreadcrumbs from '~/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue';
 
@@ -158,7 +158,7 @@ export default defineComponent({
 
     const productContainerElement = ref<HTMLElement | null>(null);
 
-    const { search: resolveUrl } = useUrlResolver();
+    const { search: resolveUrl } = useUrlResolver<CategoryTree>();
     const {
       toggleFilterSidebar,
       changeToCategoryListView,
@@ -190,13 +190,13 @@ export default defineComponent({
 
     const { activeCategory } = useTraverseCategory();
     const activeCategoryName = computed(() => activeCategory.value?.name ?? '');
-    const routeData = ref<EntityUrl>({});
+    const routeData = ref<CategoryTree | null>(null);
 
     const { fetch } = useFetch(async () => {
       routeData.value = await resolveUrl();
 
       const [content] = await Promise.all([
-        getContentData(routeData.value?.entity_uid),
+        getContentData(routeData.value?.uid),
         searchCategoryProduct(routeData.value?.id),
       ]);