Rework GraphQL query variables editor

[denys-meloshyn]

As a new user of your plugin it was not obvious to understand how to provide custom variables. After some time I noticed "Toggle variable editor" but after that I was confused in which format I should provide my variable: JSON, YML or another.

Describe the solution you'd like Tutorial with step by step would help very much.

[ashwins93]

Where is this "Toggle variable editor" option? I'm totally lost. I can't figure out how to provide variables to the queries. Any kind of documentation will help.

[jimkyndemeyer]

@ashwins93 You'll find the variables button in the toolbar for each GraphQL file tab. It's a yellow V left to the endpoint URL dropdown. Variables are entered as JSON:

{
  "nameOfVariable": "value",
  "nameOfVariableForInputObject": {
    "inputValue": "input value,
    "listValue": ["item1", "item2"]
  }
}

There is an example at https://graphql.org/learn/queries/#variables which shows how this comes together.

[vepanimas]

I think we can rework the variable editor in the next releases, it's a bit confusing now. It should have the same UX as GraphiQL with variables in a separate collapsible tab.