[QUESTION] [VUE] Shared Query

[hamonCordova]

Hi! Someone know if there is a way to create a reusable useQuery?

I have two components, they share the same server side state (response/data from the useQuery) and the refetch method. But i'm using composable to achive this.There is a way to do it using the Vue Query/TanStack API?
I know abou getQuery but i need to watch the data changes isntead of just getting it.

What i'm currently doing (on Nuxt 3, composable)

interface IUseHome {
   activeRouteId: string
}

export default function () {
const state = useState('home', () => {
  return {
   activeRouteId: ''
  } as IUseHome
});
  const homeDataQuery = useQuery<HomePageData>({
  queryKey: ['mainHomeData'] as const,
  queryFn: () => {return new MyService().getHomePageData(state.value.activeRouteId)},
  enabled: false,
})

const setActiveRouteId = (id: string) => {
   state.value.activeRouteId = id;
}

return {
  state,
  homeDataQuery,
  setActiveRouteId
 }
}

Then I use like this on my components like this

const homeState = useHome();

// Used on HTML

const homePageData = computed(() => {
return homeState.homeDataQuery.data.value;
})

const onSomenthing = () => {

homeState.homeDataQuery.refetch();

}

There is a better whay to achive a reusable useQuery?
Thanks!

[Mini-ghost]

Does this example work well? I haven't tried it, but I'd love to hear your thoughts after using it.

Basically, useQuery utilizes the observer pattern to ensure that the same status is obtained when queryKey is the same. Therefore, we generally do not need to do anything special to achieve data sharing.

[hamonCordova]

Yeah, it works, but to me it's dosen't shows clean. I decided to improve the composable just wrapping it in a external (in another file) exported function that recives a Ref to be used as request param inside the useQuery -> queryFn. Then i just return the function and use it really in a simples way. I can put the code here if you want.

I tried to use a combination of query observer and client refetching, but i was thinking the code dosent get clean enough, and i cant be shure if there is an instance of the query key that i'm looking for (to me it's the major problem, in my case)

Sorry for the english.

[Mini-ghost]

I'd be delighted to discuss your solution further, and if you're willing to share it, that would be wonderful 💚

Additionally, if you're looking for a more concise way to write it, you might want to try VueUse's createSharedComposable like this:

const useSharedQuery = createSharedComposable(() => useQuery(options))

Just a suggestion for your consideration. I hope it helps you.

Here's the documentation for your reference: createsharedcomposable

[hamonCordova]

Thank you so much for your willingness to discuss solutions. You have a good idea, using the createShareComposable.

This what i've done

export function useHomeQuery(activeRouteId: Ref<string>) {
    const queryClient = useQueryClient()
    return useQuery<HomePageData>({
        queryKey: ['mainHomeData'],
        queryFn: () => {return new HomeService().getHomePageData(activeRouteId.value)},
        initialData: () => queryClient.getQueryData(['mainHomeData']) as any,
        placeholderData: keepPreviousData,
        enabled: false
    })
}

Then i can manully call refetch and the data will be updated anywere this composable is used.

[hamonCordova]

Can you help to know how can i use a type for the data? For example, there is a computed property that access homeQuery.data.value but on my IDE (latest version of WebStorm) it does't indentify a type, so a must use homeQuery.data.value as HomePageData

Example:

const id = ref<string>('');
const homeQuery = useHomeQuery(id)

const homePageData = computed(() => {
  return homeQuery.data.value as HomePageData
})

[Mini-ghost]

If you can provide a reproduction of the issue, the method to solve it may become clearer.

[DamianOsipiuk]

You are potentially looking for https://tanstack.com/query/latest/docs/framework/react/guides/query-options which is also available in vue.

Every query that has the same queryKey will be updated together and have access to the same data