Unable to configure apollo extension

[mklemarczyk]

Hello, I got the last update 2.2.0 and it does not work anymore for my project.

I use the vs code workspace and my apollo config file is in the root folder. I use nx workspace folder structure fo angular project, that means the folder structure is quite deep.

I can provide more details later in the afternoon. Error is written to the console that it does not find the configuration file, even if you open the configuration file. I couldn’t find any helpful information in the verbose logs of the extension.

Last extension version that works for me is 1.20.0. I use apollo client npm in version 3.11.2 and apollo-angular in version 7.0.2.

Any version of extension 2.x has the same issue. I seen that your extension has very low reputation at VS Code Marketplace.

[phryneas]

Hi Maciej,

it would be great if you could share the name & contents of your configuration file (of course without sensitive details), an idea of your folder layout (where is the config file, which folder do you have open), and the exact error message.
I'll look into it as soon as I have more information :)

[bhpark1013]

module.exports = {
  client: {
    service: {
      localSchemaFile: './schema.gql',
    },
  },
  exclude: ['**/*.e2e-spec.ts'],
};

I am also having similar experience. I haven't try earlier version cause i have some files to exclude(which seems not working option on version 1.x). I am trying to link with local schema without using Apollo schema registry.

I have logs which seems not that helpful

.vscode/extensions/apollographql.vscode-apollo-2.2.0/lib/language-server/server.js:1035
`)}t(Swn,"dedentBlockStringValue");function Ewn(a){le  //...and so on
[Error - 6:14:03 PM] Server process exited with code 1.
[Error - 6:14:03 PM] Client Apollo GraphQL: connection to server is erroring.
Channel closed

my apollo/server version is: "@apollo/server": 4.9.5,

Can i get any help?

[phryneas]

I'm going to do a bit of digging what code that points to.
Meanwhile: is this already from the "Apollo" output or is there maybe additional information there?

[phryneas]

@bhpark1013 also, could I please get the full unshortened error with the full stack trace? That might actually tell me something :)

[phryneas]

Assuming that this error comes somewhere out of the corner of code you are pointing to, it would come from mergeTypeDefs from "@graphql-tools/merge" - do you have anything special in your schema?

[mklemarczyk]

For the configuration we have:

// Configuration for the GraphQL-Apollo plugin for VS Code to verify the GraphQL documents with Topology Manager service.
module.exports = {
  client: {
    includes: ['./libs/data-access-services/api/src/lib/contracts/**/*.graphql'],
    service: {
      name: 'apis-manager',
      url: 'http://127.0.0.1:21160/apis/graphQL/',
      // optionally turn off SSL validation check
      skipSSLValidation: true
    }
  }
};

Configuration is located in root folder of nx workspace.
Example of folder structure : https://github.com/nrwl/nx-examples/tree/master

VS Code output logs
apollo-graphql.log

[phryneas]

@mklemarczyk
Hmm, that looks like it's not crashing, but there's just not a lot happening...

Just to be sure: your server is running, and you also see an introspection query come in there?

PS: shouldn't make a difference, but for a http connection, you won't need skipSSLValidation.

[phryneas]

As for now, I suspect that your problems might come somewhere from these changes, but I can't put my finger on it :/

https://github.com/apollographql/vscode-graphql/pull/160/files#diff-d675ce2b91731f4d5c3cdb539cea2811a6c1c5bfebcc59b64e56b16db8471333

[phryneas]

Are you actually using https and just omitted that in the logs? It seems that switching from isomorphic-fetch to the node implementation with undici might have broken this line:

vscode-graphql/src/language-server/providers/schema/endpoint.ts

Line 34 in d760281

agent: new HTTPSAgent({ rejectUnauthorized: false }),

Seems I might need to swap in a dispatcher there instead... :/

[phryneas]

If this is your problem, could you maybe check out if #190 fixes the problem for you? I have to go OOO right now, but I'll spend more time on this on monday.

[mklemarczyk]

Hello @phryneas our server is local HTTP server, without any security. That option you mentioned I think was a workaroud from long time ago, it works in old version (1.20.0) without it as well.

Yes there is IntrospectionQuery logged in server for both extension 1.20.0 and 2.2.0.
I did not tried your change from PR yet.

For any hover in graphql there is no result.

[Trace - 4:51:54 PM] Received response 'textDocument/hover - (13)' in 2ms.
No result returned.

[phryneas]

Could you try to execute the Apollo: Show Status command?

that would look something like

------------------------------
🚀 Apollo GraphQL v2.2.0
------------------------------
✅ Service Loaded!
🆔 Service ID: localMultiSchema
🏷 Schema Tag: current
📈 Number of Types: 16 (0 client types)
------------------------------

and tell us if your schema could be loaded and how many types were recognized.

[mklemarczyk]

This is what I got in the logs

Config (apollo.config.js) is located as it is written in logs that I provided and its content is as I send in previous messages. It works fine with 1.x but 2.x has some problems. :/

[phryneas]

@mklemarczyk Just to validate, you are getting that while you have an editor open with a file that was previously recognized?

This could be something with the includes/excludes then... I'll have to take a look. We updated a lot of dependencies going into 2.x

[mklemarczyk]

Yes, I confirm, for the same exact configuration file, no configuration done in VS Code what so ever (default extension settings).
I do not have includes/excludes defined in apollo configuration file defined. I assume you are talking about extensions code than.

[phryneas]

@mklemarczyk Didn't you have includes in this comment? #187 (comment)

My assumption is that because we updated one of the dependencies (e.g. we jumped multiple major versions of glob), that doesn't match your files correctly anymore 🤔

[phryneas]

@mklemarczyk I've created this custom build that logs a bit more and should hopefully shed some light here.

---

vscode-apollo-0.0.0-build.1725552078.pr.195.commit.e20f10b.zip.

To install the extension, download the file, unzip it and install it in VS Code by selecting "Install from VSIX..." in the Extensions view.

Alternatively, run

code --install-extension vscode-apollo-0.0.0-build.1725552078.pr.195.commit.e20f10b.vsix --force

from the command line.

---

Could you please try that out? No need to enable trace logging, this should show up in the Output panel even without that.

It should show us your include and exclude patterns, which of your files were successfully found, and if the schema is downloaded & extended correctly.

[Zache]

I'm also having this problem. Here is the output for me when running the special extension:

(node:7328) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `Code --trace-warnings ...` to show where the warning was created)
[INFO] intializing project with config file file:///<CORRECT PATH>/apollo.config.js
[INFO] includes: [src/graphql/**/*.graphql]
[INFO] excludes: [**/node_modules, **/__tests__]
[INFO] found files: 'ALL OF THE GRAPHQL'
[INFO] Loading schema for client project<OUR GRAPH ID>
[INFO] Adding client metadata to schema nodes
[INFO] Successfully handled schema
[INFO] Loading schema for client project<OUR GRAPH ID>
[INFO] Adding client metadata to schema nodes
[INFO] Successfully handled schema
------------------------------
🚀 Apollo GraphQL v0.0.0-build.1725552078.pr.195.commit.e20f10b
------------------------------
❌ Service stats could not be loaded. This may be because you're missing an apollo.config.js file or it is misconfigured. For more information about configuring Apollo projects, see the guide here (https://go.apollo.dev/t/config).

I redacted our graph id and parts of the paths, but those shouldn't be relevant.

[phryneas]

@Zache thank you for the report!
Just to be clear, you are executing the Apollo: Show Status command while your cursor is in an editor of one of the .graphql files that are listed under [INFO] found files: ?

[Zache]

Unsure where my cursor was, but I have a GraphQL file (listed by the extension in a redacted part) open. In case you meant the caret I also don’t know where it was either. I’ll report back when I’m at my computer again

…

On Thu, 12 Sep 2024 at 10:55, Lenz Weber-Tronic ***@***.***> wrote: @Zache <https://github.com/Zache> thank you for the report! Just to be clear, you are executing the Apollo: Show Status command while your cursor is in an editor of one of the .graphql files that are listed under [INFO] found files: ? — Reply to this email directly, view it on GitHub <#187 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA3AXQHI3KYUVSM2373DMQ3ZWFJHRAVCNFSM6AAAAABNJ3YUZSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNBVGY3TENZSGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[phryneas]

@Zache Yeah, that's quite important - the extension is only active inside of files in your includes, and that "Show Status" command will only give you the right feedback if your "active editor" has one of those files opened. I know it's a bit complex, but since we support multiple differently configured projects inside the same workspace (e.g. monorepos), we have to make that distinction.

[Zache]

@phryneas I tried it again, this time making sure that my cursor and caret was in an included .graphql file. But I still get the same error. Maybe it could be of interest that if I click the 🚀Apollo button down in the status bar it prints the extension name, but not the status error. I'm pretty certain that used to print the status also...

[phryneas]

@Zache That is really curious.
I'll try a few more things tomorrow, but I have to admit that at this point I feel a bit lost - we have no real clues here.

If you have any more ideas what could make your environment unique, or could even come up with a minimal reproduction, I'd be very grateful.

[mklemarczyk]

Hello @phryneas I was not able to download the file you mentioned. I get 404 error.
https://github.com/apollographql/vscode-graphql/actions/runs/10723970223/artifacts/1897164825

In some free time I will record you a video with the issue later today.

[phryneas]

@mklemarczyk yeah that build only stays around for two weeks - here is a new one :)

---

You can download the latest build of the extension for this PR here:
vscode-apollo-0.0.0-build-1726659863.pr-195.commit-a14272e.zip.

To install the extension, download the file, unzip it and install it in VS Code by selecting "Install from VSIX..." in the Extensions view.

Alternatively, run

code --install-extension vscode-apollo-0.0.0-build-1726659863.pr-195.commit-a14272e.vsix --force

from the command line.

[mklemarczyk]

This showed that error, did not load anything.

The hidden parts are my username, and project folder name.

Those are other extensions that I use

[phryneas]

@mklemarczyk I believe you just found a bug that I shipped yesterday 😅
There's a lot of work going on around "config file loading" because the ways that shipped with recent versions of cosmiconfig is unfortunately just not doing the things we want it to do anymore.

I just opened a PR to fix this bug over in #211 and will have a new build to try in a moment :)

[phryneas]

Okay, new build coming up - thank you for your patience!

---

You can download the latest build of the extension for this PR here:
vscode-apollo-0.0.0-build-1726752845.pr-195.commit-2c7e56c.zip.

To install the extension, download the file, unzip it and install it in VS Code by selecting "Install from VSIX..." in the Extensions view.

Alternatively, run

code --install-extension vscode-apollo-0.0.0-build-1726752845.pr-195.commit-2c7e56c.vsix --force

from the command line.

[Zache]

Now I'm getting errors The error was: ReferenceError: module is not defined in ES module scope, but get around that. I also had a problem where we used require to get some dotenv code running, but I think I could remove that since the extension documentation says it can read from .env files.

One thing I don't think I have mentioned is that I do get a little blue "play" button to open in Apollo Studio and that works without any problem. But I still don't get Intellisense

[phryneas]

@Zache those errors should have been solved with friday's release. Could you please verify that you are on 2.3.2?

If you are still encountering, could you share some of the things in your config file that might help me reproduce the problem?

[ankitprahladsoni]

I'm still getting this issue on 2.3.2. We use a shared config in our monorepo which we import in each project workspace separately.

Example code of apollo.config.js:

const sharedConfig = require('@path/to/shared/config');

module.exports = {
    ...sharedConfig,
    client: {
        ...sharedConfig.client,
        includes: [
          // workspace specific files
        ],
    },
};

Whenever I start VSCode, I get the below error

Error: A config file failed to load with options: {"configPath":"/path/to/workspace1"}.
    The error was: ReferenceError: require is not defined in ES module scope, you can use import instead
    at loadConfig (/Users/{username}/.vscode/extensions/apollographql.vscode-apollo-2.3.3/lib/language-server/server.js:840:1325)
    at async Promise.all (index 0)
    at async yDe.addProjectsInFolder (/Users/{username}/.vscode/extensions/apollographql.vscode-apollo-2.3.3/lib/language-server/server.js:1114:4075)
    at async Promise.all (index 0)
    at async /Users/{username}/.vscode/extensions/apollographql.vscode-apollo-2.3.3/lib/language-server/server.js:1114:7661

I've explained a bit about our setup in #83

[gusvargas]

I was also having the A config file failed to load issue. After switching to the JSON format (from CJS) the error changed into the Client Apollo GraphQL: connection to server is erroring. variety.

After forcing 2.0.0 of the extension, I got a much more useful (and accurate) error: Error: ️️There are multiple definitions for the XXX operation. Fixing the duplicate definition issue fixed the extension.

It seems like some change between 2.0.0 and the current version made it so that specific errors are getting masked by broader errors.

If anyone else is having this issue I'd suggest trying 2.0.0 to see if you get a more precise error.

[mklemarczyk]

Hello @phryneas I tired the last release 2.3.3 of the extension. It says now that config file cant be found. I see the request in server for the GraphQL meta, but nothing moves in Visual Studio Code.

I confirm that I do not have The error was: ReferenceError: module is not defined in ES module scope error anymore. At least I do not see it in output for Apollo GraphQL extension.

[phryneas]

I really really want to help y'all, but I really don't get this reproduced on my end. 😞

I know that it is a big ask, but could one of you try to create some sort of reproduction for this?

[ankitprahladsoni]

Try this test repo https://github.com/ankitprahladsoni/vscode-graphql-187
No error is thrown on v2.0.0, but we see the above-mentioned error in v2.3.3

[phryneas]

@ankitprahladsoni THANK YOU that helped a ton!

I believe I could fix what you are encountering there - could you please give this build a try? :)

#224 (comment)

I fear that @mklemarczyk might have a different problem though :/

[ankitprahladsoni]

Yes, that worked for me. Thanks for the super quick solution 🙇🏼

[phryneas]

We're in a code freeze this week, so just a heads up so you're not confused - this will be released next week :)

[phryneas]

@ankitprahladsoni I just released that fix!

[phryneas]

Another configuration loading bug in older VSCode versions has been fixed in #226 and will be released in a bit.

[hmz22]

Hello dear
I still have problem with new version i update plugin to 2.3.6

module.exports = {
  client: {
    service: {
      name: "msrt-froums",
      url: "http://localhost:4031/graphql",
    },
    excludes: ["src/graphql/__generated__/**", "src/graphql/**/*.generated.ts"],
  },
};

and this my config in apollo.config.js I use in node.js 14 get me this error on apollo status:

------------------------------
🚀 Apollo GraphQL v2.3.6
------------------------------
❌ Service stats could not be loaded. This may be because you're missing an apollo.config.js file or it is misconfigured. For more information about configuring Apollo projects, see the guide here (https://go.apollo.dev/t/config).

when downgrade to 1.20 everything worked

[phryneas]

@hmz22 could you try to recreate your exact folder layout with an otherwise empty project and upload that somewhere so I could take a look?

[hmz22]

@hmz22 could you try to recreate your exact folder layout with an otherwise empty project and upload that somewhere so I could take a look?

I can't publish it in public because this is a private organization app and backend are microservices.

[phryneas]

@hmz22 I'm really talking about a minimal reporduction that shows the same behaviour - just a similar (mostly) empty folder structure, with the config file in the place where you have it and a .js or .graphql file in the place where you expect to get the extension features.

I defintely don't want access to the full project or any sensitive data! :)

[hmz22]

@hmz22 I'm really talking about a minimal reporduction that shows the same behaviour - just a similar (mostly) empty folder structure, with the config file in the place where you have it and a .js or .graphql file in the place where you expect to get the extension features.

I defintely don't want access to the full project or any sensitive data! :)

Ok I create it and publish it.

[mklemarczyk]

testing.zip
Some example mono-repo created with nx, you can open it in vs code with MyTest file. It is intended way to work with this example.

List of all installed extensions

adamhartford.vscode-base64
angular.ng-template
apollographql.vscode-apollo
cake-build.cake-vscode
dbaeumer.vscode-eslint
eamodio.gitlens
editorconfig.editorconfig
esbenp.prettier-vscode
firsttris.vscode-jest-runner
graphql.vscode-graphql (disabled)
graphql.vscode-graphql-syntax (disabled)
jock.svg
johnstoncode.svn-scm
maziac.binary-file-viewer
mhutchie.git-graph
ms-azuretools.vscode-docker
ms-dotnettools.csharp
ms-dotnettools.vscode-dotnet-runtime
ms-edgedevtools.vscode-edge-devtools
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode.hexeditor
ms-vscode.powershell
ms-vscode.remote-explorer
ms-vsliveshare.vsliveshare
msjsdiag.debugger-for-edge
nrwl.angular-console
pranaygp.vscode-css-peek
praneshpsg239.json-helper
pucelle.vscode-css-navigation
redhat.vscode-commons
redhat.vscode-xml
svipas.prettier-plus
wix.vscode-import-cost

I am sorry, I do not have much time at work for that issue. We started to evaluate alternative extensions in place of apollo graphql.

[HTMLhead]

@hmz22 @bhpark1013

Hello, I was facing the exact same issue as you. You might want to check if you have queries or mutations with identical names.

For example:

// a.query.ts
const CREATE_SOMETHING = gql(`
  mutation createSomething($a: String!) {
    createSomething(a: $a)
  }
