vue2 composition api beforeRouteUpdate updating after the route changes - vuejs2

Question

I have this route:
{
path: "/categories/:categorySlug",
name: "product-list",
meta: {
title: "Categories",
},
},
When the component first loads, it pulls in the category and any products related to it. The problem is when I change the category slug, for some reason the category updates fine, but the products do not.
I decided to add a beforeRouteUpdate to force the products to change and I set it up like this:
export default defineComponent({
name: "ProductList",
components: { Brands, Chooser, Products },
setup() {
const instance = getCurrentInstance();
const searchTerm = computed(() => {
return instance.proxy.$route.params.searchTerm;
});
const {
brands,
brandError,
brandFacets,
brandsLoading,
brandsHasMoreResults,
brandsItemsToShow,
brandsQuery,
brandsTotal,
brandsFetchMore,
} = useSearchBrands(searchTerm, 12, [], true);
const {
category,
categoryError,
categoryLoading,
products,
productError,
productFacets,
productsLoading,
productsHasMoreResults,
productsItemsToShow,
productsQuery,
productsTotal,
productsFetchMore,
} = useListProducts(instance);
return {
brands,
brandError,
brandFacets,
brandsLoading,
brandsHasMoreResults,
brandsItemsToShow,
brandsQuery,
brandsTotal,
category,
categoryError,
categoryLoading,
products,
productError,
productFacets,
productsLoading,
productsHasMoreResults,
productsItemsToShow,
productsQuery,
productsTotal,
brandsFetchMore,
productsFetchMore,
};
},
beforeRouteUpdate(to, from, next) {
console.log(to);
this.productsQuery.refetch();
next();
},
});
At first glance it didn't look like anything happened, because if I changed route it still showed the same products as the first load. But if I change again, I noticed that it now displayed the products from the previous route change:
And if I change route from ovens to coffee-machines it will show the ovens.
I cant use beforeRouteEnter because I don't have access to this and using beforeRouteLeave doesn't update the component at all, even though in my logs, I can see the request is changing.
So, to summarise, when I change route using beforeRouteUpdate I can see in my logs that the request changes to the correct category and I can see the correct products returned, but I don't see the results in the component until I change route again (with the same component).
Does anyone know how I can fix this?
Update
I have been asked to display the code for my product list. I use vue apollo and I have two generic functions, the first is useGraphQuery which looks like this:
import { ref } from "vue-demi";
import { useQuery, useResult } from "#vue/apollo-composable";
export function useGraphQuery(params, gql, pathFn, clientId = "apiClient") {
if (!params?.value)
return {
response: ref(undefined),
loading: ref(false),
error: ref(undefined),
query: ref(undefined),
};
// TODO: figure our a way to skip the call if the parameters are null
const { result, loading, error, query, fetchMore } = useQuery(gql, params, {
clientId,
//enabled: !!params?.value,
});
const response = useResult(result, null, pathFn);
return { response, loading, error, query, fetchMore };
}
All my graphql queries use this.
Then for searches (i.e. the product search), uses another function called useGraphSearch:
import { computed } from "#vue/composition-api";
import { useGraphQuery } from "./graph-query";
export function useGraphSearch(params, gql, pathFn) {
const { response, loading, error, query, fetchMore } = useGraphQuery(
params,
gql,
pathFn
);
const items = computed(() => {
if (!response.value) return [];
return response.value.items;
});
const facets = computed(() => {
if (!response.value) return [];
return response.value.facets;
});
const total = computed(() => {
if (!response.value) return 0;
return response.value.total;
});
const hasMoreResults = computed(() => {
if (!response.value) return false;
return response.value.hasMoreResults;
});
const itemsToShow = computed(() => params.value.search.itemsToShow);
const more = () => {
useGetMore(params.value, fetchMore);
};
return {
error,
facets,
hasMoreResults,
items,
itemsToShow,
loading,
query,
total,
more,
};
}
function useGetMore(params, fetchMore) {
params.search.page++;
fetchMore({
variables: params,
});
}
On the route I mentioned before, there are 3 queries running. One of them seems to work without doing anything. that is the useGetCategory which looks like this:
import { computed } from "#vue/composition-api";
import * as getCategoryBySlug from "#graphql/api/query.category.gql";
import { useGraphQuery } from "./graph-query";
export function useGetCategory(instance) {
const params = computed(() => {
const route = instance.proxy.$route;
const slug = route.params.categorySlug;
if (!slug) return;
return { slug };
});
const { response, error, loading } = useGraphQuery(
params,
getCategoryBySlug,
(data) => data.categoryBySlug
);
return { category: response, categoryError: error, categoryLoading: loading };
}
This updates regardless whether I called beforeRouteUpdate or not.
The second one is the useListProducts which looks like this:
import { ComponentInternalInstance } from "#vue/composition-api";
import { useSearchCategoryProducts } from "#logic/search-products";
import { useTrackProductImpressions } from "#logic/track-product-impressions";
import { useTrackProductClick } from "#/_shared/logic/track-product-click";
export function useListProducts(instance: ComponentInternalInstance) {
const {
products,
productError,
productFacets,
productsLoading,
productsHasMoreResults,
productsItemsToShow,
productsQuery,
productsTotal,
productsFetchMore,
} = useSearchCategoryProducts(instance);
return {
products,
productError,
productFacets,
productsLoading,
productsHasMoreResults,
productsItemsToShow,
productsQuery,
productsTotal,
productsFetchMore,
};
}
as you can see here, this calls useSearchCategoryProducts which is just used to create the parameters and looks like this:
export function useSearchCategoryProducts(
instance: ComponentInternalInstance,
orderBy = [{ key: "InVenue", value: "desc" }]
) {
const params = computed(() => {
const slug = instance.proxy.$route.params.categorySlug;
if (!slug) return;
const filters = createFilters("CategorySlug", [slug]);
const request = createRequest(defaultParameters, 1, filters, orderBy);
return { search: request };
});
return queryProducts(params);
}
function queryProducts(params) {
console.log(params);
const {
error,
facets,
hasMoreResults,
items,
itemsToShow,
loading,
query,
total,
more,
} = useGraphSearch(params, searchProducts, (data) => data.searchProducts);
return {
products: items,
productError: error,
productsLoading: loading,
productFacets: facets,
productsHasMoreResults: hasMoreResults,
productsItemsToShow: itemsToShow,
productsTotal: total,
productsQuery: query,
productsFetchMore: more,
};
}
You can see the console.log in the private function queryProducts which I can see that the params are updating.
I know this is a lot to take in, but I have created the useGraphQuery and useGraphSearch so I can ensure that every query I create is the same and should work in the same way. The reason useGetCategory and useListProducts don't work in the same way (i.e. the category changes when the route does, but the product list doesn't) is beyond me and it is the reason I am trying to implement beforeRouteUpdate at all.
The code for the setup looks like this btw:
import {
computed,
defineComponent,
getCurrentInstance,
} from "#vue/composition-api";
import Brands from "#components/brands/brands.component.vue";
import Chooser from "#components/chooser/chooser.component.vue";
import Products from "#components/products/products.component.vue";
import { useListProducts } from "./list-products";
import { useSearchBrands } from "#logic/search-brands";
import { useGetCategory } from "#logic/get-category";
export default defineComponent({
name: "ProductList",
components: { Brands, Chooser, Products },
setup() {
const instance = getCurrentInstance();
const searchTerm = computed(() => {
return instance.proxy.$route.params.categorySlug;
});
const { category, categoryError, categoryLoading } =
useGetCategory(instance);
const {
brands,
brandError,
brandFacets,
brandsLoading,
brandsHasMoreResults,
brandsItemsToShow,
brandsQuery,
brandsTotal,
brandsFetchMore,
} = useSearchBrands(searchTerm, 12, [], true);
const {
products,
productError,
productFacets,
productsLoading,
productsHasMoreResults,
productsItemsToShow,
productsQuery,
productsTotal,
productsFetchMore,
} = useListProducts(instance);
return {
brands,
brandError,
brandFacets,
brandsLoading,
brandsHasMoreResults,
brandsItemsToShow,
brandsQuery,
brandsTotal,
category,
categoryError,
categoryLoading,
products,
productError,
productFacets,
productsLoading,
productsHasMoreResults,
productsItemsToShow,
productsQuery,
productsTotal,
brandsFetchMore,
productsFetchMore,
};
},
beforeRouteUpdate(to, from, next) {
console.log(to);
this.brandsQuery.refetch();
this.productsQuery.refetch();
next();
},
});

Answer 1

You’re not using to for anything in the route update handler. If your loading code depends on the route it will have the previous information since the event happens before it is updated.
You’ll need to give the information about the to route to the code that is doing the loading, or use an after event.

Answer 2

So I managed to fix this. It was down to my cache policy.
I had been doing this:
const typePolicy = {
keyArgs: ["search", ["page", "skip"]],
// Concatenate the incoming list items with
// the existing list items.
merge(existing: any = {}, incoming: any) {
const items = (existing.items ? existing.items : []).concat(incoming.items);
const item = { ...existing, ...incoming };
item.items = items;
return item;
},
};
const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
searchCategories: typePolicy,
searchBrands: typePolicy,
searchPages: typePolicy,
searchProducts: typePolicy,
},
},
},
});
So that my paginated results were always appended to my current list, but for some reason that was causing an issue. When I swapped to this:
const cache = new InMemoryCache();
My issues were resolved.