Update query when component is updated from vue-router

[hamanuha]

Hello,

I'm just implementing TanStack-Query into my project and having some issues to solve the following situation:
I use nested routes with vue-router to get something like this url structure and their components:
project/:id => ProjectView
project/:id/dashboard => ProjectDashboardView
project/:id/settings => ProjectSettingsView

If the project id changes, vue-router will use the same component and just update it. So the setup function is not called.
How do I update the query inside and keep the reactivity?
Or do I have to move the LoadingView to every child component (because they are recreated every time) or emit events from the child component to the parent component?

<script setup lang="ts">
...

let { isLoading, isError } = useProject(projectId.value)

onUpdated(() => {
  ??
})
</script>

<template>
  <div v-if="!isLoading && !isError">
    <RouterView :project-id="projectId" />
  </div>

  <div v-if="isLoading">
      Loading...
  </div>
</template>

[hamanuha]

I solved it by using useQueries:

const queries = computed(() => {
  return [
    {
      queryKey: ['project', projectId.value],
      queryFn: () => useFetch<Project>(`/v1/projects/${projectId.value}`),
    },
  ]
})

const projectQueries = useQueries({ queries: queries })

const isLoading = computed(() => projectQueries[0].isLoading)
const isError = computed(() => projectQueries[0].isError)
``

[hamanuha]

Or this is event better. I'm just not sure if it is the right way:

// projectId is a computed ref
const { isLoading, isError } = useProject(projectId)

const useProject = (id: string | Ref<string>) => {
  return useQuery({
    queryKey: computed(() => ['project', unref(id)]),
    queryFn: () => useFetch<Project>(`/v1/projects/${unref(id)}`),
  })
}

[ItMaga]

I think that If projectId is a dynamic param, it would be better to pass always reactive params, such as:

const projectId = ref('ID');
const { isLoading, isError } = useProject(projectId)

and inside useProject

const useProject = (id: Ref<string>) => {
  return useQuery({
    queryKey: ['project', { id }],
    queryFn: () => useFetch<Project>(`/v1/projects/${id.value}`),
  })
}

[jhercog]

I need an elegant solution for this issue too.
If we have a dynamic route as the OP proposed, we could force the rerendering of the component, thereby triggering the setup function, by changing the key of the component like this:

<RouterView v-slot="{ Component, route }">
  <component
    :is="Component" 
    :key="route.params.id"
  />
</RouterView>

However, I am wondering if this is the right approach. No other proposals are working for me because the setup function only gets triggered on the initial load. When I use the returned refetch method in the onUpdated hook, the queryFn triggers but the queryKey remains unchanged, regardless of whether the id element in the key array is reactive or not. Consequently, the query always returns the same object with the same id as it did on the first load.

I would prefer not to rerender the component, as that doesn't seem like the correct approach. Ideally, the refetch method could perhaps take an argument with the updated key, which we could then use in the onUpdated hook.