Uncaught Error: Mode graphql failed to advance stream.

[darinallen]

I am trying to use graphiql with a gatsby project and I am experiencing the same issue described in #163. As the author of that issue wrote, I can't type anything into the editor. The editor space is just blank. When looking at the developer tools I see:

Uncaught Error: Mode graphql failed to advance stream.

I've tried clearing the local storage, and that doesn't do anything. I believe this issue originated when I accidentally hit option-space instead of ctrl-space, which I've seen reported as an issue with another plugin:

JetBrains/js-graphql-intellij-plugin#33

[darinallen]

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.

[edevil]

Same problem here.

[benjie]

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

[benjie]

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

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

[robinmetral]

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

[SebastienTainon]

After running into this issue a few times, I've just figured out a way to reproduce it:

In the GraphQL query editor, do Alt Gr + Space (or Option + Space): this will trigger this issue.

I hope it will help fix it, that's pretty annoying when you do it without making attention...

[andr11111]

On Mac OS this can be reproduced by pressing Shift + Option + Space

[yboulkaid]

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.

[acao]

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

[acao]

good news! 0.13.2 has been released to npm. 0.13.1 contained this fix, however we decided to just publish 0.13.2 instead. can you confirm that this new version fixes the issue?

[robinmetral]

Great news! Personally I'll be waiting until gatsby-graphiql-explorer updates its dependency 🙂

[robinmetral]

Hey @acao, unfortunately I think 0.13.2 doesn't fix the issue when used in gatsby-graphiql-explorer, cf. gatsbyjs/gatsby#15021. Or would this be another issue? Would you mind taking a look?

[acao]

@robinmetral ill take a look tonight

[acao]

i did a manual pass/no pass with this bugfix PR before, so i remember seeing the issue before, however I cannot reproduce in master yet. installing the latest gatbsy cli now to give your case a try and see if i cant figure out whats up!

[acao]

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?

[robinmetral]

Let me take a look tonight @acao (ECT) 🙂

[robinmetral]

@acao I just replicated on Ubuntu, Firefox 67 and Chrome 67.

Could this be linked to the OS? It would be interesting to see if this happens for others as well, or just for me 😛

[acao]

possibly? i was able to recreate this original issue on this same OS (OSX) in firefox beforehand. are you sure you are installing the latest version of gatsby CLI with that command?

[acao]

@robinmetral can you duplicate the bug here: https://graphiql-test.netlify.com/?
This url will always show the latest master build of graphiql

[acao]

ok @robinmetral so i've now been able to reproduce the bug it in the gatsby editor, but cannot reproduce it from the master build. can you confirm that Shift + Option + Space works properly for you at that url as well? looking into it...

[acao]

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?

[robinmetral]

@robinmetral can you duplicate the bug here: https://graphiql-test.netlify.com/?

Yes, I've reproduced it there as well 😕

Shortcuts recap

🐛 is the bug
✔️ means the GraphiQL dropdown opens as expected

	Ubuntu/Firefox	MacOS/Firefox
Command + Space	✔️	MacOS shortcut (Spotlight)
Control + Space	Ubuntu shortcut (keyboard switch)	✔️
Alt/Option Right + Space	🐛	✔️
Alt/Option Left + Space	Ubuntu shortcut (window menu)	✔️

(let me know if you experience something else!)

[acao]

@robinmetral this is innacurate because i was able to reproduce the bug in OSX but only while using the gatsby dist, see above.
once i had cleared my localstorage and opened the netlify link, the bug went away (the bug persisted on netlify if i didnt clear my local storage)
the gatsby graphiql package has an outdated bundle of graphiql. please read the above comment. it needs to be updated to include 0.13.2. The above steps prove that it is not shipping with the correct version of graphiql

[robinmetral]

Thanks @acao for investigating of course! I'll try to make sure the right version is installed at Gatsby, and this will most likely fix it for OSX users.

Unfortunately I do still reproduce the issue on Ubuntu/Firefox on the Netlify link, in a provate window with a cleared localStorage.

[benjie]

@robinmetral I'm now on Ubuntu (KDE), I've tried reproducing the bug on netlify using AltGr+space (where AltGr is the right alt key) and it just outputs a regular space character. I'm on an Apple keyboard using the GB layout, what's the keymap and key combo that's giving you the issue? (And is it still happening?)

[robinmetral]

Hey @benjie, yes still getting it here on Ubuntu. I'm also pressing AltGr + space, where AltGr is the right Alt key on my Apple fr-CH keyboard.

The combination outputs to %C2%A0 in the URL query string. For example this query string fails:

%7B%0A%20%20allFilms%20%7B%0A%20%20%20%20title%C2%A0%0A%20%20%7D%0A%7D (test it)

But remove %C2%A0 and it works:

%7B%0A%20%20allFilms%20%7B%0A%20%20%20%20title%0A%20%20%7D%0A%7D%0A (test it)

Is the first query string also failing on your end?

I'm aware this is an edge case. Thank you for looking into it!

[benjie]

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.

[benjie]

Taking a look now.

[benjie]

This should be fixed in #932

[robinmetral]

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

[acao]

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