AWS Graphql API mutation does not update DataStore

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Categories

api

Environment information

npx: installed 1 in 1.265s

  System:
    OS: macOS 12.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 352.27 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.1/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Edge: 107.0.1418.42
    Firefox: 99.0.1
    Safari: 16.0
    Safari Technology Preview: 16.4
  npmPackages:
    @aws-amplify/datastore: ^3.14.4 => 3.14.4 
    @aws-amplify/ui-react: ^3.6.0 => 3.6.0 
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-amplify/ui-react-legacy:  undefined ()
    @fortawesome/fontawesome-free: ^6.2.0 => 6.2.0 
    @reduxjs/toolkit: ^1.9.0 => 1.9.0 
    @reduxjs/toolkit-query:  1.0.0 
    @reduxjs/toolkit-query-react:  1.0.0 
    @testing-library/jest-dom: ^5.16.5 => 5.16.5 
    @testing-library/react: ^13.4.0 => 13.4.0 
    @testing-library/user-event: ^13.5.0 => 13.5.0 
    @types/jest: ^27.5.2 => 27.5.2 
    @types/node: ^16.18.3 => 16.18.3 
    @types/react: ^18.0.24 => 18.0.24 
    @types/react-dom: ^18.0.8 => 18.0.8 
    aws-amplify: ^4.3.43 => 4.3.43 
    bootstrap: ^5.2.2 => 5.2.2 
    i18next: ^22.0.4 => 22.0.4 
    i18next-browser-languagedetector: ^7.0.1 => 7.0.1 
    i18next-http-backend: ^2.0.1 => 2.0.1 
    react: ^18.2.0 => 18.2.0 
    react-bootstrap: ^2.6.0 => 2.6.0 
    react-bootstrap/AbstractModalHeader:  undefined ()
    react-bootstrap/Accordion:  undefined ()
    react-bootstrap/AccordionBody:  undefined ()
    react-bootstrap/AccordionButton:  undefined ()
    react-bootstrap/AccordionCollapse:  undefined ()
    react-bootstrap/AccordionContext:  undefined ()
    react-bootstrap/AccordionHeader:  undefined ()
    react-bootstrap/AccordionItem:  undefined ()
    react-bootstrap/AccordionItemContext:  undefined ()
    react-bootstrap/Alert:  undefined ()
    react-bootstrap/Anchor:  undefined ()
    react-bootstrap/Badge:  undefined ()
    react-bootstrap/BootstrapModalManager:  undefined ()
    react-bootstrap/Breadcrumb:  undefined ()
    react-bootstrap/BreadcrumbItem:  undefined ()
    react-bootstrap/Button:  undefined ()
    react-bootstrap/ButtonGroup:  undefined ()
    react-bootstrap/ButtonToolbar:  undefined ()
    react-bootstrap/Card:  undefined ()
    react-bootstrap/CardGroup:  undefined ()
    react-bootstrap/CardHeader:  undefined ()
    react-bootstrap/CardHeaderContext:  undefined ()
    react-bootstrap/CardImg:  undefined ()
    react-bootstrap/Carousel:  undefined ()
    react-bootstrap/CarouselCaption:  undefined ()
    react-bootstrap/CarouselItem:  undefined ()
    react-bootstrap/CloseButton:  undefined ()
    react-bootstrap/Col:  undefined ()
    react-bootstrap/Collapse:  undefined ()
    react-bootstrap/Container:  undefined ()
    react-bootstrap/Dropdown:  undefined ()
    react-bootstrap/DropdownButton:  undefined ()
    react-bootstrap/DropdownContext:  undefined ()
    react-bootstrap/DropdownItem:  undefined ()
    react-bootstrap/DropdownMenu:  undefined ()
    react-bootstrap/DropdownToggle:  undefined ()
    react-bootstrap/ElementChildren:  undefined ()
    react-bootstrap/Fade:  undefined ()
    react-bootstrap/Feedback:  undefined ()
    react-bootstrap/Figure:  undefined ()
    react-bootstrap/FigureCaption:  undefined ()
    react-bootstrap/FigureImage:  undefined ()
    react-bootstrap/FloatingLabel:  undefined ()
    react-bootstrap/Form:  undefined ()
    react-bootstrap/FormCheck:  undefined ()
    react-bootstrap/FormCheckInput:  undefined ()
    react-bootstrap/FormCheckLabel:  undefined ()
    react-bootstrap/FormContext:  undefined ()
    react-bootstrap/FormControl:  undefined ()
    react-bootstrap/FormFloating:  undefined ()
    react-bootstrap/FormGroup:  undefined ()
    react-bootstrap/FormLabel:  undefined ()
    react-bootstrap/FormRange:  undefined ()
    react-bootstrap/FormSelect:  undefined ()
    react-bootstrap/FormText:  undefined ()
    react-bootstrap/Image:  undefined ()
    react-bootstrap/InputGroup:  undefined ()
    react-bootstrap/InputGroupContext:  undefined ()
    react-bootstrap/ListGroup:  undefined ()
    react-bootstrap/ListGroupItem:  undefined ()
    react-bootstrap/Modal:  undefined ()
    react-bootstrap/ModalBody:  undefined ()
    react-bootstrap/ModalContext:  undefined ()
    react-bootstrap/ModalDialog:  undefined ()
    react-bootstrap/ModalFooter:  undefined ()
    react-bootstrap/ModalHeader:  undefined ()
    react-bootstrap/ModalTitle:  undefined ()
    react-bootstrap/Nav:  undefined ()
    react-bootstrap/NavContext:  undefined ()
    react-bootstrap/NavDropdown:  undefined ()
    react-bootstrap/NavItem:  undefined ()
    react-bootstrap/NavLink:  undefined ()
    react-bootstrap/Navbar:  undefined ()
    react-bootstrap/NavbarBrand:  undefined ()
    react-bootstrap/NavbarCollapse:  undefined ()
    react-bootstrap/NavbarContext:  undefined ()
    react-bootstrap/NavbarOffcanvas:  undefined ()
    react-bootstrap/NavbarToggle:  undefined ()
    react-bootstrap/Offcanvas:  undefined ()
    react-bootstrap/OffcanvasBody:  undefined ()
    react-bootstrap/OffcanvasHeader:  undefined ()
    react-bootstrap/OffcanvasTitle:  undefined ()
    react-bootstrap/OffcanvasToggling:  undefined ()
    react-bootstrap/Overlay:  undefined ()
    react-bootstrap/OverlayTrigger:  undefined ()
    react-bootstrap/PageItem:  undefined ()
    react-bootstrap/Pagination:  undefined ()
    react-bootstrap/Placeholder:  undefined ()
    react-bootstrap/PlaceholderButton:  undefined ()
    react-bootstrap/Popover:  undefined ()
    react-bootstrap/PopoverBody:  undefined ()
    react-bootstrap/PopoverHeader:  undefined ()
    react-bootstrap/ProgressBar:  undefined ()
    react-bootstrap/Ratio:  undefined ()
    react-bootstrap/Row:  undefined ()
    react-bootstrap/SSRProvider:  undefined ()
    react-bootstrap/Spinner:  undefined ()
    react-bootstrap/SplitButton:  undefined ()
    react-bootstrap/Stack:  undefined ()
    react-bootstrap/Switch:  undefined ()
    react-bootstrap/Tab:  undefined ()
    react-bootstrap/TabContainer:  undefined ()
    react-bootstrap/TabContent:  undefined ()
    react-bootstrap/TabPane:  undefined ()
    react-bootstrap/Table:  undefined ()
    react-bootstrap/Tabs:  undefined ()
    react-bootstrap/ThemeProvider:  undefined ()
    react-bootstrap/Toast:  undefined ()
    react-bootstrap/ToastBody:  undefined ()
    react-bootstrap/ToastContainer:  undefined ()
    react-bootstrap/ToastContext:  undefined ()
    react-bootstrap/ToastFade:  undefined ()
    react-bootstrap/ToastHeader:  undefined ()
    react-bootstrap/ToggleButton:  undefined ()
    react-bootstrap/ToggleButtonGroup:  undefined ()
    react-bootstrap/Tooltip:  undefined ()
    react-bootstrap/TransitionWrapper:  undefined ()
    react-bootstrap/createChainedFunction:  undefined ()
    react-bootstrap/createUtilityClasses:  undefined ()
    react-bootstrap/createWithBsPrefix:  undefined ()
    react-bootstrap/divWithClassName:  undefined ()
    react-bootstrap/getTabTransitionComponent:  undefined ()
    react-bootstrap/helpers:  undefined ()
    react-bootstrap/safeFindDOMNode:  undefined ()
    react-bootstrap/transitionEndListener:  undefined ()
    react-bootstrap/triggerBrowserReflow:  undefined ()
    react-bootstrap/types:  undefined ()
    react-bootstrap/useOverlayOffset:  undefined ()
    react-bootstrap/usePlaceholder:  undefined ()
    react-bootstrap/useWrappedRefWithWarning:  undefined ()
    react-dom: ^18.2.0 => 18.2.0 
    react-hook-form: ^7.39.1 => 7.39.1 
    react-i18next: ^12.0.0 => 12.0.0 
    react-redux: ^8.0.5 => 8.0.5 
    react-router-dom: ^6.4.3 => 6.4.3 
    react-scripts: 5.0.1 => 5.0.1 
    sass: ^1.56.0 => 1.56.0 
    typescript: ^4.8.4 => 4.8.4 
    web-vitals: ^2.1.4 => 2.1.4 
  npmGlobalPackages:
    @aws-amplify/cli: 10.4.0
    hamidgh-web: 0.1.0
    npm-check-updates: 16.3.15
    npm: 6.14.15
    yarn: 1.22.17

