starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-25 08:45:58 +03:00

[GH-ISSUE #1827] Graphql Playground-like autocompletion #577

New issue

Closed

opened 2026-03-16 16:06:01 +03:00 by kerem · 14 comments

kerem commented

2026-03-16 16:06:01 +03:00

Owner

Originally created by @sawa-ko on GitHub (Sep 13, 2021).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1827

Is your feature request related to a problem? Please describe.
One of the great features of graphql is having a model, and it would be nice to be able to have autocomplete through that model.

Describe the solution you'd like
Have an autocomplete in the graphql query editor, as well as graphql playground.

Describe alternatives you've considered
To be looking at the documentation several times.

Additional context
No

Originally created by @sawa-ko on GitHub (Sep 13, 2021). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1827 **Is your feature request related to a problem? Please describe.** One of the great features of graphql is having a model, and it would be nice to be able to have autocomplete through that model. **Describe the solution you'd like** Have an autocomplete in the graphql query editor, as well as graphql playground. **Describe alternatives you've considered** To be looking at the documentation several times. **Additional context** No

kerem

2026-03-16 16:06:01 +03:00

closed this issue
added the
feature

good first issue

wip

hacktoberfest
labels

kerem commented

2026-03-16 16:06:17 +03:00

Author

Owner

@liyasthomas commented on GitHub (Sep 13, 2021):

Hi @kaname-png thanks for raising the feature request. We've been working hard on removing the current editor package and replacing it with a more robust one (codemirror) which supports auto-complete, linting, and other generic features. Please check out our beta deployment with autocomplete, lint and many more features.

Visit Hoppscotch beta: https://beta.hoppscotch.io/graphql
Connect GraphQL endpoint
Type in your query. Press Ctrl / Cmd + Space to open content aware suggestions.

Do let us know your feedbacks with the new editor. Thanks for your patience.

@liyasthomas commented on GitHub (Sep 13, 2021): Hi @kaname-png thanks for raising the feature request. We've been working hard on removing the current editor package and replacing it with a more robust one (codemirror) which supports auto-complete, linting, and other generic features. Please check out our beta deployment with autocomplete, lint and many more features. 1. Visit Hoppscotch beta: https://beta.hoppscotch.io/graphql 2. Connect GraphQL endpoint 3. Type in your query. Press <kbd>Ctrl / Cmd</kbd> + <kbd>Space</kbd> to open content aware suggestions. Do let us know your feedbacks with the new editor. Thanks for your patience.

kerem commented

2026-03-16 16:06:22 +03:00

Author

Owner

@sawa-ko commented on GitHub (Sep 13, 2021):

Hi @liyasthomas ,
I wonder if there is a way to make autocomplete available when typing and not just doing the key combination.

@sawa-ko commented on GitHub (Sep 13, 2021): Hi @liyasthomas , I wonder if there is a way to make autocomplete available when typing and not just doing the key combination.

kerem commented

2026-03-16 16:06:27 +03:00

Author

Owner

@liyasthomas commented on GitHub (Sep 13, 2021):

That's a relevant feature. Thank you.

@liyasthomas commented on GitHub (Sep 13, 2021): That's a relevant feature. Thank you.

kerem commented

2026-03-16 16:06:32 +03:00

Author

Owner

@sawa-ko commented on GitHub (Sep 13, 2021):

Cool, I hope you can implement it, it would be very useful.

@sawa-ko commented on GitHub (Sep 13, 2021): Cool, I hope you can implement it, it would be very useful.

kerem commented

2026-03-16 16:06:37 +03:00

Author

Owner

@bblumenwiese commented on GitHub (Oct 3, 2021):

@AndrewBastin Are you actively working on this? If not, I would like to pick this up as my first ticket :)

@bblumenwiese commented on GitHub (Oct 3, 2021): @AndrewBastin Are you actively working on this? If not, I would like to pick this up as my first ticket :)

kerem commented

2026-03-16 16:06:42 +03:00

Author

Owner

@liyasthomas commented on GitHub (Oct 3, 2021):

Hi @bblumenwiese, you can give this a try - assigning this to you. Do let us know if you got stuck.

