graphiql doesn't make use of `variables` search param

Editing “Query Variables” in graphiql:

Updates the variables search param (for example https://711808k40x.sse.codesandbox.io/___graphql?variables={ “variablesFromParam”%3Atrue } ), but loading this url, doesn’t make use of passed variables and uses values stored in localStorage

We are missing variables prop in https://github.com/gatsbyjs/gatsby/blob/69ecf6a534b2be20e3b1ffe0b694ea677b68bb66/packages/gatsby-graphiql-explorer/src/app/app.js#L322-L330

Per graphiql documentation ( https://www.npmjs.com/package/graphiql ):

variables: an optional GraphQL string to use as the initial displayed query variables, if undefined is provided, the stored variables will be used.

Work to be done

Check how we set initial query: https://github.com/gatsbyjs/gatsby/blob/69ecf6a534b2be20e3b1ffe0b694ea677b68bb66/packages/gatsby-graphiql-explorer/src/app/app.js#L83-L91 and implement analogous logic for variables, and use that to pass variables prop to Graphiql element

[pieh]

That localstorage key is used internally by graphiql package - that’s how graphiql stores and restores variables when you refresh. We want to first use params from url, if those are not set, use localstorage and if that is not set use empty object or nothing

[dvrylc]

I have a version of this working, just wanted to check if @peaonunes is still working on it?

Also @pieh, seems like there’s a key graphiql:variables in localStorage, do you know where that’s set and/or used?