Query Variables pane in the GraphQL Explorer wipes contents unexpectedly

[QuintinWillison]

Code of Conduct

• [X] I have read and agree to the GitHub Docs project's Code of Conduct

What article on docs.github.com is affected?

https://docs.github.com/en/graphql/overview/explorer

What changes are you suggesting?

I was expecting that I could define a variable in the query pane and then use it in the query.

Both panes almost appear to be unaware of one another. Also, the Query Variables pane seems to randomly delete all the contents I put in there - reverting to empty object {}.

Additional information

Hovering over the red underline in the query pane shows the same message twice:

Variable "$org" is not defined.
Variable "$org" is not defined.

Hovering over the red underline in the query variables pane shows this message:

Variable "$org" does not appear in any GraphQL query.

If I replace $org in my query with "ably" (my starting point) then the query works.

[welcome[bot]]

Thanks for opening this issue. A GitHub docs team member should be by to give feedback soon. In the meantime, please check out the contributing guidelines.

[Kurt-von-Laven]

I have also experienced the variable pane repeatedly wiping its contents. This occurred whenever the query pane was edited, so I learned to make very certain that my query was correct before entering any variables. This substantially reduces the utility of the tool since it is intended to show real-time results as a query as modified. I was using the latest version of Chrome for Linux.

[QuintinWillison]

@Kurt-von-Laven it sounds like you got it working, at least. Would you be able to share a screen shot of it working as I find that very curious (I understand if you're unable to share). Also, if it adds any, I was also using latest version of Chrome, albeit on latest version of macOS (11.6).

[Kurt-von-Laven]

@QuintinWillison, I didn't notice this initially, so I'm glad you reached out. I believe there is an issue to be fixed by GitHub here as I mentioned above, but also the query in your screenshot is missing the function prototype. Here is a corrected version of the query that I tested keeping the variables pane as you had it:

query LabelsInUse($org: String!) {
  organization(login: $org) {
    repositories(privacy: PUBLIC, first: 2) {
      nodes {
        labels(first: 100) {
          nodes {
            name
          }
        }
      }
    }
  }
}

[QuintinWillison]

Thanks @Kurt-von-Laven ... I'm still learning / probing GraphQL so the need for this wasn't immediately obvious to me. As far as I can tell, in the GitHub docs, there isn't a concrete example of a query using variables. But then I may be looking in the wrong places or not looking hard enough.

As you state, however, there's still an issue with the variable pane wiping contents. Just now I got it to do it by pressing the 'Prettify' button after running my originally stated query with the fix you pointed me to. My query now looks like:

query LabelsInUse($org: String!) {
  organization(login: $org) {
    repositories(privacy: PUBLIC, first: 2) {
      nodes {
        labels(first: 100) {
          nodes {
            name
          }
        }
      }
    }
  }
}

[ramyaparimi]

@QuintinWillison Thanks so much for opening an issue! I'll triage this for the team to take a look :eyes:

[Kurt-von-Laven]

I highly recommend the GraphQL docs as some of the best software documentation I have ever encountered, and that has many interactive examples of queries with variables. Here is an example of a query with variables from the GitHub Docs. If there is a difference between our queries, I haven't spotted it.

[rachmari]

@QuintinWillison @Kurt-von-Laven thank you for reporting the issue with the GraphQL Explorer. I've opened an internal issue to fix this. @QuintinWillison could you let me know what browser and version you're seeing this in?

I'm able to reproduce the clearing of the query window when I click the explorer button. But I'm not able to reproduce it by clicking in the query window after I run a query.

[Kurt-von-Laven]

In the meantime until @QuintinWillison gets a chance to respond, I'm on Chrome 94.0.4606.54 for Linux. I can reproduce the clearing of the query variables by clicking in the query window before I run a query.

[QuintinWillison]

Sorry for late response, @rachmari - it's been a busy week!

I'm currently using Chrome 93.0.4577.82 (Official Build) (x86_64) on macOS 11.6 (20G165). Though, of course, when I reported this issue I was more than likely on earlier versions of both.

@Kurt-von-Laven thanks for your follow-up comment - in case it wasn't clear, the code I quoted in my comment is working ... so you're absolutely right, there is no difference between our queries now (thanks to you! 😄).

[rachmari]

Thank you @Kurt-von-Laven and @QuintinWillison. I'll add that information to our issue and I'm sorry for the inconvenience until this is fixed. 🙇‍♀️

[Kurt-von-Laven]

This issue doesn't appear to have been fixed.

[ramyaparimi]

Sorry about that!! Seems like the stale bot is a little wonky. I am reopening the issue 💖

[github-actions[bot]]

A stale label has been added to this issue becuase it has been open for 60 days with no activity. To keep this issue open, add a comment within 3 days.

[github-actions[bot]]

A stale label has been added to this issue becuase it has been open for 60 days with no activity. To keep this issue open, add a comment within 3 days.

[Kurt-von-Laven]

It looks like stale bot is ignoring the never-stale label?

[rachmari]

@Kurt-von-Laven thank you for your patience and for pointing this out! Stalebot is being a little overzealous. I've created a pull request to fix the issue here: https://github.com/github/docs/pull/16799.

[Kurt-von-Laven]

Thank you for opening that pull request, @rachmari!