@liyasthomas commented on GitHub (Oct 3, 2021): Hi @bblumenwiese, you can give this a try - assigning this to you. Do let us know if you got stuck.

kerem commented

2026-03-16 16:06:47 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Oct 3, 2021):

Wait, we do have this already 🤣 We had this for a while now 🤣

Just press "Connect" and the GraphQL Query Editor will lint (check for errors against the schema) as well as provide autocompletion (it is not proactive, you have to press Ctrl+Space to trigger it).

This issue totally slipped my radar, @kaname-png if this is what you were expecting, please do close this issue, else please elaborate.

cc: @liyasthomas @bblumenwiese

@AndrewBastin commented on GitHub (Oct 3, 2021): Wait, we do have this already 🤣 We had this for a while now 🤣 Just press "Connect" and the GraphQL Query Editor will lint (check for errors against the schema) as well as provide autocompletion (it is not proactive, you have to press Ctrl+Space to trigger it). This issue totally slipped my radar, @kaname-png if this is what you were expecting, please do close this issue, else please elaborate. cc: @liyasthomas @bblumenwiese

kerem commented

2026-03-16 16:06:52 +03:00

Author

Owner

@bblumenwiese commented on GitHub (Oct 3, 2021):

Hi @AndrewBastin , there was a conversation above by @kaname-png and @liyasthomas about making the autocomplete work while typing and not just when pressing the keyboard shortcut. So I wanted to implement this change :)

Especially as I normally have other stuff on cmd/ctrl+space shortcut on my mac (spotlight/language switching), I have an interest in implementing this part ;)

@bblumenwiese commented on GitHub (Oct 3, 2021): Hi @AndrewBastin , there was a conversation above by @kaname-png and @liyasthomas about making the autocomplete work while typing and not just when pressing the keyboard shortcut. So I wanted to implement this change :) Especially as I normally have other stuff on cmd/ctrl+space shortcut on my mac (spotlight/language switching), I have an interest in implementing this part ;)

kerem commented

2026-03-16 16:06:58 +03:00

Author

Owner

@bblumenwiese commented on GitHub (Oct 11, 2021):

Hey folks, I do have some problems trying to implement the autocompletion while typing, in combination with the library we are using ("CodeMirror). It seems to me like CodeMirror is supposed to react only to certain keys being pressed, not "any key". If anyone has an idea how to implement this, though, please speak up! :) (adding default in the switch statement did not work ...)

In the meantime, I have a suggestion: Would it already be an improvement if we use the "Tab" key for autocompletion like it is in IntelliJ, for example? Because then this seems to be better integrated with the rest of the application.

So I would implement it in a way that when the user hits "Tab" on the beginning of a line (only whitespace or empty before the cursor), it would add indentation as it was before, but if the user is in the middle of a word, it would show the autocompletion suggestions.

@liyasthomas @AndrewBastin Would that be an improvement?

@bblumenwiese commented on GitHub (Oct 11, 2021): Hey folks, I do have some problems trying to implement the autocompletion while typing, in combination with the library we are using ("CodeMirror). It seems to me like CodeMirror is supposed to react only to certain keys being pressed, not "any key". If anyone has an idea how to implement this, though, please speak up! :) (adding `default` in the switch statement did not work ...) In the meantime, I have a suggestion: Would it already be an improvement if we use the "Tab" key for autocompletion like it is in IntelliJ, for example? Because then this seems to be better integrated with the rest of the application. So I would implement it in a way that when the user hits "Tab" on the beginning of a line (only whitespace or empty before the cursor), it would add indentation as it was before, but if the user is in the middle of a word, it would show the autocompletion suggestions. @liyasthomas @AndrewBastin Would that be an improvement?

kerem commented

2026-03-16 16:07:03 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Oct 11, 2021):

I am not a big fan of Tab taking over that concern because it is already doing indentation.

I think a really good heuristic here will be to hook into a keydown event, check if the typed character is a letter and check if the cursor is in a word token, if so, trigger the completion ?

@AndrewBastin commented on GitHub (Oct 11, 2021): I am not a big fan of <kbd>Tab</kbd> taking over that concern because it is already doing indentation. I think a really good heuristic here will be to hook into a keydown event, check if the typed character is a letter and check if the cursor is in a word token, if so, trigger the completion ?

kerem commented

2026-03-16 16:07:08 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Oct 27, 2021):

