DataStore AWSPhone validation doesn't match AppSync and data is lost

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

DataStore

Amplify Categories

api

Environment information

# Put output below this line
System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 17.35 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.4 - ~/.nvm/versions/node/v14.17.4/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.4/bin/yarn
    npm: 7.21.0 - ~/.nvm/versions/node/v14.17.4/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Edge: 94.0.992.50
    Firefox: 92.0.1
    Firefox Developer Edition: 94.0
    Safari: 15.0
  npmPackages:
    @aws-amplify/ui-react: ^1.2.20 => 1.2.20
    @date-io/core: 1.3.13 => 1.3.13
    @date-io/date-fns: 1.3.13 => 1.3.13
    @material-ui/core: ^4.12.3 => 4.12.3
    @material-ui/icons: ^4.11.2 => 4.11.2
    @material-ui/lab: 4.0.0-alpha.60 => 4.0.0-alpha.60
    @material-ui/pickers: ^3.3.10 => 3.3.10
    @testing-library/jest-dom: ^5.14.1 => 5.14.1
    @testing-library/react: ^12.1.1 => 12.1.1
    @testing-library/user-event: ^13.2.1 => 13.2.1
    @types/yup: ^0.29.13 => 0.29.13
    aws-amplify: ^4.3.2 => 4.3.2
    chart.js: ^3.5.1 => 3.5.1
    chart.js-auto:  undefined ()
    chart.js-helpers:  undefined ()
    clsx: ^1.1.1 => 1.1.1
    cypress: 8.6.0 => 8.6.0
    date-fns: ^2.24.0 => 2.24.0
    dotenv: ^10.0.0 => 10.0.0 (8.2.0)
    eslint-plugin-cypress: ^2.12.1 => 2.12.1
    faker: ^5.5.3 => 5.5.3
    final-form: ^4.20.4 => 4.20.4
    hooked-on-redux: ^0.4.0 => 0.4.0
    lodash: ^4.17.21 => 4.17.21
    logrocket: ^2.1.0 => 2.1.0
    mui-datatables: ^3.7.8 => 3.7.8
    mui-rff: ^3.0.16 => 3.0.16
    notistack: ^1.0.10 => 1.0.10
    prettier: 2.4.1 => 2.4.1
    react: ^17.0.2 => 17.0.2 (16.14.0)
    react-chartjs-2: ^3.0.5 => 3.0.5
    react-chartkick: ^0.5.2 => 0.5.2
    react-dom: ^17.0.2 => 17.0.2 (16.14.0)
    react-dropzone: ^11.4.2 => 11.4.2
    react-final-form: ^6.5.7 => 6.5.7
    react-redux: ^7.2.5 => 7.2.5
    react-router-dom: ^5.3.0 => 5.3.0
    react-scripts: 4.0.3 => 4.0.3
    redux: ^4.1.1 => 4.1.1
    start-server-and-test: ^1.14.0 => 1.14.0
    web-vitals: ^2.1.2 => 2.1.2
    yup: ^0.32.11 => 0.32.11 (0.32.9)
  npmGlobalPackages:
    @aws-amplify/cli: 6.3.1
    @gridsome/cli: 0.3.4
    npm: 7.21.0
    prismic-cli: 4.0.7
    yarn: 1.22.11

Describe the bug

I have a date model for athlete information that uses phone numbers as one of the variables

type Athlete @model @key(name: "byTeam", fields: ["teamID"]) @key(name: "byPhone", fields: ["phoneNumber"]) @auth(rules: [{ allow: private }]) {
	id: ID!
	firstName: String
	lastName: String
	email: AWSEmail
	teamID: ID
	phoneNumber: AWSPhone
	playerNumber: Int
	playerPosition: String
	AthleteGroups: [AthleteGroup] @connection(keyName: "byAthlete", fields: ["id"])
	dateOfBirth: AWSDate
	avatar: String
	active: Boolean
	emoji: String
	firstTouchSent: Boolean
}

If I create/update an athlete with the phone number [phone] it saves correctly to the datastore, but then in the background sync the athlete creation/update failed with no sort of notification. The data was lost after the next sync.

this is was the call

{"query":"mutation operation($input: UpdateAthleteInput!, $condition: ModelAthleteConditionInput) {\n  updateAthlete(input: $input, condition: $condition) {\n    id\n    firstName\n    lastName\n    email\n    teamID\n    phoneNumber\n    playerNumber\n    playerPosition\n    dateOfBirth\n    avatar\n    active\n    emoji\n    firstTouchSent\n    _version\n    _lastChangedAt\n    _deleted\n  }\n}\n","variables":{"input":{"id":"29f1066c-3e26-45eb-84c1-c2a985b69f71","phoneNumber":"6781982162","_version":2},"condition":null}}

and RESPONSE

{"data":null,"errors":[{"path":null,"locations":[{"line":1,"column":20,"sourceName":null}],"message":"Variable 'phoneNumber' has an invalid value. Unable to parse `6781982162` as a valid phone number."}]}

Expected behavior

Datastore function to have the same validation for the phone number type as app sync in case of invalid phone number won’t result in lost data

Reproduction steps

• use data store with a model that uses the AWSPhone Type
• create or update an item with the phone number 6781982162 or 555555555
• datastore accepts the item, but app sync fails

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

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

[martinrojas]

@chrisbonifacio I appreciate you following up on this. and I was able to find a regex to the NANP rules https://regexr.com/45n8s

^(1|)[2-9]\d{2}[2-9]\d{6}$

For the bigger issue off notifications about sync issue I was thinking that maybe using Hub.listen('datastore', ....) could be stopgap

[ricobanga]

I had the problem, and tested 2 way to handle it :

1 - You save your model without the phone number then update it with the phone number Pros : only your phone number is lost when clearing datastore … Cons : … but still it is lost and you wont really know it

2 - you make an additional string phone number that you save, then use a lambda trigger to update the “real” phone field with the string one. If update works and observe occurs with proper phone filled, then it passed the test Pros : No data is lost. On client side if both fields are equals then test passed, else not, which is good to know Cons : 1. heavier to make 2. User in Offline mode wont have the field updated, so you have to deal with it