Skip to content

Instantly share code, notes, and snippets.

@nathanpeck
Last active Jun 11, 2019
Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment