WIP: feat: field and value def autocomplete

[stonexer]

New Functionality

This PR introduces "show all completion values" for an empty input for input types and object types. Before this, completion only appeared on the first typed character.

Once a user types fieldName: ▍ they should see all available values, including custom scalars defined in the schema, input types and inline defined input types

Testing

Check out either the graphiql 1 or monaco examples below, and try some basic SDL cases to explore the new functionality in the above features.

[codecov[bot]]

Codecov Report

Merging #1758 (0f33d7a) into main (2d91916) will increase coverage by 0.19%. The diff coverage is 68.62%.

@@            Coverage Diff             @@
##             main    #1758      +/-   ##
==========================================
+ Coverage   65.70%   65.90%   +0.19%     
==========================================
  Files          85       86       +1     
  Lines        5106     5144      +38     
  Branches     1631     1640       +9     
==========================================
+ Hits         3355     3390      +35     
- Misses       1747     1750       +3     
  Partials        4        4              

Impacted Files	Coverage Δ
...ackages/graphiql-toolkit/src/create-fetcher/lib.ts	50.90% <20.00%> (-8.67%)	:arrow_down:
packages/graphiql/src/utility/HistoryStore.ts	62.26% <62.26%> (ø)
packages/graphiql/src/components/QueryHistory.tsx	73.91% <76.47%> (+6.69%)	:arrow_up:
...iql/src/components/DocExplorer/MarkdownContent.tsx	100.00% <100.00%> (ø)
packages/graphiql/src/components/GraphiQL.tsx	58.34% <100.00%> (+0.83%)	:arrow_up:
packages/graphiql/src/components/QueryEditor.tsx	63.96% <100.00%> (ø)
...ervice-interface/src/getAutocompleteSuggestions.ts	78.45% <100.00%> (+0.44%)	:arrow_up:
...hql-language-service-server/src/findGraphQLTags.ts	64.89% <100.00%> (+4.25%)	:arrow_up:
... and 2 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 65c03d4...0f33d7a. Read the comment docs.

[acao]

awesome work so far! really appreciate your help as always. works great for me with object type fields and input type fields.

would you like me to look into a way to make it so that the autocomplete can begin a space after the fieldName:, rather than immediately? we have the same issues where i improved this for argument. or while you're in there, feel free!

[stonexer]

would you like me to look into a way to make it so that the autocomplete can begin a space after the fieldName:, rather than immediately?

Sure, that's what I want too.

I noticed that in the typescript file, when I type ...

interface Author {
  name: string;
}

interface Book {
  author:  ...
}

I don't get an active suggestion after I type : or : with a space. But then if I trigger ctrl+space manually, I can also have the full suggestion.

The difference is that when I type the first letter here, like A, there is an active suggestion directly.

I think it would be nice to have a similar logic here.

[acao]

@stonexer that's so odd, because it works in graphiql and monaco-graphql:

when you say a typescript file, are you referring to vscode-graphql?

[stonexer]

@acao Haha，it's not a bug here. Actually I mean the experience of using monaco to edit typescript files.

[acao]

@imolorhe that is definitely something to consider! I disabled that once because a PR dropped coverage because of a refactor (I deleted so much redundant code with good coverage that it caused overall coverage to go down). I evaluate it on a case-by-case basis as a maintainer, but for this PR I think we should have additive coverage, though we're adding three cases.

I don't think this PR is ready myself because of the issue with spaces @stonexer and I discussed in discord, unfortunately we didn't surface that discussion here so let me summarize:

desired behavior for this PR:

autocompletion for variables should be triggered on : , non-breaking space included. ideally, the mode/ide implementation should be configured to advance the cursor the extra space automatically.

current behavior in this PR: autocomplete behavior is triggered immediately following a : character, however we want there to be an additional space. if the user adds a space after the : character, then the completion options vanish. this is essentially the opposite behaviour.

[imolorhe]

Okay got it. Will un-approve and wait for that fix then 😄

[stonexer]

autocompletion for variables should be triggered on : , non-breaking space included. ideally, the mode/ide implementation should be configured to advance the cursor the extra space automatically.

In https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql/src/languageFeatures.ts#L196

Are there other situations where we need ':' to trigger? Can we simply remove the ':' from them

[acao]

good question! we can experiment with that

[stonexer]

good question! we can experiment with that

Tried it, I think it's not bad

[acao]

this adjustment looks better for monaco editor, but it still doesn't fix the issue on the codemirror side. i wonder why? gonna keep looking into this!

[acao]

so sad i didn't merge this sooner! this is incredible

[acao]

@stonexer this is sooo close - maybe we can configure codemirror-graphql to handle the insertText param ourselves, since that's at this point only monaco specific?

[acao]

i would like to have this case covered, as I think it's one of the most important ones for the LSP. Many tools implement their own autocompletion hack on top of this to achieve it here

[acao]

@dwwoelfel this is another good place for the tokenizer

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 0f33d7a55b74b8064ce7cd3e126152c52032cba3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[linux-foundation-easycla[bot]]

The committers are authorized under a signed CLA.

• :white_check_mark: SToneX (70758436bbe39ad1f7c033230e22d8178c47630a, b91ba0fe558d78ea81e672eac7042377e383e24a, b15f5f47e4d8ee8bf7f31265c04e187081513d4c, fef04171741d1c09246e6935c95ee9ed75ca1dd9)

[stonexer]

@acao I'm back haha :), sorry for disappearing for a long time before for personal reasons. I added \s in AUTO_COMPLETE_AFTER_KEY, and suggestions are auto triggered on typing space. Could you help to have a review again?

[acao]

@stonexer so glad you are back! any help you can provide is always appreciated, no worries! definitely can review again soon, yes!

[stonexer]

Currently, the graphql schema in the context is derived from the parameters and does not contain the current input of the editor, so it looks like such a completion on types' field is not possible. A larger modification to onlineParser may be needed.

Referrence https://github.com/graphql/graphiql/issues/888#issuecomment-506372299, I did some experimentations on graphql schema(sdl) editor. I made a dumb parser with chevrotain(a powerful tool), and just implemented a little bit of language service (adding support for type name and inputType name completion). Here's the demo and the source code.

Maybe someday we can implement this in a better way. 😃

[acao]

I will check this out locally and see how it’s working! This is such a valuable feature

[acao]

@stonexer note to test with the monaco graphql mode, just run yarn start-monaco at the monorepo root :)

[acao]

@stonexer I'd love to revive this effort soon! it's so close!

[acao]

@stonexer I've been looking at chevrotain's grammar for graphql since last year, and it's enticing. Incredibly fault tolerant.

I think it's worth looking at replacing the language parser with this entirely moving forward. It would mean re-writing autocomplete and hover entirely, but it would be worth it