Apollo-tooling: [apollo-vscode] Autocomplete does not work with remote endpoint or local schema

[klemenoslaj]

I am trying since some hours to configure Apollo GraphQL VSCode plugin without any success.
The only thing I get out of it is validation against the schema, and that only for the very first time after the editor reload.

Configuration examples:

Remote endpoint

module.exports = {
  client: {
    service: {
      name: 'my-project',
      url: 'http://localhost:4000/graphql',
    },
    includes: ['./project/**/*.graphql'],
  },
};

Local schema

module.exports = {
  client: {
    service: {
      name: 'my-project',
      localSchemaFile: 'path/to/schema.json'
    },
    includes: ['./project/**/*.graphql'],
  },
};

I tried to look at the debug output with verbose option and one thing that I noticed is that result is always empty (like []). I am running whole Apollo stack on the latest versions.

If it helps I can as well post the whole verbose output.

[ManAnRuck]

i have the same issue 😢

[abhimanyuPathania]

Have you tried removing includes field from client config? For me it starts to work. But then we have to rely on Apollo looking for default extensions in default ./src directory.

[vadistic]

I could not make auto complete work with anything else than apollo engine (btw. I love this project. but the cynic in me starts to suspect it's by design^^), but for codegen setup - I've noticed that if excludes/includes glob does not include the file I've specified as localSchemaFile the cli starts to error out.

You can try this :)

[warmbowski]

See my comment on #690 for a possible solution to getting this working.

Briefly, you cannot start your includes globs with ./. It will break functionality.

[klemenoslaj]

@warmbowski I tried without ./ but still had the same issues :/

@vadistic That actually worked! If that is intended this for sure needs to land in documentation.
What is weird is that even remote schema starts to work now for me, which I cannot wrap my mind around at the moment.

I changed the includes and added excludes for node_modules:

    excludes: ['node_modules/**/*'],
    includes: ['**/*.ts'],

[trevor-scheer]

@klemenoslaj and others following along -
localSchemaFile is intended to be just one option for referencing a service, as is the remote endpoint configuration. These options shouldn't really be used in tandem (I'd have to dig into the code to know what behavior to expect when both are provided).

The docs do illustrate this, but I would love feedback if anyone would like to offer suggestions to improve our explanations here:
https://www.apollographql.com/docs/references/apollo-config.html#client-service

As a side note, excludes will leave out all node_modules by default 😄
https://www.apollographql.com/docs/references/apollo-config.html#client-excludes

[klemenoslaj]

@trevor-scheer I was never really using localSchemaFile and url together. I was trying to make the plugin to work with either of them separately.

With my latest comment I pointed out that the suggestion from @vadistic comment made the plugin work for me:

I've noticed that if excludes/includes glob does not include the file I've specified as localSchemaFile the cli starts to error out.

This makes my local schema work, however I do not have an idea why remote schema starts to work as well that way.

Nice! I read the docs over 3x and somehow missed that point 😇

As a side note, excludes will leave out all node_modules by default 😄

[warmbowski]

Looking at the code, I think if you don't specify a url, you will still get set with a default value of https://localhost:4000/graphql. So that seems to always be set to something, even when you don't specify it.

I use a localSchemaFile that is generated from the introspect of the url. So one tool needs to know the localSchemaFile setting, and another tool (codegen) needs to know the url to create that json file from the introspect query. I like having a centralized config for both tools, and not have to use cli flags unless I need to override.

[warmbowski]

@klemenoslaj I would still suggest you don't put ./ at the beginning of your includes. I'm pretty darn sure that breaks it. So you might be dealing with two problem variables at once. Taking out the ./ should fix one.

[klemenoslaj]

@klemenoslaj I would still suggest you don't put ./ at the beginning of your includes. I'm pretty darn sure that breaks it. So you might be dealing with two problem variables at once. Taking out the ./ should fix one.

Yep, following your suggestion I removed them even though it did not directly fix my problem 👍

[trevor-scheer]

@klemenoslaj that is interesting, and definitely unexpected. If you have a reproduction handy that you're able to share, that would save me quite a bit of trouble!

[klemenoslaj]

@trevor-scheer, I just tried to reproduce it and seems like I was just wrong or too hasty. Now url seems to be working with any includes configuration.

However, there still seems to be the problem with localSchemaFile, when actually schema file has to be captured by the includes otherwise it doesn't work, like @vadistic explained above his comment.

[JakeDawkins]

@klemenoslaj I would still suggest you don't put ./ at the beginning of your includes. I'm pretty darn sure that breaks it. So you might be dealing with two problem variables at once. Taking out the ./ should fix one.

For anyone following along with this, we had a bug with relative globs that should be fixed when #1007 gets merged/released.

[JakeDawkins]

@klemenoslaj can you give us a simple reproduction of this? I have a simple project (that you could fork to reproduce if you'd like) where I don't see that to be the case here.

That project's includes is only under the src dir, but the schema is still getting picked up by client:codegen

[klemenoslaj]

Hi @JakeDawkins, client:codegen works fine for me as well, that's not the problem.
The problem is that apollo-vscode plugin didn't give us any autosuggestions in GraphQL queries.

---

On your repo I had the same problem but it was fixed by removing ./ from the paths, which you mentioned will be fixed when #1007 is merged.

My conclusion is that in fact ./ was the root of the problem. For me changing the path to **/*.ts worked simply because it had no ./ as well.

From my point of view this issue can be closed.

[saostad]

it's still doesn't work!
if I use localSchemaFile the only place I have field autocomplete in my gql tagged template is in the src folder.
but because I am developing Next.js app there is no src folder.

[JakeDawkins]

@saostad you can use the includes option to control where the extension looks for your source. More here

[saostad]

@saostad you can use the includes option to control where the extension looks for your source. More here

maybe I didn't explain the problem correctly!
when I use localSchemaFile , includes doesn't work! the only place it works is in src folder even if I put other folders in includes config.

[JakeDawkins]

@saostad Ah, that’d definitely be an issue. Can you provide a simple reproduction or paste your config here?

[saostad]

because it didn't work I put my codes to src folder ta take advantage of autocomplete but it's easy to create a project with sample data. I will do it as soon as I can.
this is my current code:

module.exports = {
  client: {
    service: {
      name: "my-graphql-app",
      localSchemaFile:
        "../xxx/src/graphql/generated/schema.graphql"
    }
  }
};

[JakeDawkins]

What includes did you try using @saostad? It _may_ have something to do with the schema file being up a level ../ but I’d like to check