订阅-具有AWS AppSync的Vue-Apollo-未处理的GraphQL订阅错误

Question

具有Vue-Apollo article的出色AppSync之后，它仍然无法实现订阅。

我在chrome控制台中看到以下错误：

  

未处理的GraphQL订阅错误TypeError：无法读取属性   未定义的“订阅”       在SubscriptionHandshakeLink.request（subscription-handshake-link.js？419e：161）

我没有采取以下措施：

main.js

---

import AWSAppSyncClient from "aws-appsync";
import VueApollo from "vue-apollo";
import appSyncConfig from "@/assets/AppSync";

const client = new AWSAppSyncClient(
  {
    url: appSyncConfig.graphqlEndpoint,
    region: appSyncConfig.region,
    auth: {
      type: appSyncConfig.authenticationType,
      apiKey: appSyncConfig.apiKey
    }
  },
  {
    defaultOptions: {
      watchQuery: {
        fetchPolicy: "cache-and-network"
      }
    }
  }
);

const appsyncProvider = new VueApollo({
  defaultClient: client
});

window.App = new Vue({
  el: "#app",
  provide: appsyncProvider.provide(),
  render: h => h(App),
});

---

Tasks.vue

---

<script>
import gql from "graphql-tag";
import ListTasks from '@/api/queries/ListTasks'

export default {
  data: () => ({
    taskname: '',
    id: "test",
    tasks: []
  }),

  apollo: {
    tasks: {
      query: () => ListTasks,
      subscribeToMore: {
        document: gql`subscription items($id: String!) {
          onCreateTask(id: $id) {
            id
            completed
          }
        }`,
        // Variables passed to the subscription. Since we're using a function,
        // they are reactive
        variables () {
          return {
            id: this.id,
          }
        }
      },
      update: data => data.listTasks.items
    }
  }
}

</script>