Gatsby: GraphiQL Query Variables are reset whenever query is updated

[lukebennett88]

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 

[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!

[lukebennett88]

Thanks so much @LekoArts and @acao 😊

[acao]

Thanks for tagging me! Looking into it now.

First step, I'll see if I can reproduce it here in our latest master branch, without graphiql explorer:

https://graphiql-test.netlify.app/

if it is a graphiql explorer issue, I may need to check in with the onegraph folks

[acao]

it looks it may be an issue with graphiql-explorer, or with our implementation at gatsby - @sgrove heads up, I'll try and isolate the issue and open a bug here shortly

[acao]

can also confirm, was able to reproduce this with another theme, using different query fields, using gatsby 2.20.35

[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

[ajscholz]

I'm going to show my complete ignorance here, but where exactly would I make the change listed above?

[lukebennett88]

Hey @ajscholz, this fix has been merged into Gatsby now, so no need, just update to the latest version.