[SOLVED] GraphQL query variables UI disabled?

App Building
1

I'm trying to write a GraphQL query with a variable. My query looks something like:

{
  getAccountsForUser(userId: $userId) {
  ...

If I hover over $userId, I get a tooltip that says "Variable "$userId" is not defined." However, if I scroll down below the query box, the boxes next to the "Variables" heading are greyed out and disabled, like it didn't detect the variable in the query.

I've tried saving the query, reloading the page, using the query in a different app, but the Variables section is always disabled. If I replace the variable in the query with a hardcoded string that I know works, the query runs fine and returns results.

Is this a bug?

2

I figured it out. To add variables to a GraphQL query, you have to declare them at the top of your query, like this:

query getAccountsForUser(userId: String!)
{
  getAccountsForUser(userId: $userId) {
  ...

The GraphQL documentation doesn't say this anywhere; I had to look at one of the GitHub example apps to figure this out. I suggest adding an explicit example of a query with variables in the GraphQL docs.

As an aside, the GraphQL editor uses Ctrl+Space to show autocompletions, but that's a common hotkey for third-party Alfred-style app launchers in Linux and Windows (Launchy, uLauncher, etc.). It would be like using Cmd+Space in MacOS. I suggest changing the shortcut to Shift+Space.