TanStack query is not reactive and gives warnings about using useQuery outside setup script

Question

I'm learning TanStack query for Vue3 and found a loot of issues to have that working.

I have simple component:

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>{{ data }}</div>
</template>
<script setup>
import { useQuery } from "@tanstack/vue-query";
import { myEndpoint} from "@/services/API";  
import { watch } from "vue";

const { data, isLoading, error } = useQuery({
  queryKey: ["someKey"],
  queryFn: myEndpoint,
});
console.log(isLoading.value);
watch(
  () => isLoading.value,
  () => console.log("it has changed"),
);
</script>

My myEndpoint method looks like this:

export function myEndpoint() {
  const request = API.getAxiosInstance().bind(API); // bind is required, because of `this` used in class
  const { data } = request("my-state/");
  return {
    property1: data.property_1,
    property2: data.property_2
  };
}

Please note, that above method is synchronous just to check if that makes difference, but it is not.

What I'm trying to achieve here is to simply display data retrieved from endpoint, but my template is keep displaying "Loading..". Additionally, watcher is not triggered. From console, I can see that request has finished and DevTools shows me that TanStack data is stale and populated, but template is not updated. What I'm missing?

Additionally, I keep getting warnings:

vue-query composables like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.

[Vue warn] onScopeDispose() is called when there is no active effect scope to be associated with.

I tried to wrap useQuery under composable, but the same result.

I'm using Vue with version "3.3.8" and TanStack with "5.8.4".

Answer 1

myEndpoint must return a Promise,show your code on codepen if possible

export function myEndpoint() {
  const request = API.getAxiosInstance().bind(API); // bind is required, because of `this` used in class
  const { data } = request("my-state/");
  return new Promise(res=>{
  res({ property1: data.property_1,
      property2: data.property_2
     })
  })

}

Answer 2

I had the same issue. You will not believe the cause!

I had the "vue-query" package installed in the wrong directory

I am not sure why it was imported already if it was not in the same package.json as the root of the vue project, I guess it climbs the file tree looking for the appropriate package. But I digress.

Reinstalling it in the correct directory solved the problem for me.