Not getting autocomplete in `gql` literals

[graphql]

Not getting autocomplete in `gql` literals

[lirbank]

I have the same problem. Syntax validation and autocomplete works like a charm in .graphql files but not in gql literals .ts/.tsx files.

• I use the regular graphql-tag NPM package
• VSCode Version 1.24.1 (1.24.1)
• TypeScript is 2.9.1

.graphqlconfig:

{
  "schemaPath":  "client/src/schema.json",
  "includes": ["**/*.{graphql,ts,tsx}"],
  "extensions": {
    "endpoints": {
      "dev": "http://localhost:4000/graphql"
    }
  }
}

[intellix]

Other problems:

1) GraphQL schema parse errors are hidden

Used graphql-cli to download a schema: https://github.com/graphql-cli/graphql-cli
Which downloaded graphql: 0.12.0 comment syntax like:

"""
Some comment
"""
type { ... }

But locally our frontend is still using graphql: 0.11.0 so in the logs the errors were talking broken syntax but inside the IDE nothing happens and there's no indication as to why.

2) It only works when I manually install @divyenduz/ts-graphql-plugin and add it to my tsconfig.json like so:

{
  "compilerOptions": {
    ...
    "plugins": [{
      "name": "@angular/language-service"
    }, {
      "name": "@dyiv/ts-graphql-plugin"
    }]
  }
}

The README.md for this project doesn't mention it at all and I've not seen any mention of it at all yet which makes me think this is either assumed knowledge or expected to work without?

3) Destructuring fragments breaks autocompletion:

export const fragment: DocumentNode = gql`
  fragment Sport on Game {
    vendorProperties
  }
`;

export const sportQuery: DocumentNode = gql`
  query Tickets($slug: String!) {
    game(slug: $slug) {
      ...Sport
    }
  }

  ${fragment}
`;

[intellix]

Was debugging this just now and I think I figured out why it wasn't working for me. When following the reproduction repository above it all works following the debug guide inside README.md:

Pressing Ctrl + Space after opening via code .:

Info 98   [12:49:46.501] request:
    {"seq":12,"type":"request","command":"occurrences","arguments":{"file":"/Users/dominicwatson/Sites/github/ntziolis/vscode-graphql-extension-gql-test/src/test.ts","line":4,"offset":2}}
Perf 99   [12:49:46.503] 12::occurrences: elapsed time (in milliseconds) 2.1379
Info 100  [12:49:46.503] response:
    {"seq":0,"type":"response","command":"occurrences","request_seq":12,"success":true,"body":[]}
Info 101  [12:49:47.815] request:
    {"seq":13,"type":"request","command":"completionInfo","arguments":{"file":"/Users/dominicwatson/Sites/github/ntziolis/vscode-graphql-extension-gql-test/src/test.ts","line":5,"offset":5,"includeExternalModuleExports":true,"includeInsertTextCompletions":true}}
Info 102  [12:49:47.816] [ts-graphql-plugin-log]: fileName: /Users/dominicwatson/Sites/github/ntziolis/vscode-graphql-extension-gql-test/src/test.ts
Info 103  [12:49:47.816] [ts-graphql-plugin-log]: currentDir: /Users/dominicwatson/Sites/github/ntziolis/vscode-graphql-extension-gql-test/src
Info 104  [12:49:47.817] [ts-graphql-plugin-log]: Found GraphQL Config for /Users/dominicwatson/Sites/github/ntziolis/vscode-graphql-extension-gql-test/src
Info 105  [12:49:47.819] [ts-graphql-plugin-log]: completionInfo: {"isGlobalCompletion":false,"isMemberCompletion":false,"isNewIdentifierLocation":false,"entries":[{"name":"posts","kind":"","kindModifiers":"gql","sortText":"gql"},{"name":"post","kind":"","kindModifiers":"gql","sortText":"gql"},{"name":"description","kind":"","kindModifiers":"gql","sortText":"gql"},{"name":"__schema","kind":"","kindModifiers":"gql","sortText":"gql"},{"name":"__type","kind":"","kindModifiers":"gql","sortText":"gql"}]}
Perf 106  [12:49:47.819] 13::completionInfo: elapsed time (in milliseconds) 3.4231
Info 107  [12:49:47.819] response:
    {"seq":0,"type":"response","command":"completionInfo","request_seq":13,"success":true,"body":{"isGlobalCompletion":false,"isMemberCompletion":false,"isNewIdentifierLocation":false,"entries":[{"name":"__schema","kind":"","kindModifiers":"gql","sortText":"gql"},{"name":"__type","kind":"","kindModifiers":"gql","sortText":"gql"},{"name":"description","kind":"","kindModifiers":"gql","sortText":"gql"},{"name":"post","kind":"","kindModifiers":"gql","sortText":"gql"},{"name":"posts","kind":"","kindModifiers":"gql","sortText":"gql"}]}}