@bblumenwiese any updates on this ?

@AndrewBastin commented on GitHub (Oct 27, 2021): @bblumenwiese any updates on this ?

kerem commented

2026-03-16 16:07:13 +03:00

Author

Owner

@bblumenwiese commented on GitHub (Oct 30, 2021):

Hey, unfortunately I am still stuck on this one. I have tried a bunch of things and have been trying to implement your idea @AndrewBastin but there are so many levels of keypress listeners: CodeMirror, Vue, "emit", keybindings.ts ... I don't really know where to hook in so that it will trigger the autocomplete being shown on a "normal" keypress - especially as the autocomplete should only be opened when being in the GraphQL code editor. And then how to trigger the autocomplete to be shown in the right context. That's the two things where I'm stuck. Any form of help that you can offer would be really great.

I should also mention that I'm still facing a couple of issues on my local setup somehow (typescript errors all over, e.g. in codemirror.ts). Never used pnpm before, maybe it has to do something with that. Also I'm not a typescript expert.

I would appreciate a second pair of eyes here. Happy to jump on a jitsi call or similar to close some gaps in my understanding on how the app is wired together.

@bblumenwiese commented on GitHub (Oct 30, 2021): Hey, unfortunately I am still stuck on this one. I have tried a bunch of things and have been trying to implement your idea @AndrewBastin but there are so many levels of keypress listeners: CodeMirror, Vue, "emit", keybindings.ts ... I don't really know where to hook in so that it will trigger the autocomplete being shown on a "normal" keypress - especially as the autocomplete should only be opened when being in the GraphQL code editor. And then how to trigger the autocomplete to be shown in the right context. That's the two things where I'm stuck. Any form of help that you can offer would be really great. I should also mention that I'm still facing a couple of issues on my local setup somehow (typescript errors all over, e.g. in codemirror.ts). Never used pnpm before, maybe it has to do something with that. Also I'm not a typescript expert. I would appreciate a second pair of eyes here. Happy to jump on a jitsi call or similar to close some gaps in my understanding on how the app is wired together.

kerem commented

2026-03-16 16:07:18 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Oct 30, 2021):

@bblumenwiese Sure, if you want my hands on help then you can ping me directly using the Hoppscotch Discord Server.

Also, as for codemirror keybindings, the other keybinding systems adjust to the Codemirror code. So for adding keybindings to codemirror, you only need to worry about the Codemirror composable, other keybinding systems won't be applicable.

About the errors, due to the current situation with us migrating slowly to Vue/Nuxt 3 and TypeScript, the errors and stuff are all over the place, the individual TypeScript files will be fine though, just issues with typings related to the templating system.

Thank you so much for your efforts and happy to help anytime!

@AndrewBastin commented on GitHub (Oct 30, 2021): @bblumenwiese Sure, if you want my hands on help then you can ping me directly using the Hoppscotch Discord Server. Also, as for codemirror keybindings, the other keybinding systems adjust to the Codemirror code. So for adding keybindings to codemirror, you only need to worry about the Codemirror composable, other keybinding systems won't be applicable. About the errors, due to the current situation with us migrating slowly to Vue/Nuxt 3 and TypeScript, the errors and stuff are all over the place, the individual TypeScript files will be fine though, just issues with typings related to the templating system. Thank you so much for your efforts and happy to help anytime!

kerem commented

2026-03-16 16:07:23 +03:00

Author

Owner

@liyasthomas commented on GitHub (Nov 15, 2021):

This has been implemented in github.com/hoppscotch/hoppscotch@76a3b35e9e, hence closing.

@liyasthomas commented on GitHub (Nov 15, 2021): This has been implemented in https://github.com/hoppscotch/hoppscotch/commit/76a3b35e9e024143c2da50d7701f09d317d36103, hence closing.