No code completion for graphql tag template, although execute query works

[iangregsondev]

Actual Behavior

I have the following but no code completion is listed

const IndexPage = () => {
  const { site } = useStaticQuery(
    graphql`
      query TestMe {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  )

I am in gatsby.

My schema is created correctly as far as I can see

this is my files .graphqlconfig.yml

projects:
  blog:
    schemaPath: "schema.graphql"
    extensions:
      endpoints:
        default: "http://localhost:3000/___graphql"

I exported my schema using graph-cli get schema..

Clicking on the "execute query" does work.

Expected Behavior

To be able to get code completion inside of the graphql template literal.

Any ideas what I could be doing wrong, I think i have followed the docs as I should.

[doomsower]

Same for me. Here's my config:

schema: ./services/backend/schema.graphql
documents: './services/admin/**/*.{ts,tsx}'
extensions:
  endpoints:
    default: http://localhost:3333/graphql

I've switched typescript version to workspace, installed @divyenduz/ts-graphql-plugin and added it to tsconfig.json, but it didn't help.

[benvp]

Has the same issue and have been struggling on this a bit. Your config looks not quite correct. As in the documentation, the config should be a .graphqlconfig.yml which is in your project root. My config looks like this:

This will use an introspection file for the schema and match graphql, gql, ts and tsx files.

schemaPath: "src/graphql/__generated__/schema.json"
includes: ["**/*.{graphql,gql,ts,tsx}"]

Also I installed @divyenduz/ts-graphql-plugin and added it to the tsconfig.json plugin section. After switching the VSCode TypeScript Version to the workspace version it started to work. Notice that you need to restart VSCode after that to make the language service plugin reload.

[dleavitt]

for the next person who finds this, what specifically fixed it for me was:

• Using schemaPath as the keyname rather than schema
• Pointing schemaPath to json introspection query results, rather than the .gql schema itself

Update

Apparently the file extension was part of the problem, switching from schema.gql to schema.graphql fixed it for me without needing the extra .json file.

Here's my .graphqlconfig.yml file in case it helps anyone:

schemaPath: "app/javascript/graphql/schema.graphql"
includes: ["app/javascript/**/*.{graphql,gql,ts,tsx}"]
extensions:
  endpoints:
    default: http://localhost:3000/graphql

[doomsower]

Could someone post full config?

I've dumped introspection result into ./services/backend/schema.json json, which looks like:

{
  "data": {
    "__schema": {
      "queryType": {
        "name": "Query"
      },
      "mutationType": {
        "name": "Mutation"
      },
      "subscriptionType": null,
      "types": [...],
      "directives": [...]
    }
  }
}

In workspace root, .graphqlconfig.yml file looks like:

schemaPath: 'services/backend/schema.json'
includes: ['**/*.{graphql,gql,ts,tsx}']

Base tsconfig.json contains plugin and other tconfigs extend it:

"compilerOptions": {
    "plugins": [
      {
        "name": "@divyenduz/ts-graphql-plugin"
      }
    ]
  }

When I open .ts file with gql template, GRAPQHL plugin indicator shows up in VSCode bottom bar, but autocompletion still doesn't work

[qhoekman]

I've got it to work but I noticed the Intellisense only works for JavaScript and not TypeScript. You can test this out by switching the language from your TypeScript file in the right-bottom corner to JavaScript.

The GraphQL language server output says:

Acquiring model 'intellisense-members' for javascript
Querying IntelliCode service for available models.
Cached model is up to date.

[robertherber]

Can't get the autocomplete to work either. Execute query works. Tried using "ts-graphql-plugin" and changing name to schemaPath to no avail. Haven't been able to find any errors in the logs either. Any ideas? Solutions or just where to look for the error would be highly appreciated! :)

[KurganskySergey]

Doesn't work for me either. Im using windows 10. watchman is installed and added to path $ watchman --version 20200501.140444.0

config file looks like this: .graphqlrc

schema: http://localhost:3000/graphql
documents: "src/**/*.gql"

[ghry5]

Having the same problem. It works fine with .gql, .graphql files aswell as gql/graphql tags in js files... but not in ts... Also tried the mentioned @divyenduz/ts-graphql-plugin and switching to workspace TS version + restart like @benvp without success.

    schemaPath: generated/schema.json
    includes: ["**/*.{graphql,gql,js,ts,tsx}"]

Any ideas?

[gillescoolen]

Same here, GraphQL is present in the status bar, but there's no autocompletion whatsoever. The 'Execute Query' button does show. My graphqlconfig. looks like this:

{
  "schemaPath": "schema.graphql"
}

I've got Watchman installed and the extension isn't throwing any errors.

[slaivyn]

Same here... It works for ".js" files but not ".tsx" ones. I ended up using this TS language service plugin for autocomplete: https://github.com/Quramy/ts-graphql-plugin

[acao]

y'all! glad to tell you i've been working on this last week. by upgrading the LSP server, we are gonna get a lot of nice new features including support for ts, jsx and tsx. only issue is that emmet html completions are polluting jsx/tsx completion lists, so once i get that sort issue figured out, it should be great!

just as an example of what it will provide - you'll be able to right click a fragment used in a tsx file, and peek definition :open_mouth:

[KurganskySergey]

y'all! glad to tell you i've been working on this last week. by upgrading the LSP server, we are gonna get a lot of nice new features including support for ts, jsx and tsx. only issue is that emmet html completions are polluting jsx/tsx completion lists, so once i get that sort issue figured out, it should be great!

just as an example of what it will provide - you'll be able to right click a fragment used in a tsx file, and peek definition 😮

If im not mistaken it would work without watchman which is great for windows users. Looking forward to it!

[acao]

indeed, one of the many important improvements, so y'all can expect a release by next week!

[acao]

https://github.com/prisma-labs/vscode-graphql/issues/181#issuecomment-672337523 here is a pre-release for testing, we will release to the prisma namespace once we've had enough people confirm the improvements are working and we don't have any major regressions!

[jgoux]

@acao Hello, I just tried the pre-release and I don't have aucompletion in my gql fragments in tsx files.

Here is my configuration :

schema: http://localhost:8080/v1/graphql
documents:
  - "./src/{components,pages}/**/*.tsx"
extensions:
  codegen:
    hooks:
      afterAllFileWrite:
        - yarn eslint --fix
    generates:
      ./src/generated/graphql/hooks.ts:
        documents: "./src/{components,pages}/**/*.tsx"
        plugins:
          - typescript
          - typescript-operations
          - typescript-urql
        config:
          scalars:
            timestamptz: string
            uuid: string
          namingConvention:
            transformUnderscore: true
          skipTypename: true
          withComponent: false
          withHooks: true
  endpoints:
    default: "http://localhost:8080/v1/graphql"

[acao]

what is the name of your config file?

[acao]

also, it should be endpoints.default.url

[acao]

are you using template tags like gql or graphql? what do you mean by gql/tsx files? how long after reload did you wait? takes longer than the ts language service to start usually

[jgoux]

Thanks for the quick answer @acao !

My config file is named graphql.config.yml, already used by graphql-codegen successfuly. I'm using a monorepo so the config file isn't at the root, maybe that's an issue?

Are you sure endpoints.default.url is required when having only the url? I thought it was an alternative syntax when we want to add more infos like the headers too. The Execute Query statement is printed and working above my queries with both syntaxes.

I'm using the template tag gql from graphql-tag. And I'm using TypeScript so all my files have the .tsx extension.

Here is what I got so far :

[acao]

@jgoux the extension only loads when it detects a graphql config file, so if its a monorepo you'll have to open the monorepo root. there isn't an easy way around that

in graphql-config@3, things work differently. endpoints config requires .url now

[jgoux]

@acao Apollo's vscode extension is working, even with their config file in my package's folder. So maybe there is a trick to make it works the same way here.

I confirm that putting the config at the root made it works! 💯

Do you think autocompleting spread fragments in query/mutation is doable? I guess you have some kind of big AST of all the parsed gql template string so you could propose the fragment Task_data here if it's compatible with the query's types?

The "jump to definition" feature is enabled as well, but it's showing the beginning of the file where I defined the fragment instead of the fragment definition itself.

[acao]

if the config is in your packages folder it should work fine!

fragment spread completion works fine. you just need to make sure the fragment is on the right type.

yes embedded graphql definitions have issues with offset, i was hoping to take care of that in a follow up. does it jump to schema definitions on ctrl click?

[jgoux]

@acao I meant my config is at ./packages/web/graphql.config.yml, it's not working if I put it there.

The fragment spread completion is not working for me as well, even if it's the right type.

On ctrl+click it doesn't jump to the schema definition but at the beginning of what was showed in the popup (so at the import * as React in my previous screenshot)

[acao]

@jgoux im asking about jump to definition for graphl input types from operations that are not in the same file, that are in the schema.

like this, but wit input types, using the cached schema file behind the scenes

[acao]

like this, it's the primary feature of this release!

this gif was made using the exact same extension i linked above

[jgoux]

@acao In my case I don't have the schema dumped into a file, I'm using the api endpoint directly. So the jump to definition (from a graphql template string to a schema) isn't working. This is what I get in the OUTPUT console :

8/12/2020, 9:04:39 PM [1] (pid: 29494) graphql-language-service-usage-logs: Error: ENOENT: no such file or directory, mkdir '/var/folders/vr/b32yycl13ylg3_sjwy88sp980000gn/T/graphql-language-service/clovis/projects/default/schema.graphql'

[Error - 9:04:39 PM] Request textDocument/definition failed.
  Message: Request textDocument/definition failed with message: Definition not found for GraphQL type task
  Code: -32603 

You said earlier that fragment spread is supposed to work, but even in your gif we can see that the autocompletion doesn't work. Or maybe I'm missing something. 😄

[acao]

the schema is supposed to be dumped to a temp file no matter what, that's one of the most important features of this new release! you'll see, i'll let folks know when the new insiders release is ready on the referenced issue, but it should update in your vscode in time anyways

[jgoux]

Oh ok I didn't understand that it wasn't released in the insider channel yet! If you want, I'd be happy to make a video call + screenshare with you if it can help!

[acao]

@jgoux thanks for offering! i'm chasing down the issue now that will prevent you from seeing this feature anyways. just need to fix how we are writing cache directories, i forgot to clear my own cache implementation! seeing a bunch of bugs now. bahaha!

[acao]

ok folks, try graphql.graphql-vscode-insiders 0.3.5 and see if you have graphql tag completion as an embedded language? i'm hearing a yes from others. if you have any feedback, we are doing all of that in #184

[acao]

ok! should be good to go with prisma.vscode-graphql@0.3.0 now!