Info 108  [12:49:47.823] request:
    {"seq":14,"type":"request","command":"completionEntryDetails","arguments":{"file":"/Users/dominicwatson/Sites/github/ntziolis/vscode-graphql-extension-gql-test/src/test.ts","line":5,"offset":5,"entryNames":["__schema"]}}
Perf 109  [12:49:47.823] 14::completionEntryDetails: elapsed time (in milliseconds) 0.4481
Info 110  [12:49:47.823] response:
    {"seq":0,"type":"response","command":"completionEntryDetails","request_seq":14,"success":true,"body":[]}

BUT! if you open VSC regularly (like with Spotlight search) then I get this when pressing Ctrl + Space:

Info 84   [12:45:50.247] request:
    {"seq":11,"type":"request","command":"completionInfo","arguments":{"file":"/Users/dominicwatson/Sites/github/ntziolis/vscode-graphql-extension-gql-test/src/test.ts","line":5,"offset":5,"includeExternalModuleExports":true,"includeInsertTextCompletions":true}}
Info 85   [12:45:50.249] [ts-graphql-plugin-log]: getCompletionsAtPosition: Unhandled exception: Error: EACCES: permission denied, scandir '/.DocumentRevisions-V100'
Perf 86   [12:45:50.249] 11::completionInfo: elapsed time (in milliseconds) 1.8531
Info 87   [12:45:50.249] response:
    {"seq":0,"type":"response","command":"completionInfo","request_seq":11,"success":true,"body":{"isGlobalCompletion":false,"isMemberCompletion":false,"isNewIdentifierLocation":false,"entries":[]}}

TL;DR:

Unhandled exception: Error: EACCES: permission denied, scandir '/.DocumentRevisions-V100'

It looks like it's trying to read files that it doesn't have access to which causes it to throw.

Although, I'm trying code . in my project that doesn't work, so there has to be more to it as well. I'll keep debugging and post my findings

[cburbank]

I'm also still having this issue on 0.1.4. Autocomplete works fine in .graphl files but not in gql tags.

[ntziolis]

@divyenduz Here you can find a complete reproduction:
https://github.com/ntziolis/vscode-graphql-extension-gql-test

The repo also contains 2 branches

• with vscode version of typescript
• with local typescript version and additions in tsconfig

In both cases we have the same result:

• full support for graphql files
• no linting, no autocompletion, but syntax highlighting working for gql tags

Debugging didn't reveal any additional outputs either (in vscode debug console). Only output was "GraphQL for vscode is now active" (or something similar)

System info:

• I have tried this repo on both Windows and MacOS with the exact same result, so this is NOT a windows only problem
• this does not apply to my machines alone but to all machines in our team (10+ machines)

@divyenduz Please let me know if you need to ginny pig for testing / debugging I'm available to resolve this as it slows down our team terribly not having this working.

[tomitrescak]

Hi, I cloned the demo repo: https://github.com/ntziolis/vscode-graphql-extension-gql-test and not even Go To Definition works with latest plugin. Is that a bug? [in .graphql files]

[EDIT] The weird bit is that I am getting autocomplete on queries, but no love for "Go To Defintion". I'm on MAC.

[TillFProtzek]

0.0.10 - same problem. I'm having proper highlighting in gql´ tags and .graphql files.
I have intellisense/autocomplete in .graphql files.
If I try to autocomplete in gql´ tags, it's loading a while and then just gives "no suggestions".

[SpaceK33z]

Having the same problem. I tried debugging the application as described in the readme but couldn't get any useful info.

I've made a quick repository demonstrating the issue: https://github.com/SpaceK33z/vscode-graphql-test

[TillFProtzek]

In my first quick test with 0.1.4 the problem is not solved.

[divyenduz]

For all where this is not working, please follow these steps and share the debug logs of the typescript server run by VSCode. Having debug logs would expedite the fix :)

[douglasward]

Here is the full log: https://gist.github.com/douglasward/bc44d55d3e25415a3153af411586b706

Ubuntu 16.04.5 LTS
Are there any other version or other details that you need? Thanks for looking into it!

[douglasward]

Version: 1.27.2
Commit: f46c4c469d6e6d8c46f268d1553c5dc4b475840f
Date: 2018-09-12T07:11:15.873Z
Electron: 2.0.7
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
Architecture: x64

Okay, many thanks in advance. :)

[brabeji]

@divyenduz Yup: #123 thank you!

[divyenduz]

It is possible to debug the logs of TS language service to follow what is exactly wrong with gql autocompletion using these steps.

I am investigating the same. Thanks.

[jhalborg]

I came here from another issue. I initially tested with gql tags, but I can't even get the plugin to work with separate query .graphql files.

My .graphqlconfig.json looks like this

{
  "projects": {
    "APPNAME": {
      "schemaPath": "schema.graphql",
      "includes": ["**/*.{graphql,ts,tsx}"],
      "extensions": {
        "endpoints": {
          "dev": "http://localhost:4000/graphql"
        }
      }
    }
  }
}

