aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.44k stars 2.13k forks source link

DataStore [WARN] Cannot return null for non-nullable type: 'ID' within parent 'Restaurant' (/createIngredient/restaurant/id) #13609

Open crestswapnil opened 4 months ago

crestswapnil commented 4 months ago

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

GraphQL API, DataStore

Amplify Version

v6

Amplify Categories

api

Backend

Amplify CLI

Environment information

``` # Put output below this line System: OS: Windows 11 10.0.22631 CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz Memory: 3.85 GB / 15.74 GB Binaries: Node: 20.11.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD pnpm: 9.0.0 - ~\AppData\Local\pnpm\pnpm.EXE Browsers: Edge: Chromium (126.0.2592.102) Internet Explorer: 11.0.22621.3527 npmPackages: @aws-amplify/auth: ^6.3.7 => 6.3.7 @aws-amplify/cli-extensibility-helper: ^3.0.33 => 3.0.33 @aws-amplify/datastore: ^5.0.38 => 5.0.38 @formkit/auto-animate: ^0.8.1 => 0.8.2 @fortawesome/fontawesome-svg-core: ^6.5.1 => 6.5.2 @fortawesome/free-brands-svg-icons: ^6.5.1 => 6.5.2 @fortawesome/free-regular-svg-icons: ^6.5.1 => 6.5.2 @fortawesome/free-solid-svg-icons: ^6.5.1 => 6.5.2 @fortawesome/react-fontawesome: ^0.2.0 => 0.2.2 @hookform/resolvers: ^3.3.4 => 3.7.0 @radix-ui/react-accordion: ^1.1.2 => 1.2.0 @radix-ui/react-alert-dialog: ^1.0.5 => 1.1.1 @radix-ui/react-aspect-ratio: ^1.0.3 => 1.1.0 @radix-ui/react-avatar: ^1.0.4 => 1.1.0 @radix-ui/react-checkbox: ^1.0.4 => 1.1.1 @radix-ui/react-collapsible: ^1.0.3 => 1.1.0 @radix-ui/react-dialog: ^1.0.5 => 1.1.1 @radix-ui/react-dropdown-menu: ^2.0.6 => 2.1.1 @radix-ui/react-form: ^0.0.3 => 0.0.3 @radix-ui/react-icons: ^1.3.0 => 1.3.0 @radix-ui/react-label: ^2.0.2 => 2.1.0 @radix-ui/react-menubar: ^1.0.4 => 1.1.1 @radix-ui/react-popover: ^1.0.7 => 1.1.1 @radix-ui/react-radio-group: ^1.1.3 => 1.2.0 @radix-ui/react-select: ^2.0.0 => 2.1.1 @radix-ui/react-separator: ^1.0.3 => 1.1.0 @radix-ui/react-slot: ^1.0.2 => 1.1.0 @radix-ui/react-switch: ^1.0.3 => 1.1.0 @radix-ui/react-tabs: ^1.0.4 => 1.1.0 @radix-ui/react-toast: ^1.1.5 => 1.2.1 @radix-ui/react-toggle-group: ^1.0.4 => 1.1.0 @radix-ui/react-tooltip: ^1.0.7 => 1.1.2 @tanstack/react-table: ^8.13.2 => 8.19.2 @types/lodash: ^4.17.0 => 4.17.6 @types/node: ^20.11.26 => 20.14.9 @types/react: ^18.2.65 => 18.3.3 @types/react-beautiful-dnd: ^13.1.8 => 13.1.8 @types/react-datepicker: ^6.2.0 => 6.2.0 @types/react-dom: ^18.2.21 => 18.3.0 @types/react-resizable: ^3.0.7 => 3.0.8 @types/uuid: ^9.0.8 => 9.0.8 @typescript-eslint/parser: ^6.21.0 => 6.21.0 autoprefixer: ^10.4.18 => 10.4.19 aws-amplify: ^6.3.8 => 6.3.8 aws-amplify-server: link:aws-amplify-server => 1.0.0 aws-sdk: ^2.1626.0 => 2.1654.0 class-variance-authority: ^0.7.0 => 0.7.0 clsx: ^2.1.0 => 2.1.1 cmdk: ^0.2.1 => 0.2.1 emoji-picker-react: ^4.8.0 => 4.11.1 eslint: ^8.57.0 => 8.57.0 eslint-config-next: 14.0.3 => 14.0.3 eslint-config-prettier: ^9.1.0 => 9.1.0 eslint-plugin-prettier: ^5.1.3 => 5.1.3 eslint-plugin-simple-import-sort: ^10.0.0 => 10.0.0 eslint-plugin-tailwindcss: ^3.15.0 => 3.17.4 fuse.js: ^7.0.0 => 7.0.0 generate-password: ^1.7.1 => 1.7.1 husky: ^8.0.3 => 8.0.3 js-big-decimal: ^2.0.7 => 2.0.7 lint-staged: ^15.2.2 => 15.2.7 lodash: ^4.17.21 => 4.17.21 lottie-react: ^2.4.0 => 2.4.0 lucide-react: ^0.356.0 => 0.356.0 moment: ^2.30.1 => 2.30.1 nanoid: ^5.0.6 => 5.0.7 next: 14.0.3 => 14.0.3 postcss: ^8.4.35 => 8.4.39 prettier: ^3.2.5 => 3.3.2 qz-tray: ^2.2.3 => 2.2.3 randomcolor: ^0.6.2 => 0.6.2 react: ^18.2.0 => 18.3.1 react-beautiful-dnd: ^13.1.1 => 13.1.1 react-circular-progressbar: ^2.1.0 => 2.1.0 react-datepicker: ^6.9.0 => 6.9.0 react-dom: ^18.2.0 => 18.3.1 react-draggable: ^4.4.6 => 4.4.6 react-dropzone: ^14.2.3 => 14.2.3 react-hook-form: ^7.51.0 => 7.52.1 react-paginate: ^8.2.0 => 8.2.0 react-resizable: ^3.0.5 => 3.0.5 react-select: ^5.8.0 => 5.8.0 receiptline: ^1.16.0 => 1.16.1 recharts: ^2.12.7 => 2.12.7 sharp: ^0.32.6 => 0.32.6 tailwind-merge: ^2.2.1 => 2.3.0 tailwindcss: ^3.4.1 => 3.4.4 tailwindcss-animate: ^1.0.7 => 1.0.7 typescript: 5.3.3 => 5.3.3 use-debounce: ^10.0.0 => 10.0.1 uuid: ^9.0.1 => 9.0.1 zod: ^3.22.4 => 3.23.8 npmGlobalPackages: @aws-amplify/cli: 12.12.4 gulp: 4.0.2 ```

