reactjsaws-amplifyaws-appsync

Generic approach to tracking down why GraphQL fields are not showing up in Amplify/React query results

A pattern I have noticed when developing React apps on AWS/Amplify with Appsync integration is that it can be difficult to track down why certain fields defined in my GraphQL schema are undefined in the accompanied React app that uses the schema.

For example, the following errors can result in undefined fields:

  1. failure to deploy the GraphQL schema will cause new fields to be stripped out of the query result.
  2. failure to deploy the lambda that returns a new field will cause the field to be blank.
  3. failure to re-codegen the Appsync app in the React directory will cause React to be unaware of the new fields.
  4. Something related to amplify push (I am fuzzy on how this works)

I think there are more points of failure than those based on a problem I am debugging this morning.

Perhaps someone with more experience could flesh out that list above so that a developer like myself could either use a checklist for updates or perform binary search to figure out at what point there is a misconfiguration.

Thank you!

Solution

  • My approach to overcoming this difficulty is to develop strategies for updating the GraphQL schema for amplify in a manner that guarantees all configurations are correct. In this manner, I don't need to learn how to check every single step every time something goes wrong.

    When I first encountered these difficulties, I was using the GraphqlApi. CDK construct from the CDK 2 library @aws-cdk/aws-appsync-alpha. Using CDK to manage the GraphQL schema deployment rather than the amplify CLI created the need for a complicated React/Amplify update routine. Here is the command I eventually settled on for updating the schema:

    (amplify codegen remove || true) && amplify add codegen --apiId ${MY_GRAPHQL_ENDPOINT} && amplify push -y

    This command requires manual entry of the codegen import arguments (e.g. select Typescript over Javascript, the schema depth, etc.). The third part of the command amplify push ... is required so that the hosted amplify end point is aware of the current schema.

    In October 2023, AWS released the new AppSync/GraphQL construct, AmplifyGraphqlApi. Porting my CDK code to use this new construct was well worth the effort in my case as the command I now use is simplified dramatically. I now import the API one time using the instruction on the AWS console. There is a one-time requirement to manually enter the language, schema depth, and a few other parameters. Later, when I need to update the schema I use:

    amplify codegen && amplify push -y

    for a completely automated update experience.

    So, my current recommendation for those using a CDK-managed GraphQL schema with amplify is to favor using AmplifyGraphqlApi over GraphqlApi.

    20231206: Further update and explanation:

    Amplify recently introduced "Gen 2" apps as a Beta option for app development. It looks like this may provide new ways of integrating CDK with amplify. The answer above is for a generation 1 amplify app.