Mutations break after aws-amplify/cli update: "input contains a field that is not defined"

[ok-martin]

How did you install the Amplify CLI?

npm install -g @aws-amplify/[email protected]

If applicable, what version of Node.js are you using?

21.7.1

Amplify CLI Version

12.10.1

GraphQL transformer version: 2

What operating system are you using?

Windows

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

No manual changes made

Describe the bug

After upgrading from @aws-amplify/[email protected] to @aws-amplify/[email protected] I am unable to do any mutations. All of them return the error: "The variables input contains a field that is not defined for input object type 'DirListInput' "

Expected behavior

Carry out the mutation successfully without throwing an error as it did in @aws-amplify/[email protected]

Reproduction steps

I am running a react app with "aws-amplify": "5.3.17"

1. (simplified) schema.graphql:

type DbDirTable @model(timestamps: { createdAt: "createdAt", updatedAt: "modifiedAt" }) {
  id: ID!
  createdAt: AWSDateTime!
  modifiedAt: AWSDateTime!
  dirList: [DirList!]!
  copiedFromId: String
}

type DirList {
  id: ID!
  items: [DirListItem!]!
  title: String
  colour: String
}

type DirListItem {
  id: ID!
  note: String
  visited: Boolean
}

2. After running amplify push --y it changed:

src/API.ts
src/graphql/mutations.ts
src/graphql/queries.ts
src/graphql/schema.json
src/graphql/subscriptions.ts

The difference in those files was that it added __typename to every type, input, mutation and query

3. Then I call

await API.graphql<GraphQLQuery<UpdateDbDirTableMutation>>(graphqlOperation(updateDbDirTable, { input: inputData }));

where inputData is:

{
  {
    "id": "3894a81b-4e93-4627-aae1-0a0617a8ed75",
    "dirList": [
        {
            "id": "a9cb6ec9-0254-4d37-ac96-e25e46f50a42",
            "items": [],
            "title": "One",
            "colour": null,
        },
        {
            "id": "09701984-fe07-4140-b36a-c9ecd8ca0549",
            "items": [
                {
                    "id": "6535fb67-f55d-475c-b32d-065f5b26f4ee",
                    "note": null,
                    "visited": null,
                }
            ],
            "title": "Two",
            "colour": null,
        }
    ]
}

But it throws the error

[
    {
        "path": null,
        "locations": null,
        "message": "The variables input contains a field that is not defined for input object type 'DirListInput' "
    }
]

4. updateDbDirTable is auto-generated in src/graphql/mutations. I am not using any custom resolvers or overrides

Project Identifier

No response

Log output

# Put your logs below this line

Additional information

If I discard changes in the graphql the code in step 3 works ok

If I downgrade to 12.0.0 and re-generate the graphql files the code in step 3 works ok

Same issue on 12.4.0 because it adds the same changes as 12.10.1 to the auto-generated graphql and API

I noticed that if I keep all of the regenerated changes and only discard the src/graphql/queries.ts then the code works ok

The only new change in src/graphql/queries.ts is that it added __typename everywhere.

This is strange since all my queries, when called directly, work fine with the newly generated file and they fetch the data ok.

Before submitting, please confirm:

• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

[josefaidt]

Hey @ok-martin 👋 thanks for raising this! I'm going to transfer this over to our API repo for tracking 🙂

[phani-srikar]

Hi @ok-martin, the changeset from 12.0.0 to 12.10.1 includes this codegen change which might have caused this. I've tried to reproduce this and noticed the typeName additions as well. However I have some questions:

I noticed that if I keep all of the regenerated changes and only discard the src/graphql/queries.ts then the code works ok

I am confused by this part since the types defined here are independent of the mutation that is failing for you. Do you happen to have a diff of mutations.ts that is generated? I see that in my repro, there is an additional diff other than the __typeName as seen below:

[ok-martin]

Hi @phani-srikar I am confused by that too.

Here is the diff on the mutation file:

It is essentially the same but with __typename added

[dpilch]

As a workaround, you can disable the addition of __typename in the query. In your .graphqlconfig.yml file set typenameIntrospection to false.

projects:
  typename:
    extensions:
      amplify:
        typenameIntrospection: false

Another thing to try, could you add a newline somewhere in GraphQL schema and then try to amplify push. This will force the API resource to update.

[AnilMaktala]

Hey @ok-martin, Are you still experiencing this issue?

[AnilMaktala]

Hey 👋 , This issue is being closed due to inactivity. If you are still experiencing the same problem and need further assistance, please feel free to leave a comment. This will enable us to reopen the issue and provide you with the necessary support.

[github-actions]

This issue is now closed. Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.

[ok-martin]

I am still experiencing the issue.

It seems that it only fails to update on objects that are already in the database. If I insert a new row and then try to update it, then it all works ok.

However, when I try to update a row that was already there (from version 12.0.0) then the update fails.

[ok-martin]

I can confirm that the problem occurs when updating sub-fields that are missing __typename.

Is there a way to auto populate those sub-fields with __typename?

P.S thank you @dpilch. Your workaround works but I would rather solve it the proper way in case this becomes an issue with the future versions of Amplify :)

[jpangburn]

I have the same problem. I get a list of existing objects from the database, something like:

const {data: entranceQueryData, errors: entranceQueryErrors} = await client.graphql({
    query: listEntranceByOwner,
    variables: {
      owner: owner,
    }
  });

I then do some updates to one of the entrance objects, and then try to update it:

const {data: entranceQueryData, errors: entranceQueryErrors} = await client.graphql({
      query: updateEntrance,
      variables: {
        input: {
          codes: entrance.codes,
          <a bunch of other fields irrelevant to the bug>
        },
      },
    });

Then I get the error message (like the OP)

The variables input contains a field that is not defined for input object type 'CodeInput'

The reason is there's a child array field called "codes" of type CodeInput. In the model schema it looks like codes: a.ref('Code').array(), so it's an array of a custom type. Coming back from the query, each entry in the array has __typename attribute. This attribute is what the update call doesn't like.

It would be nice if either the update ignored that, or the query didn't add it. It's weird to get an object back from a query that you can't send directly back to an update call.

I'm using Gen 2, and don't have that yml file mentioned above, so if anyone else is in the same boat before this gets fixed I made a function:

function removeTypename(obj: any) {
  if (Array.isArray(obj)) {
    // If the object is an array, recursively apply this function to each element
    for (let i = 0; i < obj.length; i++) {
      removeTypename(obj[i]);
    }
  } else if (obj !== null && typeof obj === 'object') {
    // If the object is a non-null object, recursively apply this function to each key
    for (const key in obj) {
      if (key === '__typename') {
        delete obj[key];
      } else {
        removeTypename(obj[key]);
      }
    }
  }
}

Just call that on your object before sending it to the update call and it'll clean out any __typename keys. Then your update will work regardless of whether this bug is fixed or not.