`);

// b.query.ts
const CREATE_SOMETHING = gql(`
  mutation createSomething($a: String!) {
    // This is the issue
    createSomething(a: $a)
  }
`);

Changing it to something like this solved the issue for me:

// a.query.ts
const CREATE_SOMETHING = gql(`
  mutation createSomething($a: String!) {
    createSomething(a: $a)
  }
`);

// b.query.ts
const CREATE_SOMETHING = gql(`
  mutation createSomething_B($a: String!) {
    // Mutation name changed
    createSomething(a: $a)
  }
`);

I realized this after downgrading to version 2.0.0 and inspecting the error logs. After renaming the conflicting queries/mutations, everything worked correctly.

I hope this helps you.

[phryneas]

@mklemarczyk in this case, I unfortunately don't have an api running on that port, and as a result the configuration fails to load 😞

As an alternative, could you try to set this setting and report back what you get in the logs?

[phryneas]

@HTMLhead so I understand you right that you did get that error in the old versions, but just nothing in the current versions?

[HTMLhead]

Hello @phryneas yes that's right.

[davyw]

Hello @phryneas,

I have the same issue where schema is loaded from my backend correctly and is valid but where the
'Service stats could not be loaded' message appears in output pane.
It no longer works since v2.0.0, v1.20 does work.
I am no expert in vs code extensions, but took the liberty to clone the repo and tried to debug the extension using my own workspace to investigate what could be a root cause.

Obviously, I have limited knowledge to the code base, but where it seems to go wrong
is with the way for example FileSet class is created, the rootURI seems wrong.
In method FileSet.includesFile for example normalizeURI(filePath) is used (ex. normalizeURI('file:///c%3a/project-path/src/test.ts') returns 'c:/project-path/src/test.ts'), seems correct, with forward slash unix style.
But the rootURI member of FileSet is not correct, rootURI.fsPath returns '\project-path', no drive letter
and backslash (windows style).
Due to that fact workspace.projectForFile returns undefined and no project stats are found.

I tried playing around a bit by using normalizeURI() some more or URI.file(normalizeURI(..)) if needed, but cannot pinpoint the exact place where it goes wrong.
I'm not sure this is a configuration setting that is wrong or path conversions that get mixed up in the language server, but I hope this information helps to find the issue.

[CassandraCat]

Same issue. When I use 2.0.0, it works fine

[mklemarczyk]

@mklemarczyk in this case, I unfortunately don't have an api running on that port, and as a result the configuration fails to load 😞

As an alternative, could you try to set this setting and report back what you get in the logs?

Sure I can provide logs, did you add some more messages ? Last time there were no helpful messages in logs.