Vue3中TanStack Query无响应及useQuery使用警告问题排查

核心问题：模板一直显示Loading、状态无更新，伴随警告 #

1. 先搞定Vue Query插件注册（最关键） #

Vue3使用@tanstack/vue-query必须先在项目入口（比如main.ts）里注册插件，不然组合式函数没法和Vue的响应式系统绑定，直接导致状态不更新、触发内存泄漏警告：

import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'
import App from './App.vue'

const app = createApp(App)
app.use(VueQueryPlugin)
app.mount('#app')

你的警告信息就是因为没做这一步——useQuery跑在了Vue的effect scope外面，自然没法触发响应式更新，也会提示内存泄漏风险。

2. 修复接口请求的异步逻辑 #

不管同步还是异步写法，useQuery的queryFn必须返回Promise，不然TanStack Query没法识别请求状态。你当前的同步写法直接拿request的data完全错误，axios请求是异步的，同步调用只能拿到未完成的Promise，根本拿不到数据。改成正确的异步写法：

export async function myEndpoint() {
  const request = API.getAxiosInstance().bind(API);
  // 必须用await等待请求完成
  const { data } = await request("my-state/");
  return {
    property1: data.property_1,
    property2: data.property_2
  };
}

哪怕你之前试过异步写法，也要检查有没有加await——缺了await的话，queryFn返回的是嵌套Promise，TanStack Query处理不了状态流转。

3. 验证步骤 #

• 插件注册后，打开TanStack Query DevTools查看someKey对应的状态：请求完成后isLoading会自动变为false，data会填充接口返回值。
• 在myEndpoint里添加console.log(data)，确认接口确实返回了预期的数据结构。

内容的提问来源于stack exchange，提问作者user3648963