typegraphql : parameter error in playground when using variables

Question

I'm facing a weird issue, when trying to execute mutations with variables as parameters in the graphql playground

mutation userLogin($username:String!, $password:String!){
  userLogin(
    username: $username
    password: $password) 
  {
    id
  }
}

Parameters in playground "QUERY VARIABLES" tab:

{
  "username": "test@test.com"
  "password": "Test"
}

this failed with message

{
        "path": "unk",
        "code": "INTERNAL_SERVER_ERROR",
        "message": "Variable \"$username\" of required type \"String!\" was not provided."
      },
      {
        "path": "unk",
        "code": "INTERNAL_SERVER_ERROR",
        "message": "Variable \"$password\" of required type \"String!\" was not provided."
      }

but running this is working well :

mutation {
  userLogin(
    username: "test8@test.com"
    password: "Test1234!") 
  {
    id
  }
}

What am I missing here ?

the variables are @ArgsType

@ArgsType()
export class LoginInputType {
    @Field()
    username: string;

    @Field()
    password: string;
}

and I declare them in resolver

async userLogin(
        @Args() { username, password }: LoginInputType,
        @Ctx() context: GlobalContext
    ): Promise<UsersEntity | null> {

Answer 1

Incorrectly formatting your variables inside Playground will cause it to just not send the variables. If any of the variables were non-null, your request will fail validation.

This

{
  "username": "test@test.com"
  "password": "Test"
}

is not valid JSON because it's missing a comma. Playground will shown a red error indicator to the left of any lines that have syntax errors like these.