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

Question

遵循带有 Vue-Apollo 的出色 AppSync文章，但是它没有实现订阅。

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

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

我做了以下无济于事：

主文件

---

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),
});

---

任务.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>