Vue3+Composition API使用vue-query返回ObjectRefImpl及isLoading报错问题

核心错误原因 #

• useQuery被错误放置在onMounted回调中，只有setup函数顶层返回的变量才会暴露给组件模板使用，回调内部的return不会被模板识别，因此出现isLoading未定义的报错
• 自定义的fetcher函数没有返回请求结果，导致vue-query无法拿到接口返回的数据
• Todo.vue中缺少useQuery的导入语句

关于ObjectRefImpl的说明 #

vue-query返回的data、isLoading等变量本身就是ref类型的响应式对象，打印时显示ObjectRefImpl属于正常现象：

• 模板中直接写变量名即可，会自动解包ref
• 若在script逻辑中读取值，需要加.value，例如console.log(data.value)

修复后的Todo.vue代码 #

import { useQuery } from 'vue-query'

export default {
  setup() {
    const fetcher = async () => {
      // 此处添加return返回请求结果
      return fetch('https://jsonplaceholder.typicode.com/todos').then(response =>
        response.json()
      );
    };
    // 将useQuery提到setup顶层调用，无需放在onMounted中，vue-query会自动处理请求时机
    const {data, isError, error, isLoading} = useQuery('todos', fetcher);
    console.log(data.value);
    // 直接在setup顶层返回变量给模板
    return {isLoading, isError, data, error};
  }
};

其他文件校验 #

现有App.vue、main.js的配置符合vue-query v1版本的使用要求，无需修改。

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