Eager way to update query parameters

[plehnen]

What problem is this solving

I am having a hard time to describe the problem I am facing, but I try my best to make it clear.

The following is just one example. Over the past years I had this issue multiple times and had a hard time finding issue and work around it.

Imagine two composables (usePagination and useQueryFilters). Both update the query parameters of the current page. i.e.:

router.replace({
      name: route.name as RouteRecordName,
      params: route.params,
      query: {
        ...route.query,
        page,
        size: rowsPerPage,
      },
    })

There are situations where both do this at the same "tick". Component A is adding "paramA", Component B is adding "paramB". And while B tries to keep everything via ...route.query, data gets lost. Thats because route.query is not yet updated, as the router.replace is async.
Since I am in a complete different component/composable, I cannot await the other router.replace and therefore don't know that my router.replace is basically undoing the other composables changes to the query.

Proposed solution

I wish I could update the query parameters in an eager way.

If somewhere a router.push is being called I want to have access to the resulting route immediately.

Maybe something like const route = useResolvedRoute() which is already reflecting what the route will be after the nextTick.

Describe alternatives you've considered

It doesn't help to make an await nextTick() in the "second" composable, as I would have to perform two await nextTick() in the third one, and it still can happen that the execution happens in the same render cycle.

My current work-around is a "useQueryManager" composable which stores my changes internally and gives me an API to just update the query parameters and takes care of the syncing. It's really ugly and complicated, but works. Still, I would love to have a way to do this with vue-router nativly.

let isInitialized = false
const queryState = ref({})

/**
 * This state manager solves the problem that two `router.replace` calls (e.g. executed in a `watch` in separate `composables`)
 * might overwrite each other, as the current state of `route.query` is only updated after the `router.replace` promise is fulfilled.
 */
export function useQueryManager() {
  const router = useRouter()
  const route = useRoute()

  if (!isInitialized) {
    Object.assign(queryState.value, route.query)
    isInitialized = true

    onBeforeUnmount(() => {
      queryState.value = {}
      isInitialized = false
    })

    watch(
      () => route.query,
      (newQuery) => {
        Object.assign(queryState.value, newQuery)
      },
      { immediate: true }
    )
  }

  const updateQuery = (updates) => {
    Object.keys(updates).forEach((key) => {
      if (updates[key] === undefined || updates[key] === null || updates[key] === '') {
        delete queryState.value[key]
      } else {
        queryState.value[key] = updates[key]
      }
    })

    applyUpdates()
  }

  const applyUpdates = () => router.replace({ query: queryState.value })

  watch(queryState, applyUpdates, { deep: true })

  return { updateQuery }
}

[posva]

use router.resolve(location) to get the resolved route right away. Updating the route goes through navigation guards and can be awaited: await router.push(...)

[plehnen]

No offsense. But I am pretty sure you didn't understand the problem.

const router = useRouter()

const simulateAsyncActionOfComponentA = async () => {
  const a = Math.ceil(Math.random() * 1000)
  console.log('setting "a" to', a)
  await router.push({ query: { a } })
  console.log('new query:', router.currentRoute.value.query)
  console.log('Update in A is done!', router.resolve(location))
}

const simulateAsyncActionOfComponentB = async () => {
  const b = Math.ceil(Math.random() * 1000)
  console.log('setting "b" to', b)
  await router.push({ query: { ...router.currentRoute.value.query, b } })
  console.log('new query:', router.currentRoute.value.query)
  console.log('Update in B is done!', router.resolve(location))
}

const onButtonClick = async () => {
  simulateAsyncActionOfComponentA()
  simulateAsyncActionOfComponentB()
}

If you run this and trigger onButtonClick, you get the following output in the console:

setting "a" to 110
setting "b" to 812
new query: {}
Update in A is done! {fullPath: '/debug/confirm', hash: '', query: {}, name: 'debug.confirm', path: '/debug/confirm', …}
new query: {b: '812'}
Update in B is done! {fullPath: '/debug/confirm', hash: '', query: {}, name: 'debug.confirm', path: '/debug/confirm', …}

but the URL will be ?b=812 (without a!)

That in a nutshell is the problem. "a" gets overwritten in the second component which also does a router.push.

(Background: in one component the first available tab will be selected and also changed in the url. In another component the table filters are restored from the storage and also updated in the url. one wins. overwrites the other. because ...route.query is not up-to-date.)

The router.resolve(location) doesn't even show anything inside "query" at all. Maybe I just don't understand your answer. But right now it feels are are talking about different things. :\

Code-Sandbox link: https://codesandbox.io/p/devbox/empty-rain-xfrf54

[posva]

No offense taken! I was answering mostly to this:

If somewhere a router.push is being called I want to have access to the resulting route immediately.

That in a nutshell is the problem. "a" gets overwritten in the second component which also does a router.push.

So what you want is a reactive query that can be changed multiple times in a single tick and only the last one will prevail?

[plehnen]

I think it would already help to be able to read the current state after the await:

await router.push({ query: { a } })
console.log('new query:', router.currentRoute.value.query)

Right now the query property is NOT showing the new query. Even though I access it after the await.

Non-technically speaking, I just want to be able to "add" query params.
I can't do that right now, because I don't have a way to access the actual query. I just see the "old" data of the last tick. Even after the await push it still reflects the old state. So using ...route.query is not working.
But I am open to other ways to do it. The usecase is that two individual components are adding a query-param to the current URL and are overwriting each other. And this happens only sometimes, which makes this a really ugly bug which is hard to find.

[posva]

The useRouteQuery composable from vueuse should allow that: it buffers changes to query so they are added up