Add support for dart in vscode-dart

[venkatd]

We are working on improving graphql support for dart. vscode-apollo is the best plugin to provide syntax highlighting in vscode and we wouldn't want to create a separate plugin just to allow syntax highlighting in dart.

This would just be a matter of adding a new template syntax to vscode-apollo. We can use this as a reference implementation: https://github.com/apollographql/apollo-tooling/blob/master/packages/vscode-apollo/syntaxes/graphql.py.json

If the Apollo team is OK with this, I or someone on my team can submit a pull request with the additional syntax.

The syntax we would support will look like this:

var query = gql("""
                query GetCard(\$id:CardId!) {
                  card(id:\$id) {
                    id
                    name
                    completed
                }
                """);

[JakeDawkins]

I think adding syntax support would be valuable. I see there's an escape character \ in the snippet you pasted. We'd be willing to accept a PR for this, but we can't allow things that aren't spec-compliant like that \$. Is there any way around that?

Edit: or is $ a reserved character in dart strings?

[venkatd]

We can do the following (prefix with r for raw)

var query = gql(r"""
                query GetCard($id:CardId!) {
                  card(id:$id) {
                    id
                    name
                    completed
                }
                """);

Which avoids the need for escaping the $ sign.

[venkatd]

@JakeDawkins I've got it working in the PR but need some guidance on how to properly build and test the extension. I've currently patched the changes in directly to see that it all works. Who would be someone good to talk to about this?

Thanks!

[JakeDawkins]

I don't believe we have a test suite set up to test this kind of behavior, so it'd mostly be user tested by you and your team!

And I can help with getting it set up!

---

Clone and npm i in the project. Lerna should set up all the projects and set up a symlink between the vscode package and the node modules that are needed for building a VS Code extension.

To test the extension locally, open the repo in VS Code and go to the debug menu on the left

You should be able to run the extension in a development window by running the "Launch VS Code Extension" task. If you want to do anything more advanced, after running the first command, run the "Attach to TS Server" commmand which should connect a node debugger to the running extension and allow you to set breakpoints.

---

let me know if any of this doesn't work, or if I can help with anything!

[venkatd]

Hi @JakeDawkins I'm getting the following error when I follow those steps and run the extension:

For help, see: https://nodejs.org/en/docs/inspector
internal/modules/cjs/loader.js:586
    throw err;
    ^

Error: Cannot find module 'apollo-env'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:584:15)
    at Function.Module._load (internal/modules/cjs/loader.js:510:25)
    at Module.require (internal/modules/cjs/loader.js:640:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/venkat/code/apollo-tooling/packages/apollo-language-server/lib/server.js:3:1)
    at Object.<anonymous> (/Users/venkat/code/apollo-tooling/packages/apollo-language-server/lib/server.js:119:3)
    at Module._compile (internal/modules/cjs/loader.js:693:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:704:10)
    at Module.load (internal/modules/cjs/loader.js:602:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:541:12)
[Info  - 3:42:19 PM] Connection to server got closed. Server will restart.
Debugger listening on ws://127.0.0.1:6009/b4d2c356-c5c2-4914-bf74-6880423c20bf
For help, see: https://nodejs.org/en/docs/inspector
internal/modules/cjs/loader.js:586
    throw err;
    ^

Any idea why this might be the case? The package.json refers to apollo-env by relative path. But not sure if that has anything to do with it.

If I run ls node_modules/ in the vscode-apollo/ folder, I only see apollo-language-server listed under there.

[JakeDawkins]

Interesting 🤔 I just tried building and running your PR and it seemed to work for me. In the apollo-language-server folder inside that symlinked folder, do you see another node modules with apollo-server-env?

A couple things you could try are to run npm run clean followed by either npm i (if that works) or npm ci if not. Both should work, but in some envs I've seen problems with npm i. It may take a couple tries to get the project to build correctly.

[venkatd]

Ok looks like I have it running. For some reason, syntax highlighting doesn't seem to be working but everything else like code completion and inspection is working. (In my local patched version everything works perfectly.)

Dart:

Javascript:

If you run my branch against this (minimal) project, does the dart file have syntax highlighting and code completion just like the javascript and python files?
graphqltest.zip

[JakeDawkins]

I think I figured it out. I added a comment to the PR! We can chat further there for anything else :)

[comerc]

@venkatd I also see this bug: Dart is not syntax highlighting. Do you have solution?

• Apollo GraphQL v1.19.9
• apollo/2.33.10 darwin-x64 node-v16.14.0
• Flutter (Channel stable, 2.10.3, on macOS 12.2)
• VS Code (version 1.66.1)

When VSCode starts up, I see that it works. But after a minute, the highlighting turns off.