dabit3 / react-appsync-graphql-recipe-app Goto Github PK

I am following this link https://tylermcginnis.com/building-serverless-react-graphql-apps-with-aws-appsync/ and completed upto my request part.

Request:
query listRecipes { listRecipes { items { id name instructions ingredients } } }
Error:
{ "data": { "listRecipes": { "items": [ null ] } }, "errors": [ { "path": [ "listRecipes", "items", 0, "ingredients" ], "data": null, "errorType": "DynamoDB:AmazonDynamoDBException", "errorInfo": null, "locations": [ { "line": 7, "column": 7, "sourceName": null } ], "message": "The provided key element does not match the schema (Service: AmazonDynamoDBv2; Status Code: 400; Error Code: ValidationException; Request ID: VV5MALU6PKQM3L0Q3UF937Q2LJVV4KQNSO5AEMVJF66Q9ASUAAJG)" }, { "path": [ "listRecipes", "items", 0, "name" ], "data": null, "errorType": "DynamoDB:AmazonDynamoDBException", "errorInfo": null, "locations": [ { "line": 5, "column": 7, "sourceName": null } ], "message": "The provided key element does not match the schema (Service: AmazonDynamoDBv2; Status Code: 400; Error Code: ValidationException; Request ID: EIOBAUHUARVV0VTF5MI7SR8HJ3VV4KQNSO5AEMVJF66Q9ASUAAJG)" }, { "path": [ "listRecipes", "items", 0, "instructions" ], "data": null, "errorType": "DynamoDB:AmazonDynamoDBException", "errorInfo": null, "locations": [ { "line": 6, "column": 7, "sourceName": null } ], "message": "The provided key element does not match the schema (Service: AmazonDynamoDBv2; Status Code: 400; Error Code: ValidationException; Request ID: NBTF9ANE157BIL171QD2ATQIJFVV4KQNSO5AEMVJF66Q9ASUAAJG)" } ] }

After running createRecipe in the AWS console, the web UI fails to rerender with an updated list. Instead, a warning is flagged in the console and nothing is rendered (blank/empty). On refresh, each recipe is listed, including the newly created recipe, as they should be.

Here is the console output:

Missing field instructions in {
  "id": "new_id",
  "__typename": "Recipe"
}

Stack:

I get an error about a missing compose function from Recipes.js. Looks like just removing that function gets things to build and run and more closely matches the article.