Amplify-cli: $input syntax in the codegen mutations is not working with graphqlOperations.

[lahirian]

Describe the bug
Running amplify codegen creating mutations not supported by amplify graphqlOperations

To Reproduce
amplify codegen creates mutations like this:

export const CreateCity = gql`
  mutation CreateCity($input: CreateCityInput!) {
    createCity(input: $input) {
      id
      city_name
      zip_code
    }
  }
`;

However when I try to use it via this :
`
API.graphql(graphqlOperation(gqlToString(fp_mutations.CreateCity, {id: {city_name:city_name,zip_code:zip_code}})))

I get an error
path: null, locations: Array(1), message: "Variable 'input' has coerced Null value for NonNull type 'CreateCityInput!'"

However if I change the mutation by hand to something like this :
export const CreateCity = mutation createCity($city_name: String!, $zip_code: String!) { createCity(input: {city_name: $city_name, zip_code: $zip_code}) { id, city_name, zip_code } };
`
and call it like this

API.graphql(graphqlOperation(gqlToString(fp_mutations.CreateCity, {city_name:city_name,zip_code:zip_code})))

it works! It seems that the ($input syntax in the codegen mutations is not working with graphqlOperations.

[mikeparisstuff]

@lahirian Thank you for bringing this up. We recently discovered this issue ourselves and have a fix in the works. @manueliglesias can you please update this ticket with any updates as they occur?

Edit:

@lahirian Please see the comment from @yuth below. All you need to do is nest your variable under input to make it match the mutation. The issue I was talking about is actually unrelated to this and relates to an amplify helper, not the transform itself.

[dancomanlive]

Same here:

const createProduct = `mutation CreateProduct($input: CreateProductInput!) {
  createProduct(input: $input) {
    id
    brand
    description
  }
}
`

Doesn't work but

const createProduct = `
  mutation($brand: String!, $description: String!) {
    createProduct(input: {
      brand: $brand
      description: $description
  }) {
    id
    brand
    description
  }
}`

works!

[yuth]

@lahirian the mutation expects an input object which wraps city_name and zip_code. The update code would look like below:

API.graphql(
  graphqlOperation(
    gqlToString(fp_mutations.CreateCity, {
      input: {
        city_name: city_name,
        zip_code: zip_code
      }
    })
  )
);

[ghost]

When importing a mutation or query from the autogenerated file I get an error "TypeError: Must provide Source." If I delete the gql from the autogenerated file below then it works. Instead of this (which doesn't work):

// this is an auto generated file. This will be overwritten
import gql from "graphql-tag";
export const CreateUser = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
      profilePic
    }
  }
`;

I have this which does work:

// this is an auto generated file. This will be overwritten
import gql from "graphql-tag";
export const CreateUser = `
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
      profilePic
    }
  }
`;

[ghost]

The above was generated with gql because I had the Appsync SDK still installed on my project. I realise now that if you are using Amplify you don't need this. So after "npm uninstall 'aws-appsync' and removing my appsync client code from the App.js file - it works!!! Sorry if I created any confusion.

[yuth]

@tamsynjennifer, amplify cli now generates statements without the gql tags. Could you check the auto generated mutation to see if the gql tags are gone. If that's the case, then I suspect amplify-cli got updated along the way and update the generated statements without the gql tag.

[ghost]

@yuth Yes thanks! I saw your comment on the AMplify Gitter. In my comment above I explained that it was because I had the AppSync SDK installed on my project. After removing the Appsync SDK - it generated the code without the gql tags.