Having trouble getting this to work

[megamaddu]

I can't tell if the plugin isn't loading or VSCode isn't picking up the completion or if my schema json is invalid. Could you possibly point me in the right direction for debugging this?

[Lenne231]

I have the same problem.

VS Code 1.12.2
TypeScript 2.3.2

Is there a repository i can clone that should work?

[xealot]

Same same, completely non-functional as far as I can tell and no debug output of any kind.

[Quramy]

Hi guys.

Is there a repository i can clone that should work?

You can check the operation with a sample project :

$ git clone https://github.com/Quramy/ts-graphql-plugin.git
$ cd ts-graphql-plugin
$ npm install # or yarn install
$ cd e2e/project-fixture
$ code .

And open main.ts, edit as the following :

// it's a dummy tag func
function gql(...args: any[]): any {}

const query = gql`
`;

The above code is TypeScript valid, but invalid GraphQL query. If the plugin works, an error should be displayed at VSC's problem window:

`file: 'file:///Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/main.ts'
severity: 'Error'
message: 'Syntax Error GraphQL (1:1) Unexpected <EOF>'
at: '5,19'
source: 'ts'

Could you possibly point me in the right direction for debugging this?

Turn TSServer's log option on via:

export TSS_LOG="-file tsserver.log -level verbose"

This environment variable allows to output debug log. And you can view it with tail -f tsserver.log .

If the plugin works, the following messages are printed out at tsserver.log :

:
Info 14   ts-graphql-plugin config: {"name":"../../../lib","schema":"schema.json","tag":"gql"}
Info 15   Read schema from /Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/schema.json
:

[Lenne231]

I had to run npm run compile but now it works and i get graphql errors displayed at VSC's problem window.

Code completion doesn't work, any idea what could prevent that? There doesn't seem to be a corresponding error in tsserver.log.

It would be nice if each log entry had a ts-graphql-plugin prefix.

[Quramy]

Thanks for your feedback!

Sorry, I've missed writing about compile..

As you said, adding plugin prefix to log is a nice idea!

Code completion doesn't work, any idea what could

If you never mind, please give me your tsserver.log? If it's too large to put onto this comment, send it to my email address:)

[Quramy]

I captured tsserver.log in my local env (and added prefix to log entries) :

:
Info 8    request: {"seq":2,"type":"request","command":"open","arguments":{"file":"/Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/main.ts","fileContent":"// it's a dummy tag func\nfunction gql(...args: any[]): any {}\n\nconst query = gql`\n\n`;","scriptKindName":"TS","projectRootPath":"/Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture"}}
Info 9    Search path: /Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture
Info 10   Config file name: /Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/tsconfig.json
Info 11   Loading ../../../lib from /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js/../../.. (resolved to /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/node_modules)
Info 12   Failed to load module: {}
Info 13   Loading ../../../lib from  (resolved to /Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/node_modules)
Info 14   [ts-graphql-plugin] config: {"name":"../../../lib","schema":"schema.json","tag":"gql"}
Info 15   [ts-graphql-plugin] Read schema from /Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/schema.json
:
Info 30   request: {"seq":4,"type":"request","command":"geterr","arguments":{"delay":0,"files":["/Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/main.ts"]}}
Perf 31   4::geterr: async elapsed time (in milliseconds) 1.4237
Info 32   event: {"seq":0,"type":"event","event":"syntaxDiag","body":{"file":"/Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/main.ts","diagnostics":[]}}
Info 33   event: {"seq":0,"type":"event","event":"semanticDiag","body":{"file":"/Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/main.ts","diagnostics":[{"start":{"line":6,"offset":1},"end":{"line":6,"offset":1},"text":"Syntax Error GraphQL request (3:1) Unexpected <EOF>","code":9999,"category":"error"}]}}
Info 34   event: {"seq":0,"type":"event","event":"requestCompleted","body":{"request_seq":4}}
Info 35   request: {"seq":5,"type":"request","command":"completions","arguments":{"file":"/Users/yosuke/workspaces/javascript/ts-language-service-plugins/ts-graphql-plugin/e2e/project-fixture/main.ts","line":5,"offset":1}}
Info 36   [ts-graphql-plugin] Search text: "

" at 2 position
Info 37   [ts-graphql-plugin] [{"label":"query"},{"label":"mutation"},{"label":"subscription"},{"label":"fragment"},{"label":"{"}]
Perf 38   5::completions: elapsed time (in milliseconds) 2.7600
Info 39   response: {"seq":0,"type":"response","command":"completions","request_seq":5,"success":true,"body":[{"name":"fragment","kind":"unknown","kindModifiers":"declare","sortText":"0"},{"name":"mutation","kind":"unknown","kindModifiers":"declare","sortText":"0"},{"name":"query","kind":"unknown","kindModifiers":"declare","sortText":"0"},{"name":"subscription","kind":"unknown","kindModifiers":"declare","sortText":"0"},{"name":"{","kind":"unknown","kindModifiers":"declare","sortText":"0"}]}
Info 40   Exiting...

The line Info 35 stands for the completion request ( | is the caret VSC)

// it's a dummy tag func
function gql(...args: any[]): any {}

const query = gql`
| 
`;

When this plugin searches completion candidates, it logs Search text (the line Info 36) and logs the found candidates(the line Info 37). In other words if your log does not have search text` entry, there might be a bug.

