Update() being called twice on mutation

BUG REPORT

What is the current behavior? My mutation’s update callback is being ran twice, adding it twice to the view. When you refresh the page, the duplicate item is gone. I initally thought it was adding it to local storage twice, but this is not the case. Items get added once to local storage but twice to my component data.

Steps to recreate I’ve been following this guide to create a simple API. I created a simple schema using the default wizard, (called it posts), then exported it to my application. I just added one extra query (that I don’t use right now) and that’s all I did. My code can be found here at line 61

What is the expected behavior? When using a mutation to create a new post, it should only create 1 new item in my UI. However the mutation update() is being called twice. At first I thought this was related to defining an optimistic response, but this behavior still occurs when I comment out that property.

The only “fix” for this I’ve found is by adding disableOffline: true to my AppSync client config. However this is not a great fix since it removes offline capabilities.

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions? Windows 10, Chrome, VueJS. No idea if it worked previously.

[tqhoughton]

Can someone change this back to a bug report instead of a question?

[undefobj]

@tqhoughton ok sounds good. If you want to send me a gist I can look at it.

@xSequential I was actually replying to @tqhoughton who is the original poster on this thread with my comments earlier. To address your questions I looked at your code and one thing I noticed is this line of code:

data: {
  getSkills: getSkills.concat([addedSkill]),
},

This will duplicate data in the cache, you need to filter with something like: https://github.com/awslabs/aws-mobile-appsync-sdk-js/blob/7a3f5cec214ea4a7c64a41c9106967e2e2fad0fc/packages/aws-appsync/src/helpers/offline.ts#L154

Or like this: https://github.com/aws-samples/aws-mobile-appsync-events-starter-react/blob/master/src/Components/NewEvent.js#L116

We really recommend that you use the Offline Helpers if possible because they do all these common cache operations for you. Take a look here: https://github.com/awslabs/aws-mobile-appsync-sdk-js#offline-helpers