and each keystroke in a .graphql file gives the following erros in the output pane:

[Error - 16:47:02] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: Cannot read property 'projectName' of undefined
  Code: -32603 
ZEBRA 1: undefined undefined
(node:21896) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 61): TypeError: Cannot read property 'schemaPath' of undefined

[divyenduz]

@jhalborg : Can you please update to 0.0.9 and would it be possible for you to share code where it is failing in form of a git repository?

Also, I would suggest creating a separate issue "Extension not working with .json graphql config".

Thanks!

[jhalborg]

@divyenduz - Roger. I tried upgrading to 0.0.9, restarted VS Code and got new errors. I changed the config to a similar .yml config as well.

projects:
  app:
    schemaPath: ./schema.graphql
    includes: [
      "includes": ["**/*.{graphql,ts,tsx}"],
    ]
    extensions:
      endpoints:
        default: http://localhost:4000/graphql
        dev: http://localhost:4000/graphql

Typing a bit into a .graphql file produces the following output:

ZEBRA 1: undefined undefined
(node:28885) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: glob.startsWith is not a function
(node:28885) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[Error - 09:51:41] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: glob.startsWith is not a function
  Code: -32603 
[Error - 09:51:41] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: glob.startsWith is not a function
  Code: -32603 
[Error - 09:51:41] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: glob.startsWith is not a function
  Code: -32603 
[Error - 09:51:41] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: glob.startsWith is not a function
  Code: -32603 
[Error - 09:51:41] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: glob.startsWith is not a function
  Code: -32603 
[Error - 09:51:41] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: glob.startsWith is not a function
  Code: -32603 
[Error - 09:51:41] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: glob.startsWith is not a function
  Code: -32603 
[Error - 09:51:41] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: glob.startsWith is not a function
  Code: -32603 
ZEBRA 1: undefined undefined
(node:28885) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 12): TypeError: glob.startsWith is not a function
ZEBRA 1: undefined undefined
(node:28885) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 14): TypeError: glob.startsWith is not a function
ZEBRA 1: undefined undefined
(node:28885) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 16): TypeError: glob.startsWith is not a function
[Error - 09:52:01] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: glob.startsWith is not a function
  Code: -32603 

EDIT: Sent you a mail (to the mail in your Github profile) with a copy of the repo for reproduction

[nilshartmann]

I had the same problem (intellisense works in .gql files, but not using the gql tag)

After switching to the workspace version of TypeScript (as described here: https://github.com/prismagraphql/vscode-graphql#usage) it works!

Note that in my vscode workspace, my node_modules folder is not at the root level, may be that causes problems when using the built-in TypeScript?

My workspace structure:

 graphql-example/  <-- This is the folder, I open in VS Code
     backend/
         (no javascript/typescript here)
     frontend/
         node_modules/
    .graphqlconfig <-- direct inside the graphql-example "root" folder

[ntziolis]

@divyenduz Can you confirm that the demo repository now works with this fix? Do you need us to test it on different configurations?

[douglasward]

Why is this issue closed if it still isn't fixed? Or am I missing something?

[douglasward]

These are the logs from my project following those steps:

Info 31   [16:30:36.860] [ts-graphql-plugin-log]: create function called
Info 2168 [16:30:52.966] [ts-graphql-plugin-log]: fileName: /graphql/events/getEvents.query.ts
Info 2169 [16:30:52.966] [ts-graphql-plugin-log]: currentDir: /graphql/events
Info 2170 [16:30:52.966] [ts-graphql-plugin-log]: Found GraphQL Config for /graphql/events
Info 2171 [16:30:52.967] [ts-graphql-plugin-log]: getSemanticDiagnostics: Unhandled exception: TypeError: glob.startsWith is not a function

[divyenduz]

Thanks! Is this the full log? Can you please share the whole chunk if possible, thanks :)

Also, please share some details about your OS like version, VSCode version.

[divyenduz]

I would also need the version of your VSCode Editor and that would be all. I will take a look into this soon (in 1-2 weeks hopefully). Thanks! :)

[taylorgoolsby]

vscode version: Version 1.28.1 (1.28.1)
commit: 3368db6750222d319c851f6d90eb619d886e08f5

I also have this problem, but autocompletion is also not working for .graphql files as well as gql tags. Syntax highlighting is working, but there's not autocompletion.

eslint-plugin-graphql with the vscode eslint extension is correctly red-lining bad fields. So my config is correct.

Also, I'm not using typescript. I have disabled typescript language features.

[divyenduz]

Please notify me via a comment here if this issue still exists, I will reopen the issue.

[brabeji]

@divyenduz The intellisense in gql tagged templates stops working when a fragment is inserted:

export const MyQueryDocument = gql`
  ${AFragment}

  query MyQuery {
    # no intellisense here
  }
`;

[divyenduz]

@brabeji : Thanks for reporting this, I think this was never implemented. Can you please create a new issue for that one? Provided that intellisense works when there are no fragments?