使用 Vue apollo 无限加载失败的查询答案

【问题标题】：Infinite loading on failed query with Vue apollo使用 Vue apollo 无限加载失败的查询
【发布时间】：2020-09-28 08:31:42
【问题描述】：

我正在使用 Quasar 开发一个应用程序，它编译为 Cordova 应用程序，因此我可以在我的手机上运行它。奇怪的是，我只在手机上出现该错误，在控制台中没有错误，并且仅在安装应用程序的第一次加载时出现。

我有一个简单的查询

  apollo: {
    receipts: {
      query: GET_RECEIPTS,
      loadingKey: "loading",
    },
  },

而我的组件数据是：

  loading = 0;

  @Watch("loading")
  emitLoading(val) {
    this.$apollo.mutate({
      mutation: UPDATE_LOADING,
      variables: { loading: !!val }
    });
  }

但问题是当查询无法获取任何内容（数据库中没有数据）时，我会得到无限加载。我应该用阿波罗错误钩子修复吗？如果是，我如何访问挂钩的加载数据？

【问题讨论】：

标签： vue.js cordova quasar-framework quasar vue-apollo

【解决方案1】：

解决方案根本不明显。我需要更改该页面的路由路径（homeManagement）。以前我有：

path: "/",
component: () => import("layouts/main-layout.vue"),
meta: { requiresAuth: true },
children: [
  {
    path: "",
    name: "homeManagement",
    component: () => import("pages/home-management/index.vue")
  }

现在我有了：

path: "/",
component: () => import("layouts/main-layout.vue"),
meta: { requiresAuth: true },
children: [
  {
    path: "home",
    name: "homeManagement",
    component: () => import("pages/home-management/index.vue")
  }

我不明白为什么会这样。顺便说一句，homeManagement 的path: "/" 也给了我加载的问题。

【讨论】：