title: Subscriptions - Vue-Apollo with AWS AppSync - Unhandled GraphQL subscription error
body: <p>Following a great AppSync w/ Vue-Apollo <a href="https://hackernoon.com/full-stack-vue-with-graphql-aws-appsync-adc5af474dc9" rel="noreferrer">article</a> however it stops short of implementing subscriptions.</p>
  
  <p>I see the following error in the chrome console:</p>
  
  <blockquote>
    <p>Unhandled GraphQL subscription error TypeError: Cannot read property
    'subscription' of undefined
        at SubscriptionHandshakeLink.request (subscription-handshake-link.js?419e:161)</p>
  </blockquote>
  
  <p>I have done the following to no avail:</p>
  
  <h2>main.js</h2>
  
  <hr>
  
  <pre><code>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 =&gt; h(App),
  });
  </code></pre>
  
  <hr>
  
  <h2>Tasks.vue</h2>
  
  <hr>
  
  <pre><code>&lt;script&gt;
  import gql from "graphql-tag";
  import ListTasks from '@/api/queries/ListTasks'
  
  export default {
    data: () =&gt; ({
      taskname: '',
      id: "test",
      tasks: []
    }),
  
    apollo: {
      tasks: {
        query: () =&gt; 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 =&gt; data.listTasks.items
      }
    }
  }
  
  &lt;/script&gt;
  </code></pre>