Graphql - Mutation operation with Apollo Client Angular not working

Question

I am working on a angular app with Graphql, The mutation operation on postman works fine, but when i tried to invoke the same in angular it throws an error as

GraphQL request:2:21 1 | 2 | mutation createHero(item: {$id : ID!, $publisher : String!, $characters : String!, $superhero :String!}){
| ^ 3 | createHero(item: {id: $id, publisher : $publisher , characters : $characters , superhero : $superhero} ) GraphQLError: Syntax Error: Expected "$", found Name "item".

Here is the working request

mutation{
  createHero (item:{ id:"test1", alter_ego:"hero", first_appearance:"cosmos", publisher:"azure", superhero:"test"}) {
     id
     superhero
      publisher
      characters
      alter_ego
      first_appearance
  }
}

and here is the code on Angular app,

const post_SaveHero = gql`
mutation createHero(item: {$id : ID!, $publisher : String!, $characters : String!, $superhero :String!}){
  createHero(item: {id: $id, publisher : $publisher , characters : $characters , superhero : $superhero} )
 {
  superhero
}
}`;

  addHero(hero: Hero) {
    return this.apollo.mutate({
      mutation: post_SaveHero,
      variables: {
        $publisher: hero.publisher,
        $characters: hero.characters,
        $superhero: hero.superhero,
        $id : hero.id,
        $alter_ego : hero.alter_ego,
        $first_appearance : hero.first_appearance,
        
      }
    });
  }

What is wrong here? Please help.