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 }
}