Tasks.vue

<template>
  <div class="hello">
    <h1>Tasks</h1>
    <div class="task-list" v-if="tasks">
      <div v-for="task in tasks.items" v-bind:key='task.id'>
        {{ task.clusterArn }} <br />
        {{ task.id }} <br /><br />
        {{ task.lastStatus }} <br /><br />
        {{ task.desiredStatus }} <br /><br />
      </div>
    </div>
  </div>
</template>

<script>
import gql from 'graphql-tag'
import _ from 'lodash'

// Little customizer that merges arrays
function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    return objValue.concat(srcValue);
  }
}

const ListTasks = gql`
  query ListTasks {
    tasks {
      items {
        id,
        clusterArn,
        lastStatus,
        desiredStatus,
        createdAt,
        connectivityAt,
        pullStartedAt,
        startedAt,
        stoppingAt,
        pullStoppedAt,
        stoppedReason,
        updatedAt,
        exitCode
      },
      nextToken
    }
  }
`

const SubscribeToTaskUpdates = gql`
  subscription TaskUpdate {
    task {
      id
      clusterArn
      lastStatus
      desiredStatus
      createdAt
      connectivityAt
      pullStartedAt
      startedAt
      stoppingAt
      pullStoppedAt
      stoppedReason
      updatedAt
      exitCode
    }
  }
`
export default {
  name: 'Tasks',
  data () {
    return {
      tasks: []
    }
  },
  apollo: {
    tasks: {
      query: ListTasks,
      subscribeToMore: {
        document: SubscribeToTaskUpdates,
        updateQuery: (previousResult, { subscriptionData }) => {
          // Check to see if the task already exists. If so just modify it
          for (var task of previousResult.tasks.items) {
            if (task.id == subscriptionData.data.task.id) {
              task = subscriptionData.data.task;
              return previousResult;
            }
          }

          // This is a new task so we need to add it.
          var returnData = _.mergeWith(previousResult, {
            tasks: {
              items: [subscriptionData.data.task]
            }
          }, customizer);

          return returnData;
        }
      }
    }
  }
}
</script>