[Lenne231]

Thanks! I did a fresh git clone and now code completion works as well.

[felixfbecker]

I can't get it to work either.

[ntziolis]

Same here, cant get this to work, fresh clone, npm install, npm run compile , checked project fixtures maints but no highlighting, and no error in tsc console. I disabled all other grapql related extensions that i had as well as any other prettyfiers. Im happy to invest the time to fix and document this but needs some guidance. Anyone?

[frederickfogerty]

Hey @Quramy. I've followed all the steps in this comment but nothing seems to be logged to tsserver.log. Here's a gist of my log: https://gist.github.com/frederickfogerty/dad117a495ec26ab57c66d2b116ff101

Thanks for all your work you've put into this!

Typescript v2.4.2
Code v1.17.2
Mac OS

[frederickfogerty]

I've managed to make this work from the test project by ensuring I was using the local typescript installation from VS Code. I accomplished this by adding the file e2e/project-fixture/.vscode/settings.json. The contents were:

{
	"typescript.tsdk": "../../node_modules/typescript/lib"
}

I then opened Code from e2e/project-fixture with code ..

From the command palette, I selected "Typescript: Select Typescript version" and selected "Use Workspace Version". I then restarted the TS Server and it worked! 🎉

@felixfbecker @ntziolis this may solve your issues...

[ntziolis]

@frederickfogerty Nope, sadly still same issue. I also tried the other sample project: https://github.com/Quramy/ionic-apollo-simple-app. Same result. Are you guys on Linux/Mac/Windows ?

[frederickfogerty]

@ntziolis I'm on a Mac

[ntziolis]

@frederickfogerty THX! I can now confirm that this plugin works when adding the typscript sdk path. Still trying to figure out how to migrate this to the latest version of typescript. If anyone has pointers

[alexandru-calinoiu]

This does not work for me on typescript 2.6.1 and vs code 1.18.1

I get the following output on the e2e sample project from here #8 (comment)

Info 229  [19:59:20.327] request:
    {"seq":20,"type":"request","command":"change","arguments":{"file":"/home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/main.ts","line":4,"offset":1,"endLine":4,"endOffset":1,"insertString":"|"}}
Perf 230  [19:59:20.329] 20::change: async elapsed time (in milliseconds) 1.6832
Info 231  [19:59:20.551] request:
    {"seq":21,"type":"request","command":"getApplicableRefactors","arguments":{"file":"/home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/main.ts","startLine":4,"startOffset":2,"endLine":4,"endOffset":2}}
Info 232  [19:59:20.552] Starting updateGraphWorker: Project: /home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/tsconfig.json
Info 233  [19:59:20.561] Finishing updateGraphWorker: Project: /home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/tsconfig.json structureChanged: false Elapsed: 9ms
Perf 234  [19:59:20.562] 21::getApplicableRefactors: elapsed time (in milliseconds) 10.8137
Info 235  [19:59:20.562] response:
    {"seq":0,"type":"response","command":"getApplicableRefactors","request_seq":21,"success":true,"body":[]}
Info 236  [19:59:20.626] request:
    {"seq":22,"type":"request","command":"geterr","arguments":{"delay":0,"files":["/home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/main.ts"]}}
Perf 237  [19:59:20.627] 22::geterr: async elapsed time (in milliseconds) 0.8299
Info 238  [19:59:20.628] Starting updateGraphWorker: Project: /home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/tsconfig.json
Info 239  [19:59:20.628] Finishing updateGraphWorker: Project: /home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/tsconfig.json structureChanged: false Elapsed: 0ms
Info 240  [19:59:20.628] event:
    {"seq":0,"type":"event","event":"syntaxDiag","body":{"file":"/home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/main.ts","diagnostics":[]}}
Info 241  [19:59:20.629] Starting updateGraphWorker: Project: /home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/tsconfig.json
Info 242  [19:59:20.629] Finishing updateGraphWorker: Project: /home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/tsconfig.json structureChanged: false Elapsed: 0ms
Info 243  [19:59:20.635] event:
    {"seq":0,"type":"event","event":"semanticDiag","body":{"file":"/home/calin/Playground/ts-graphql-plugin/e2e/project-fixture/main.ts","diagnostics":[]}}
Info 244  [19:59:20.637] event:
    {"seq":0,"type":"event","event":"requestCompleted","body":{"request_seq":22}}

And no lint errors or anything showing up in vscode

[janbaykara]

"plugins": [
      {
        "name": "ts-graphql-plugin",
        "schema": "./src/schema/schema.json",
        "tag": "gql"
      }
]

Tried with Typescript 2.8 and 2.91 on VSCode 1.23.1

I'm getting linting errors for generic syntax, but getting no completion suggestions or schema-specific linting. I'm not sure what I'm doing wrong.