Describe the bug

I’m not able to update the existing data on AWS Graphql API. Here are my files.

Schema

type PersonalInfo @model @auth(rules: [{allow: private}]) {
  id: ID!
  firstName: String!
  middleName: String
  lastName: String!
  dateOfBirth: String!
  primaryLanguage: String!
  countryOfBirth: String!
  gender: String!
  maritalStatus: String!
}

mutation

export const updatePersonalInfo = /* GraphQL */ `
  mutation UpdatePersonalInfo(
    $input: UpdatePersonalInfoInput!
    $condition: ModelPersonalInfoConditionInput
  ) {
    updatePersonalInfo(input: $input, condition: $condition) {
      id
      firstName
      middleName
      lastName
      dateOfBirth
      primaryLanguage
      countryOfBirth
      gender
      maritalStatus
      createdAt
      updatedAt
      _version
      _deleted
      _lastChangedAt
    }
  }
`;

My update function

const currentUser = await Auth.currentAuthenticatedUser();

    try {
      const result = await API.graphql({
        query: updatePersonalInfo,
        variables: {
          input: {
            id: currentUser.attributes.sub,
            firstName: data.firstName,
            middleName: data.middleName,
            lastName: data.lastName,
            dateOfBirth: data.dateOfBirth,
            primaryLanguage: data.primaryLanguage,
            countryOfBirth: data.countryOfBirth,
            gender: data.gender,
            maritalStatus: data.maritalStatus
          }
        }
      });

I’m able to create a new model, but not able to update it. From network tab I see that I send the new first name for example but in the successful response but with the previous name that was on dataStore.

I’m new to AWS Amplify, any help would be appreciated.

Request Payload:

Response Preview:

Expected behavior

It should update the dataStore, in this example it should change the firstName from Boltseman to Boltseman62

Reproduction steps

1. Create Model like the one I added in the description
2. Try to update this model using mutations functions like the one I provided in the description

Code Snippet

// Put your code below this line.

Log output

Request

{"query":"mutation UpdatePersonalInfo($input: UpdatePersonalInfoInput!, $condition: ModelPersonalInfoConditionInput) {\n  updatePersonalInfo(input: $input, condition: $condition) {\n    id\n    firstName\n    middleName\n    lastName\n    dateOfBirth\n    primaryLanguage\n    countryOfBirth\n    gender\n    maritalStatus\n    createdAt\n    updatedAt\n    _version\n    _deleted\n    _lastChangedAt\n  }\n}\n","variables":{"input":{"id":"b843c2bc-7a1f-4649-b2fe-31076d9ff196","firstName":"Boltseman","middleName":"Sey","lastName":"yahoo","dateOfBirth":"2022-11-11","primaryLanguage":"Farsi","countryOfBirth":"Iran","gender":"Male","maritalStatus":"Married"}}}

Response

{"data":{"updatePersonalInfo":{"id":"b843c2bc-7a1f-4649-b2fe-31076d9ff196","firstName":"Boltseman","middleName":"62","lastName":"yahoo","dateOfBirth":"2022-11-11","primaryLanguage":"Farsi","countryOfBirth":"Iran","gender":"Male","maritalStatus":"Married","createdAt":"2022-11-11T18:17:21.715Z","updatedAt":"2022-11-11T18:17:21.715Z","_version":9,"_deleted":null,"_lastChangedAt":1668222549345}}}

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-west-2",
    "aws_cognito_identity_pool_id": "us-west-2:5555555555",
    "aws_cognito_region": "us-west-2",
    "aws_user_pools_id": "us-west-2_ZD8EUuCSL",
    "aws_user_pools_web_client_id": "55555555555",
    "oauth": {},
    "aws_cognito_username_attributes": [
        "EMAIL"
    ],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ],
    "aws_appsync_graphqlEndpoint": "https://someId.appsync-api.us-west-2.amazonaws.com/graphql",
    "aws_appsync_region": "us-west-2",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_appsync_apiKey": "myAPIKey"
};


export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

When using DataStore, you have to query the record you want to mutate by id and then use Model.copyOf to update a record’s field values rather than the instance itself.

Example:

async function updatePost(id, newTitle) {
  const original = await DataStore.query(Post, id);
  await DataStore.save(
    Post.copyOf(original, updated => {
      updated.title = newTitle
    })
  );
}

https://docs.amplify.aws/lib/datastore/data-access/q/platform/js/#create-and-update

[chrisbonifacio]

Thanks for the quick response. I added the _version in the request and now it updated. I think it should be mentioned in the documentation. I couldn’t find anywhere on internet.

We should mention this, just need to figure out where to put it. Might have to go in an advanced workflows section for DataStore.

The main reason that I use graphql is to store the data based on the user, for example on the issue I have above user is updating its own profile. Is there a way to use DataStore.save based on the logged in user?

DataStore does not enforce auth rules on the client but the server will prevent one user from changing another user’s profile if you’re using an auth rule like { allow: owner }. Right now, as it stands, the { allow: private } rule on your model will allow any logged in user to update any PersonalInfo record. Using the owner based auth rule will restrict updates to the user that created the record.

For more information on owner-based auth, please refer to the documentation: