Replacing the query causing NavigationDuplicated error in Vue-router - vue.js

Question

I need to remove the value from arrayed query parameter. Suppose, when query is
{
item_ids: [ "12", "13" ],
other_param: [ "alpha", "bravo" ]
}
my function removeElementFromArrayedQueryParameter('item_ids', 13) must turn query to:
{
item_ids: [ "12" ],
other_param: [ "alpha", "bravo" ]
}
Implementation (TypeScript):
function removeElementFromArrayedQueryParameter(key: string, value: string): void {
/** 〔Theory〕 Preventing 'NavigationDuplicated: Navigating to current location ("/〇〇") is not allowed' */
if (isEmptyObject(RoutingHelper.router.currentRoute.query)) {
return;
}
if (!Array.isArray(RoutingHelper.router.currentRoute.query[key])) {
return;
}
const updatedQuery: QueryParameters = {
...RoutingHelper.router.currentRoute.query as object
};
removeSingleElementFromArrayByPredicateMutably(
updatedQuery[key] as Array<string>, (arrayElement: string): boolean => arrayElement === value
);
console.log(JSON.stringify(updatedQuery, null, 2)); // I checked: the element has been romoved
// it's the router instance created by new VueRouter({})
RoutingHelper.router.push({
query: updatedQuery
})
.catch((error: Error): void => {
console.error(error)
});
}
function isEmptyObject(potentialObject: unknown): potentialObject is object {
if (typeof potentialObject !== "object" || potentialObject === null) {
return false;
}
return Object.entries(potentialObject as {[key: string]: unknown}).length === 0;
}
Although the removing of target element from updatedQuery successful (checked by manual testing), I have console error:
{
"_name": "NavigationDuplicated",
"name": "NavigationDuplicated",
"message": "Navigating to current location (\"/page?item_ids=12\") is not allowed"
}
"message" in console error contains right target location, but actually one of item_ids has not been removed from URI.
The console error is right about route name is same, but I don't going to redirect on same page: I just want to remove one query parameter. router.push casts similar error.
Update
Please note that TypeScript does not allow to write as
this.$router.replace({
...this.$router.currentRoute,
query
});
TS2769: No overload matches this call.
Overload 1 of 2, '(location: RawLocation): Promise<Route>', gave the following error.
Argument of type '{ query: Dictionary<string | (string | null)[] | null | undefined>; path: string; name?: string |
null | undefined; hash: string; params: Dictionary<string>; fullPath: string; matched: RouteRecord[]; redirectedFrom?: s
tring | undefined; meta?: any; }' is not assignable to parameter of type 'RawLocation'.
Type '{ query: Dictionary<string | (string | null)[] | null | undefined>; path: string; name?: string | null | und
efined; hash: string; params: Dictionary<string>; fullPath: string; matched: RouteRecord[]; redirectedFrom?: string | un
defined; meta?: any; }' is not assignable to type 'Location'.
Types of property 'name' are incompatible.
Type 'string | null | undefined' is not assignable to type 'string | undefined'.
Type 'null' is not assignable to type 'string | undefined'.
Overload 2 of 2, '(location: RawLocation, onComplete?: Function | undefined, onAbort?: ErrorHandler | undefined): void
', gave the following error.
Argument of type '{ query: Dictionary<string | (string | null)[] | null | undefined>; path: string; name?: string |
null | undefined; hash: string; params: Dictionary<string>; fullPath: string; matched: RouteRecord[]; redirectedFrom?: s
tring | undefined; meta?: any; }' is not assignable to parameter of type 'RawLocation'.
Type '{ query: Dictionary<string | (string | null)[] | null | undefined>; path: string; name?: string | null | und
efined; hash: string; params: Dictionary<string>; fullPath: string; matched: RouteRecord[]; redirectedFrom?: string | un
defined; meta?: any; }' is not assignable to type 'Location'.
Types of property 'name' are incompatible.
Type 'string | null | undefined' is not assignable to type 'string | undefined'.
Type 'null' is not assignable to type 'string | undefined'.
If the are no mistake in TypeScript types, above solution is not safe.
this.$router.replace({
...this.$router.name === null ? {} : RoutingHelper.router.currentRoute,
query: updatedQuery
})
does not fix it.

Answer 1

You should update your new route like this
function removeFromQuery(route, queryName, queryValue)
{
const query = Object.assign({}, route.query);
if (queryName in query)
{
const idx = query[queryName].indexOf(queryValue);
if (idx !== -1)
{
query[queryName].splice(idx, 1);
this.$router.replace({
...this.$router.currentRoute,
query
});
}
}
}

Answer 2

The updatedQuery query is not the deep clone of RoutingHelper.router.currentRoute.query. Below code is not enough to create the deep copy of query:
const updatedQuery: QueryParameters = {
...RoutingHelper.router.currentRoute.query as object
};
So, when execute
RoutingHelper.router.push({
query: updatedQuery
})
we don't subtitute query to new value. That why error occurs.
Use lodash or other libraries provides deep cloning, or use own implementation of deep cloning.