apollo: Mutations calling update() twice; not updating store cache

I’m having a ton of issues with Vue Apollo, all surrounding mutations. I’ll try to list as many details as I possibly can, and it’s going to be lengthy, so bear with me.

First, the GraphQL schema stuff, so it’s clear what my data looks like. These are the relevant bits:

type Track {
  trackId: ID!
  name: String!
  key: String
  size: Int
  duration: Int
  createdAt: String!
  isTranscoding: Boolean
  didTranscodingFail: Boolean
  tags: [String]
}

type TrackList {
  items: [Track]
  totalCount: Int!
}

type Query {
  listTracks(userId: ID!, limit: Int, nextToken: String): TrackList
}

type Mutation {
  createTrack(
    userId: ID!
    name: String!
    createdAt: String!
    duration: Int
  ): Track
}

And here is the listTracks query followed by the createTrack mutation:

query ListTracks($userId: ID!, $limit: Int, $nextToken: String) {
  listTracks(userId: $userId, limit: $limit, nextToken: $nextToken) {
    items {
      trackId
      name
      duration
      createdAt
    }
    totalCount
  }
}

mutation CreateTrack(
  $userId: ID!
  $name: String!
  $createdAt: String!
  $duration: Int # this is temporary - we won't know till after transcoding
) {
  createTrack(
    userId: $userId
    name: $name
    createdAt: $createdAt
    duration: $duration
  ) {
    trackId
    name
    createdAt
    duration
  }
}

I’m using AWS AppSync, which, when using pagination queries, returns items (an array of the results) and nextToken which is used to paginate to the next set of results. Hence using TrackList as a result for listTracks.

Now, I have a Vue container component which handles all Apollo logic, and passes results as props to a child component. In the container component, I have the following relevant code:

export default {
  data() {
    return {
      listTracks: {},
      pageSize: 20,
    };
  },

  apollo: {
    listTracks: {
      query: listTracksQuery,
      variables() {
        return {
          limit: this.pageSize,
          userId: this.$store.state.auth.user.username,
        };
      },
    },
  },

The query works perfectly, no problems. I then pass listTracks.items into the child component. I’ve left out the mutation code for now, as it’s a bit of a mess, and I wanted to point out that queries work without issue.

Now onto the mutation, also in the container component:

this.$apollo
  .mutate({
    mutation: createTrackMutation,
    variables: {
      createdAt: new Date().toISOString(),
      duration,
      name,
      userId: this.$store.state.auth.user.username,
    },
    update: (store, { data: { createTrack } }) => {
      const data = store.readQuery({
        query: listTracksQuery,
        variables: {
          limit: this.pageSize,
          userId: this.$store.state.auth.user.username,
        },
      });
      data.listTracks.items.push(createTrack);
      console.log('after pushing new item:', data.listTracks.items);
      store.writeQuery({ query: listTracksQuery, data });
      console.log(
        'checking readQuery:',
        store.readQuery({
          query: listTracksQuery,
          variables: {
            limit: this.pageSize,
            userId: this.$store.state.auth.user.username,
          },
        })
      );
    },
    optimisticResponse: {
      __typename: 'Mutation',
      createTrack: {
        __typename: 'Track',
        trackId: '',
        ...newTrack,
      },
    },
  })
  .then(data => {
    console.log('done!', data);
  })
  .catch(err => {
    console.log('error', err);
  });

Here’s the result of mutating in the web app:

As you can see, a couple things have gone wrong here:

1. update() is called twice.
2. The Apollo cache was not updated properly (it still has only a single item in the items array after performing writeQuery().

I’m guessing this may have something to do with my actual array of results being in an items rather than at root level. I’m not sure.

Any help would be greatly appreciated!