Mutation update() function getting called 4 times for a single mutation

apollo
1

Every time I add a new item in my app, the mutation calls update() four times, for some reason. The first two are optimistic data, and in the second batch, one is optimistic and one is real data from the network. I can’t make any sense of this.

This is my mutation:

mutation CreateTrack($name: String!, $trackNum: Int, $s3Key: String!) {
  createTrack(name: $name, trackNum: $trackNum, s3Key: $s3Key) {
    trackId
    name
    createdAt
    duration
    trackNum
    s3Key
    isProcessing
    didProcessingFail
  }
}

And this is the mutation code:

    createTrack({ name, s3Key }) {
      const newTrack = {
        name,
        s3Key,
      };

      this.$apollo
        .mutate({
          mutation: createTrackMutation,
          variables: newTrack,
          update: (store, { data: { createTrack } }) => {
            console.log('this is dumb', JSON.stringify(createTrack, null, 2));
            const variables = {
              limit: this.pageSize,
              order: this.order === 'ascending' ? 'asc' : 'desc',
              sortBy: this.sortBy,
            };
            const data = store.readQuery({
              query: listTracksQuery,
              variables,
            });
            data.listTracks.items.push(createTrack);
            store.writeQuery({
              query: listTracksQuery,
              variables,
              data,
            });
          },
          optimisticResponse: {
            __typename: 'Mutation',
            createTrack: {
              __typename: 'Track',
              ...newTrack,
              trackId: '??',
              createdAt: new Date().toISOString(),
              isProcessing: true,
              didProcessingFail: false,
              duration: null,
              trackNum: 999,
            },
          },
        })
        .then(data => {
          console.log('done!', data);
        })
        .catch(err => {
          console.log('error', err);
        });
    },

And finally, here are the console logs for calling mutate once:

this is dumb {
  "__typename": "Track",
  "name": "small2.wav",
  "s3Key": "staging/audio/10e3e675-e7a6-41dc-a8fb-686ad683e40e.wav",
  "trackId": "??",
  "createdAt": "2018-03-05T03:30:18.246Z",
  "isProcessing": true,
  "didProcessingFail": false,
  "duration": null,
  "trackNum": 999
}

this is dumb {
  "__typename": "Track",
  "name": "small2.wav",
  "s3Key": "staging/audio/10e3e675-e7a6-41dc-a8fb-686ad683e40e.wav",
  "trackId": "??",
  "createdAt": "2018-03-05T03:30:18.246Z",
  "isProcessing": true,
  "didProcessingFail": false,
  "duration": null,
  "trackNum": 999
}

done! {data: {...}}

this is dumb {
  "__typename": "Track",
  "name": "small2.wav",
  "s3Key": "staging/audio/10e3e675-e7a6-41dc-a8fb-686ad683e40e.wav",
  "trackId": "??",
  "createdAt": "2018-03-05T03:30:18.246Z",
  "isProcessing": true,
  "didProcessingFail": false,
  "duration": null,
  "trackNum": 999
}

this is dumb {
  "trackId": "2b3de8ac-d145-4da6-b522-27e5413d43e1",
  "name": "small2.wav",
  "createdAt": "2018-03-05T03:30:18.627Z",
  "duration": null,
  "trackNum": 999,
  "s3Key": "staging/audio/10e3e675-e7a6-41dc-a8fb-686ad683e40e.wav",
  "isProcessing": true,
  "didProcessingFail": null,
  "__typename": "Track"
}

What am I doing wrong here?