使用Vue Apollo无限加载失败的查询 [英] Infinite loading on failed query with Vue apollo

问题描述

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

I'm developing an app with Quasar, it compiles to Cordova app so I can run it on my phone. The weird thing is that I have that error only on my phone, without errors in console and only on the first load when app was installed.

我有一个简单的查询

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

，而我的组件数据为：

  loading = 0;

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

但是，当查询无法获取任何内容（DB中没有数据）时，我得到了无限加载。我应该用阿波罗错误钩解决吗？如果可以，我如何访问该挂钩的加载数据？

But the thing is when query cannot fetch anything (no data in DB), I get infinite loading. Should I fix with apollo error hook? And if yes how do I access loading data for the hook?

推荐答案

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

The solution wasn't obvious at all. I needed to change my route path for that page (homeManagement). Previously I had:

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")
  }

我没想到知道为什么。 btw path： / for homeManagement也给我带来了加载问题。

I didn't figured out why is that. And btw path: "/" for homeManagement also gives me that issue with loading.

这篇关于使用Vue Apollo无限加载失败的查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！