Vue js amplify error while deleting GraphQL data (error type: MappingTemplate)

Question

Hi, I got an error when I created CRUD App using vue.js and AWS Amplify. Create and Read data working correctly, but when I try to delete data, it gets an error:

```
{
    "data": {
        "deleteSheetAsset": null
    },
    "errors": [
        {
            "path": [
                "deleteSheetAsset"
            ],
            "data": null,
            "errorType": "MappingTemplate",
            "errorInfo": null,
            "locations": [
                {
                    "line": 2,
                    "column": 3,
                    "sourceName": null
                }
            ],
            "message": "Value for field '$[_version]' must be a number."
        }
    ]
}
```

This is the delete code.

```
async deleteSheet(idSht) {
      if (idSht) {
        try {
          const { id } = idSht;
          await API.graphql(graphqlOperation(mutations.deleteSheetAsset, { input: { id } }));
        } catch (error) {
          console.log('Error deleting sheet', error);
        }
      }
      // testing
      const { id } = idSht;
      console.log(id); // output = 1d74437c-dd93-48bc-9317-450473276ca1
      console.log({ id }); // output = { "id": "1d74437c-dd93-48bc-9317-450473276ca1" }
    },
```

It's have been a week trying to find the answer, googling, and follow some tutorials, this error is still not fixed. Thanks.

Answer

Take a look here:

https://docs.aws.amazon.com/appsync/latest/devguide/conflict-detection-and-sync.html

> Versioned Data Source Metadata
AWS AppSync manages metadata fields on Versioned data sources on your behalf. Modifying these fields yourself may cause errors in your application or data loss. These fields include:

> _version
- A monotonically increasing counter that is updated any time that a change occurs to an item.

> _lastChangedAt
- A numeric value that stores the timestamp, in epoch milliseconds, when an item was last modified.

> _deleted
 - A Boolean “tombstone” value that indicates that an item has been deleted. This can be used by applications to evict deleted items from local data stores.

> _ttl
- A numeric value that stores the timestamp, in epoch seconds, when an item should be removed from the underlying data source.

> ds_pk
- A string value that is used as the partition key for Delta tables.

> ds_sk
 - A string value that is used as the sort key for Delta tables.

> These metadata fields will impact the overall size of items in the underlying data source. AWS AppSync recommends reserving 500 bytes + Max Primary Key Size of storage for versioned data source metadata when designing your application. **To use this metadata in client applications, include the _version, _lastChangedAt, and _deleted fields on your GraphQL types and in the selection set for mutations.**

Based on your code above, you are not providing a version in order to take advantage of conflict detection. You probably want to keep track of the version of the item as well and pass it into this method in addition to the ```idSht``` parameter. Further down the page in the link above there are examples.

Hope this helps.

Vue js amplify error while deleting GraphQL data (error type: MappingTemplate)

관련 콘텐츠