Describe the bug

I'm trying to insert an item in the Ingredient table. It has a field called Restaurant which @belongsTo Restaurant table.

Screenshot (118)

Following is the generated interface for the table schema using the amplify codegen model.

Screenshot (121)

I tried to save the following data in the Ingredient table.

Screenshot (120)

The data syncs properly to the dynamoDB in the cloud but when Datastore syncs it back to the local, it is replacing the field restaurantIngredientsId with null.

Screenshot (122)

Screenshot (123)

And when I refresh the page, the data is synced properly back again with the correct value.

Screenshot (124)

I'm also getting the warning while saving the data as,

Screenshot (125)

Expected behavior

The restaurantIngredientsId is not getting populated by the data provided when saved using the method, DataStore.save(). I want the data to be present before I refresh the page when the data is synced after the save.

Reproduction steps

  1. Create the model,
type Restaurant @model @auth(rules: [{ allow: owner, ownerField: "owners" }]) {
  id: ID!
  name: String
  description: String
  address: String
  phoneNumber: String
  email: AWSEmail
  website: AWSURL
  currency: String
  taxId: String
  image: String
  selected: Boolean
  restaurantOrigin: String! @index(name: "byRestaurantOrigin")
  menu: [MenuCategory] @hasMany
  floors: [Floor] @hasMany
  invoices: [Invoice] @hasMany
  expressOrders: [ExpressOrder] @hasMany
  takeawayOrders: [TakeawayOrder] @hasMany
  cashCounts: [CashCount] @hasMany
  ingredients: [Ingredient] @hasMany
  owners: [String]
}

type Ingredient @model @auth(rules: [{ allow: owner, ownerField: "owners" }]) {
  id: ID!
  name: String!
  stock: Float
  unit: String!
  recipeIngredients: [RecipeIngredient] @hasMany
  restaurant: Restaurant @belongsTo
  owners: [String]
}
  1. Generate the types using amplify codegen model.
  2. Push the changes to cloud, amplify push.
  3. save the data,
    
    const ingredientData = {
    name: "Onions",
    unit: "kg",
    stock: 156,
    restaurant: RestaurantObj,
    owners: ["13ccfa8a-80c1-7014-9853-aac9bba0d9c5::13ccfa8a-80c1-7014-9853-aac9bba0d9c5"],
    };

DataStore.save(new Ingredient(ingredientData));


### Code Snippet

```javascript
// 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

chrisbonifacio commented 4 months ago

Hi @crestswapnil, can you check the network activity for the graphql mutation that is sent to AppSync? I'm curious what the graphql request string looks like vs the query that works on refresh.

crestswapnil commented 4 months ago

This was the graphQL query string while saving the data,

Screenshot 2024-07-18 162228

And this is the query when I refresh the page,

Screenshot 2024-07-18 162759

crestswapnil commented 4 months ago

@chrisbonifacio Any updates on this? Please help me I'm badly stuck in this.

crestswapnil commented 4 months ago

Can anyone help me to solve this? It's been 4 days...

svidgen commented 4 months ago

The error you shared message seems to indicate that the ID field in Restaurant is null. This would suggest that the Restaurant object AppSync is looking for doesn't actually exist.

Can you confirm that you are saving the Restaurant object (and await-ing) before saving the Ingredient?

crestswapnil commented 4 months ago

@svidgen Yes it is confirmed that the Restaurant object is being saved properly.

simlevesque commented 3 months ago

@crestswapnil Can you try something for me ? I think I have the same bug as you and I managed to "fix" it by reverting some VTL in the resolvers.

Could you paste the resolver for Ingredient/restaurant and Ingredient/restaurantIngredientId ? all the request functions for both.

simlevesque commented 3 months ago

@crestswapnil another thing:

Add "subscriptionsInheritPrimaryAuth": true, to ./amplify/cli.json features.graphqltransformer

This fixed it for me. Check out the warning as the beginning of this page for more info: https://docs.amplify.aws/gen1/javascript/build-a-backend/graphqlapi/subscribe-data/