vuejs2 - Vue + Apollo : TypeError: this. getClient(...).watchQuery 不是函数

Question

我正在尝试使用 Vue + Apollo(后端的 Postgraphile GraphQL 服务器)设置一个非常简单的查询。

在我的组件中(在脚本标签中):

import { CURRENT_USER_QUERY } from '../constants/graphql';

export default {
  name: 'User',
  data() {
    return {
      currentUser: undefined,
    };
  },
  apollo: {
    currentUser: CURRENT_USER_QUERY,
  },
};

在 ../contants/graphql我有:

import gql from 'graphql-tag';

export const CURRENT_USER_QUERY = gql`
  query CurrentUserQuery {
    currentUser {
      id
      username
    }
  }
`;

在我的 Graphiql 端点中，上面的查询没有任何问题。

但是，当我在 Vue 中运行它时，我在控制台上收到以下消息:

[Vue warn]: Error in created hook: "TypeError: 
this.getClient(...).watchQuery is not a function"

到处搜索，找不到任何有类似错误的人......

有什么线索吗？我应该从哪里开始看？
谢谢!!

Answer 1

watchQuery正在返回一个可观察的而不是一个 promise 。见 Apollo docs for ApolloClient.watchQuery 或(假设您使用的是 vue-apollo )the actual code .

这意味着您需要 subscribe到 watchQuery (就像你对 observable 所做的那样)，而不是做 then (就像你对 promise 所做的那样)——像这样:

apolloClient.watchQuery({
  query: yourQuery,
  variables: yourVariables
}).subscribe({
  next: (body) => {
    console.log('success', body)
    commit(MY_ACTION, body)
  },
  error: (error, done) => {
    console.error(error)
  }
})