fix: use route in middleware (#962)

Co-authored-by: cristian sandru <cristian.sandru@plentysystems.com>
plentymarkets · Jan 16, 2025 · 233ce02 · 233ce02
1 parent e91cd86
commit 233ce02
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 13 deletions.
diff --git a/apps/web/components/CategoryFilters/Filter.vue b/apps/web/components/CategoryFilters/Filter.vue
@@ -110,7 +110,6 @@ import {
 import type { FilterProps } from '~/components/CategoryFilters/types';
 import type { Filters } from '~/composables';
 
-const route = useRoute();
 const { getFacetsFromURL, updateFilters, updatePrices } = useCategoryFilter();
 const open = ref(true);
 const props = defineProps<FilterProps>();
@@ -148,7 +147,7 @@ const facetChange = () => updateFilters(models.value);
 updateFilter();
 
 watch(
-  () => route.query,
+  () => useNuxtApp().$router.currentRoute.value.query,
   async () => {
     updateFilter();
 

diff --git a/apps/web/components/CategorySorting/CategorySorting.vue b/apps/web/components/CategorySorting/CategorySorting.vue
@@ -16,11 +16,9 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from 'nuxt/app';
 import { SfSelect } from '@storefront-ui/vue';
 
 const { getFacetsFromURL, updateSorting } = useCategoryFilter();
-const route = useRoute();
 const options = ref([
   {
     label: 'nameA-Z',
@@ -61,7 +59,7 @@ function sortQueryChanged() {
 sortQueryChanged();
 
 watch(
-  () => route.query.sort,
+  () => useNuxtApp().$router.currentRoute.value.query.sort,
   () => {
     sortQueryChanged();
   },

diff --git a/apps/web/components/TextContent/TextContent.vue b/apps/web/components/TextContent/TextContent.vue
@@ -17,7 +17,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from 'vue';
 import type { TextContentProps } from '~/components/TextContent/types';
 
 const props = defineProps<TextContentProps>();

diff --git a/apps/web/composables/useCanonical/useCanonical.ts b/apps/web/composables/useCanonical/useCanonical.ts
@@ -62,7 +62,7 @@ export const useCanonical: UseCanonicalReturn = () => {
   const setStaticPageMeta: StaticPageMeta = () => {
     state.value.loading = true;
 
-    const route = useRoute();
+    const route = useNuxtApp().$router.currentRoute.value;
     const runtimeConfig = useRuntimeConfig();
     const localePath = useLocalePath();
     const { locales, defaultLocale } = useI18n();
@@ -100,9 +100,9 @@ export const useCanonical: UseCanonicalReturn = () => {
    */
   const setCategoriesPageMeta: CategoriesPageMeta = (productsCatalog: Facet, facetsFromUrl: FacetSearchCriteria) => {
     state.value.loading = true;
-    const route = useRoute();
+    const { $i18n, $router } = useNuxtApp();
+    const route = $router.currentRoute.value;
     const localePath = useLocalePath();
-    const { $i18n } = useNuxtApp();
     const runtimeConfig = useRuntimeConfig();
 
     const canonicalLink = `${runtimeConfig.public.domain}${localePath(route.fullPath, $i18n.locale.value)}`;

diff --git a/apps/web/composables/useCategoryFilter/useCategoryFilter.ts b/apps/web/composables/useCategoryFilter/useCategoryFilter.ts
@@ -43,7 +43,7 @@ const mergeFilters = (oldFilters: Filters, filters: Filters): Filters => {
  * ```
  */
 export const useCategoryFilter = (to?: RouteLocationNormalizedGeneric): UseCategoryFiltersResponse => {
-  const route = to ?? useRoute();
+  const route = to ?? useNuxtApp().$router.currentRoute.value;
 
   /**
    * @description Function for getting facets from url.

diff --git a/apps/web/sdk.client.ts b/apps/web/sdk.client.ts
@@ -8,10 +8,10 @@ const createHttpClient = () => {
 
   if (tryUseNuxtApp()) {
     const { token } = useCsrfToken();
-    const { $i18n } = useNuxtApp();
+    const { $i18n, $router } = useNuxtApp();
     const runtimeConfig = useRuntimeConfig();
-    const referrerId = useRoute().query?.ReferrerID?.toString() ?? '';
-    const noCache = runtimeConfig.public.noCache || useRoute().query?.noCache?.toString() || '';
+    const referrerId = $router.currentRoute.value.query?.ReferrerID?.toString() ?? '';
+    const noCache = runtimeConfig.public.noCache || $router.currentRoute.value.query?.noCache?.toString() || '';
     const configId = runtimeConfig.public.configId;
     const pwaHashCookie = useCookie('pwa');
 

diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
@@ -32,6 +32,7 @@
 - Saving button is now disabled if there are no changes made to the JSON or if the JSON is invalid.
 - The homepage now has the new version of the carousel
 - Fixed product accordions arrow display.
+- Fixed an issue where calling useRoute within middleware could lead to misleading results.
 
 ## v1.8.0 (2024-12-13) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.7.0...v1.8.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>