首页 > 解决方案 > 数据达不到怎么办?

问题描述

index.vue 在这个页面上有一个页面我有以下代码

<nuxt-link :to="'/user/'+userid">Go to user</nuxt-link>

我们去用户到页面user/_id.vue

在此页面上,我正在使用 Graphql 发出请求

export default {
  apollo: {
    user: {
      prefetch: true,
      query: user,
      variables() {
        return {
          id: this.$route.params.id
        }
      }
    }
  },
}
query user($id: Int) {
  user(where: {id: {_eq: $id}}) {
    name
  }
}

如果您单击此页面上的按钮,则返回给我undefined

mounted() {
    console.log(this.users) // return undefined
  },

对不起我的英语我该如何解决?

标签: vue.jsgraphqlnuxt.jsapollo-clientvue-apollo

解决方案


您可以尝试通过 fetch 记录您的数据。

export default {

data(){
    return {
        mydata: [],
        query: ''
    }
},
fetch() {
    console.log(this);
    console.log(this.users);
  },
}

https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/

我确信还有另一种方法可以通过在您的 apollo 模块设置中使用 watchLoading/errorHandler 来记录数据/数据更改,但我无法让它发挥作用 - 所以我正在使用 fetch。

https://github.com/nuxt-community/apollo-module


推荐阅读