GraphiQL Query Variables are reset whenever query is updated

Description

I’ve noticed that the Query Variable field is reset every time I update a GraphQL query in the GraphiQL IDE.

Steps to reproduce

This can be reproduced on gatsby-starter-blog:

gatsby new graphiql-test https://github.com/gatsbyjs/gatsby-starter-blog
cd graphiql-test
gatsby develop

Open up GraphiQL: http://localhost:8000/___graphql and enter the following query:

query NewBeginningsPost($title: String!) {
  markdownRemark(frontmatter: {title: {eq: $title}}) {
    frontmatter {
      title
    }
  }
}

In the Query Variable section, add the following:

{
  "title": "New Beginnings"
}

Now update the query either directly in the query field, or using the Explorer menu on the left-hand side.

Expected result

The query variable field should not change unless we update it ourselves.

Actual result

Environment

  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 3.1.0 - /usr/local/bin/fish
  Binaries:
    Node: 12.16.3 - ~/.config/nvm/12.16.3/bin/node
    Yarn: 1.22.4 - ~/.config/nvm/12.16.3/bin/yarn
    npm: 6.14.4 - ~/.config/nvm/12.16.3/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.138
    Edge: 81.0.416.77
    Safari: 13.1
  npmPackages:
    gatsby: ^2.21.37 => 2.21.37 
    gatsby-image: ^2.4.4 => 2.4.4 
    gatsby-plugin-feed: ^2.5.1 => 2.5.1 
    gatsby-plugin-google-analytics: ^2.3.1 => 2.3.1 
    gatsby-plugin-manifest: ^2.4.5 => 2.4.5 
    gatsby-plugin-offline: ^3.2.3 => 3.2.3 
    gatsby-plugin-react-helmet: ^3.3.1 => 3.3.1 
    gatsby-plugin-sharp: ^2.6.4 => 2.6.4 
    gatsby-plugin-typography: ^2.5.1 => 2.5.1 
    gatsby-remark-copy-linked-files: ^2.3.2 => 2.3.2 
    gatsby-remark-images: ^3.3.4 => 3.3.4 
    gatsby-remark-prismjs: ^3.5.1 => 3.5.1 
    gatsby-remark-responsive-iframe: ^2.4.2 => 2.4.2 
    gatsby-remark-smartypants: ^2.3.1 => 2.3.1 
    gatsby-source-filesystem: ^2.3.4 => 2.3.4 
    gatsby-transformer-remark: ^2.8.9 => 2.8.9 
    gatsby-transformer-sharp: ^2.5.2 => 2.5.2 

[acao]

found the bugfix!

it seems to have been introduced in #21158

i will create a PR, but the solution is as simple as changing

const DEFAULT_VARIABLES =
  parameters.variables ||
  (window.localStorage && window.localStorage.getItem(`graphiql:variables`)) ||
  null

to

const DEFAULT_VARIABLES =
  parameters.variables ||
  (window.localStorage && window.localStorage.getItem(`graphiql:variables`)) ||
  undefined

[LekoArts]

Can confirm this with your repro. I also see this behavior when I open/close the “Explorer” pane. @acao who works on GraphiQL will look into this. Thanks for the issue!