graphiql: Uncaught Error: Mode graphql failed to advance stream.

This seems to happen when the data in localStorage cannot be restored. Unfortunately clearing localStorage and then reloading does not resolve it because GraphiQL writes to local storage when the page reloads.

I solved this in Chrome by:

1. Open DevTools
2. Go to Application > Local Storage > http://localhost (or whatever)
3. Press the “Clear All” button (🚫)
4. Chrome Menu > More Tools > Task Manager
5. Find the relevant tab and kill it (don’t give it a chance to write to localStorage)
6. Reload the killed page

Alternatively, run the following JS snippet and then reload the page:

localStorage.clear(); localStorage.setItem = () => {}

I was able to resolve this by manually setting query=test as a URL parameter. There is likely a better solution, but at least that is available as a workaround.

thanks for reporting this @yboulkaid the PR we merged for this has not been released yet, as we are still awaiting NPM credentials. I did confirm that this does fix this bug. so, graphiql 13.1 will fix this, once its actually released on NPM.

In the mean time, there is a release of dist files here, if that works for anyone: https://github.com/graphql/graphiql/releases/tag/v0.13.1

Thanks for investigating @benjie! Looking forward to the fix 🙂

This should be fixed in https://github.com/graphql/graphiql/pull/932

I ran into this issue on Firefox and neither the “killing the tab” nor the “localStorage.setItem” hacks worked. I finally managed to solve it by clearing localStorage, disabling javascript (through the built-in setting or by via an extension) and reloading the page.

@benjie @robinmetral thanks for seeing this through, if you find this bug, 0.14.0 is the fix!

Yeah; the first URL definitely fails with graphiql.js:5332 Uncaught Error: Mode graphql failed to advance stream. - we should be resilient against this even if it can’t be produced by my specific setup.

Potential sources of this issue:

• AltGr+space on certain keyboard layouts
• URL containing %C2%A0
• Copy/paste of query

Result of the issue:

• GraphQL query editor stops working
• GraphiQL saves the bad state to localStorage
• GraphiQL will never work again until localStorage is reset (e.g. just visiting https://graphiql-test.netlify.com/ will result in broken GraphiQL)

Due to disabling GraphiQL from then on (without intervention) I’d say this issue is quite severe.

a further update - the app.js bundle that i find in my node modules from the cli install shows a positive result for this (showing it contains ‘graphiql’): cat ./node_modules/gatsby-graphiql-explorer/app.js | grep 'Shift-Alt' cat ./node_modules/gatsby-graphiql-explorer/app.js | grep 'introspectionQuerySansSubscriptions' but not this: cat ./node_modules/gatsby-graphiql-explorer/app.js | grep 'Shift-Alt-Space' showing that it contains graphiql, but not the last release.

conversely, if i add graphiql@0.13.2 to my node modules and then grep it (yes all of the peer resolution warnings, gonna fix that in our monorepo this weekend): cat ./node_modules/graphiql/graphiql.js | grep 'Shift-Alt-Space' cat ./node_modules/graphiql/graphiql.min.js | grep 'Shift-Alt-Space' I get a positive result for this change. interesting to note though, the package.json of my installed gatsby-graphiql-explorer has graphiql 0.13.2 referenced, it’s just not there in its app.js, though the rest of it is

note that this was from a fresh gatsby cli install and creation following your example path in the the original ticket. so the issue seems to be with the bundled release of gatsby-graphiql-explorer?

I can’t replicate it with your steps in the issue either, firefox 67, chrome 75 😦( @robinmetral do you see it in an incognito window and/or with one last clearing of localstorage?

I’m regularly running into the same issue. @darinallen your dummy URL parameter was a quick and easy fix, thank you 👍🚀