vscode-apollo 2.5.4 → 2.5.6

package/.github/workflows/E2E.yml

@@ -25,7 +25,17 @@ jobs:
       - run: npm install
       - run: echo 'APOLLO_KEY="service:bob-123:489fhseo4"' > ./sampleWorkspace/spotifyGraph/.env
         shell: bash
+
+      # Print rover version per OS
       - name: Install & Configure Rover (Linux)
+        run: ./node_modules/.bin/rover --version
+        if: runner.os == 'Linux'
+      - name: Install Rover (Windows)
+        run: ./node_modules/.bin/rover.cmd --version
+        if: runner.os == 'Windows'
+
+      # auth rover per OS
+      - name: Configure Rover (Linux)
         run: |
           expect <<EOF
           spawn ./node_modules/.bin/rover config auth --profile VSCode-E2E
@@ -34,9 +44,6 @@ jobs:
           expect eof
           EOF
         if: runner.os == 'Linux'
-      - name: Install Rover (Windows)
-        run: ./node_modules/.bin/rover.cmd --version
-        if: runner.os == 'Windows'
       - name: Configure Rover (Windows)
         run: |
           [void] [System.Reflection.Assembly]::LoadWithPartialName("System.Windows.Forms")
@@ -48,6 +55,15 @@ jobs:
           [System.Windows.Forms.SendKeys]::SendWait("{ENTER}")
         if: runner.os == 'Windows'
         shell: powershell
+
+      # Print profiles per OS
+      - name: Print Rover profiles (Linux)
+        run: ./node_modules/.bin/rover config list
+        if: runner.os == 'Linux'
+      - name: Print Rover profiles (Windows)
+        run: ./node_modules/.bin/rover.cmd config list
+        if: runner.os == 'Windows'
+
       - name: Adjust configuration (Windows)
         run: |
           sed -i -e 's/\(bin:.*\)/\1.exe/' sampleWorkspace/rover/apollo.config.yaml
@@ -56,7 +72,10 @@ jobs:
           echo "module.exports = require('./jest.e2e.config')" > jest.config.ts
         shell: bash
         if: runner.os == 'Windows'
+
       - run: npm run build:production
+
+      # Run test per OS
       - name: "Run Extension E2E tests (Linux)"
         run: xvfb-run -a npm run test:extension
         env:

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # CHANGELOG
 
+## 2.5.6
+
+### Patch Changes
+
+- [#290](https://github.com/apollographql/vscode-graphql/pull/290) [`84d0503`](https://github.com/apollographql/vscode-graphql/commit/84d05030c253c0b8c3c26dc273527a33ac5e7129) Thanks [@Jephuff](https://github.com/Jephuff)! - Fix subgraph detection on windows
+
+- [#282](https://github.com/apollographql/vscode-graphql/pull/282) [`52017e3`](https://github.com/apollographql/vscode-graphql/commit/52017e3479cfe8c07d19fa52c2ebe10f65de766c) Thanks [@pubmodmatt](https://github.com/pubmodmatt)! - Improve syntax highlighting for GraphQL block strings
+
+## 2.5.5
+
+### Patch Changes
+
+- [#280](https://github.com/apollographql/vscode-graphql/pull/280) [`ce6b4a8`](https://github.com/apollographql/vscode-graphql/commit/ce6b4a840d94c95efa19b645077230c422f0616e) Thanks [@pubmodmatt](https://github.com/pubmodmatt)! - Fix an issue where adding a new Apollo configuration file would not be detected
+
+- [#278](https://github.com/apollographql/vscode-graphql/pull/278) [`ff969e6`](https://github.com/apollographql/vscode-graphql/commit/ff969e6d64b6aa8ed865215d71344c41e85da19f) Thanks [@Meschreiber](https://github.com/Meschreiber)! - Update README/Marketplace page
+
 ## 2.5.4
 
 ### Patch Changes

package/README.md

@@ -15,24 +15,31 @@ Thanks to its strongly typed schema and query language, GraphQL has the potentia
 
 The Apollo GraphQL extension for VS Code brings an all-in-one tooling experience for developing apps with Apollo.
 
-- Add [syntax highlighting](#syntax-highlighting) for GraphQL files and gql templates inside JavaScript files
-- Get instant feedback and [intelligent autocomplete](#intelligent-autocomplete) for fields, arguments, types, and variables as you write queries
-- Manage client-side schema alongside remote schema
-- See [performance information](#performance-insights) inline with your query definitions
-- Extra features to help you with [supergraph editing](#supergraph-editing)
-- Validate field and argument usage in operations
-- [Navigate projects more easily](#navigating-projects) with jump-to and peek-at definitions
-- Manage [client-only](#client-only-schemas) schemas
+The extension provides:
+
+- [Syntax highlighting](#syntax-highlighting) for GraphQL files and `gql` templates in JavaScript
+- Real-time feedback, including [intelligent autocomplete](#intelligent-autocomplete) for fields, arguments, types, and variables as you write queries
+- Client-side and remote schema management, including [client-only](#client-only-schemas) schemas
+- Inline [performance information](#performance-insights) and [supergraph editing](#supergraph-editing) tool
+- [Streamlined project navigation](#navigating-projects) with jump-to and peek-at definitions
 - [Switch graph variants](#graph-variant-switching) to work with schemas running on different environments
+- (Experimental) [Apollo Client DevTools](#devtools) in your IDE
+
+Starting with version 2.3.3, the extension also works with Apollo Connectors. [Learn more.](#developing-connectors)
 
 <h2 id="getting-started">Getting started</h2>
 
-The VS Code plugin must be linked to a published or local schema. To do so, create an `apollo.config.json` file at the root of the project.
+
+The VS Code extension must be linked to a published or local schema via a configuration file.
+
+<h3 id="configuration">Configuration</h3>
+
+The VS Code extension requires a `apollo.config.json` configuration file at the root of the project.
 Alternatively, you can create a `yaml`, `cjs`, `mjs`, or `ts` file with the same configuration.
 
-For the contents of this configuration file, select one of these options:
+Select one of the options below to define the contents of this configuration file.
 
-<h3>Configure extension for client development with schemas published to Apollo GraphOS</h3>
+<h4>Configure extension for client development with schemas published to Apollo GraphOS</h4>
 <details>
 <summary>
 <i>Expand for instructions.</i>
@@ -70,7 +77,7 @@ Afterward, reload VS Code. The Apollo integration will connect to GraphOS Studio
 
 </details>
 
-<h3>Configure extension for supergraph schema development</h3>
+<h4>Configure extension for supergraph schema development</h4>
 <details>
 <summary>
 <i>Expand for instructions.</i>
@@ -107,7 +114,7 @@ Afterward, reload VS Code. The Apollo extension will start using Rover to help y
 
 </details>
 
-<h3 id="local-schemas">Configure extension for client development with introspection from a locally running service</h3>
+<h4 id="local-schemas">Configure extension for client development with introspection from a locally running service</h4>
 <details>
 <summary>
 <i>Expand for instructions.</i>
@@ -130,7 +137,7 @@ Linking to local schemas won't provide all extension features, such as switching
 
 </details>
 
-<h3 id="local-schema-files">Configure extension for client development with local schema files</h3>
+<h4 id="local-schema-files">Configure extension for client development with local schema files</h4>
 <details>
 <summary>
 <i>Expand for instructions.</i>
@@ -153,7 +160,7 @@ To link to a local schema file, add the following to the `apollo.config.json` fi
 
 </details>
 
-<h3 id="client-only-schemas">Bonus: Adding client-only schemas</h3>
+<h4 id="client-only-schemas">Bonus: Adding client-only schemas</h4>
 <details>
 <summary>
 <i>Expand for instructions.</i>
@@ -243,6 +250,64 @@ Navigating large codebases can be difficult, but the Apollo GraphQL extension ma
 
 Apollo supports publishing multiple versions ([variants](https://www.apollographql.com/docs/graphos/graphs/#variants)) of a schema. This is useful for developing on a future development schema and preparing your clients to conform to that schema. To switch between graph variants, open the Command Palette (`cmd + shift + p` on mac), search "Apollo" and choose the "Apollo: Select Schema Tag" option.
 
+<h3 id="developing-connectors">Developing Connectors</h3>
+
+Starting with version 2.3.3, the Apollo GraphQL VS Code extension can give you fast feedback on your Apollo Connectors in VS Code. Through it, you can get the _same_ validations that composition provides, with errors and hints highlighted in your schema file on each save.
+
+<h4 id="prerequisites">Prerequisites</h4>
+
+These composition-based diagnostics are powered by Rover. You'll need Rover version 0.27.0 or later [installed](/rover/getting-started) to use composition-based diagnostics.
+
+<h4 id="connector-configuration">Connector Configuration</h4>
+
+By default, you need two files in the root of your project to enable connector validations in VS Code:
+
+1. An `apollo.config.yaml` file containing `rover: {}`
+2. A `supergraph.yaml` file that's the
+   [configuration file](/rover/commands/supergraphs#yaml-configuration-file)
+   used for `rover dev`, `rover supergraph compose`, and this VS Code extension.
+   1. Make sure to set the composition version to {products.federation.version("connectors").version}.
+   2. Make sure every file you want feedback on is included in the `subgraphs` section.
+
+You can use a different location for your `supergraph.yaml` by setting the `rover.supergraphConfig` option in
+`apollo.config.yaml`, like this:
+
+```yaml title="apollo.config.yaml"
+rover:
+  supergraphConfig: path/to/supergraph.yaml
+```
+
+<h3 id="devtools">(Experimental) Apollo Client DevTools in your IDE</h3>
+
+The Apollo VSCode extension ships with an instance of the [Apollo Client Devtools](https://chromewebstore.google.com/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm).
+You can use it to remotely debug your client, making it easier to debug React Native and Node.js applications.
+
+To configure it, follow these steps:
+
+1. In the VS code settings dialog, set the **Apollographql > Dev Tools: Show Panel** setting to `detect` or `always`.
+1. In your code base, install the `@apollo/client-devtools-vscode` package:
+
+    ```sh
+    npm install @apollo/client-devtools-vscode
+    ```
+
+1. After initializing your `ApolloClient` instance, call `connectApolloClientToVSCodeDevTools` with your client instance.
+
+    ```js
+    import { connectApolloClientToVSCodeDevTools } from "@apollo/client-devtools-vscode";
+
+    const client = new ApolloClient({ /* ... */ });
+
+    // We recommend wrapping this statement in a check for e.g. process.env.NODE_ENV === "development"
+    const devtoolsRegistration = connectApolloClientToVSCodeDevTools(
+      client,
+      // the default port of the VSCode DevTools is 7095
+      "ws://localhost:7095",
+    );
+    ```
+1. Open the **Apollo Client DevTools** panel in VS Code.
+1. Start your application. It should automatically connect to the DevTools.
+
 <h2 id="troubleshooting">Troubleshooting</h2>
 
 The most common errors are configuration errors, like a missing `.env` file or incorrect service information in the `apollo.config.json` file. Please see [the Apollo config docs](https://www.apollographql.com/docs/devtools/apollo-config/) for more configuration guidance.
@@ -255,6 +320,30 @@ Sometimes, errors will appear as a notification at the bottom of your editor. Ot
 
 If problems persist or the error messages are unhelpful, open an [issue](https://github.com/apollographql/vscode-graphql/issues) in the `vscode-graphql` repository.
 
+<h3 id="reloading-extension">Reloading the extension</h3>
+
+If you aren't seeing diagnostics, try reloading the extension by running the `Apollo: Reload schema` command from the command palette.
+
+<h3 id="turn-on-autosave">Turn on autosave</h3>
+
+Most diagnostics will only appear when you save your schema file.
+If you enable autosave in VS Code, you'll see feedback each time you finish typing.
+
+<h3 id="double-check-rover-version">Double-check your Rover version</h3>
+
+If you aren't seeing diagnostics for Apollo Connectors, run `rover --version` in a terminal to ensure you have version 0.27.0 or later.
+You can also specify a path to a specific Rover binary in your `apollo.config.yaml` file:
+
+```yaml title="apollo.config.yaml"
+rover:
+  bin: /path/to/rover
+```
+
+<h3 id="debug-logging">Debug logging</h3>
+
+If the extension isn't working as expected, you can set the apollographql.trace.server setting to verbose in your VS Code settings.
+This setting adds detailed logs to the output panel of the extension, which can aid in debugging.
+
 <h2 id="additional-apollo-config-options">Additional Apollo config options</h2>
 
 You can add these configurations to your [Apollo config file](#setting-up-an-apollo-config).

package/package.json

@@ -2,7 +2,7 @@
   "name": "vscode-apollo",
   "displayName": "Apollo GraphQL",
   "description": "Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "referenceID": "87197759-7617-40d0-b32e-46d378e907c7",
   "author": "Apollo GraphQL <opensource@apollographql.com>",
   "license": "MIT",
@@ -56,7 +56,7 @@
     "minimatch": "10.0.1",
     "moment": "2.30.1",
     "semver": "7.6.3",
-    "undici": "6.21.0",
+    "undici": "6.21.1",
     "vscode-languageclient": "9.0.1",
     "vscode-languageserver": "9.0.1",
     "vscode-languageserver-textdocument": "1.0.12",
@@ -67,7 +67,7 @@
     "zod-validation-error": "3.4.0"
   },
   "devDependencies": {
-    "@apollo/rover": "0.27.0-preview.0",
+    "@apollo/rover": "0.27.0",
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.10",
     "@graphql-codegen/cli": "5.0.2",
@@ -83,7 +83,7 @@
     "@vscode/test-cli": "0.0.10",
     "@vscode/test-electron": "2.4.1",
     "@wry/trie": "0.5.0",
-    "esbuild": "0.23.0",
+    "esbuild": "0.25.0",
     "eslint": "8.52.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.2.1",

package/sampleWorkspace/rover/apollo.config.yaml

@@ -1,3 +1,3 @@
 rover:
   profile: VSCode-E2E
-  bin: ../../node_modules/@apollo/rover/binary/rover-0.27.0-alpha.0
+  bin: ../../node_modules/@apollo/rover/binary/rover-0.27.0

package/sampleWorkspace/rover/supergraph.yaml

@@ -0,0 +1,4 @@
+subgraphs:
+  subgraph:
+    schema:
+      file: src/test.graphql

package/src/language-server/__e2e__/configFileTypes.e2e.ts

@@ -21,14 +21,14 @@ test.each([
 ] as const)("%s with `type: '%s'`", async (project, moduleType) => {
   await writeFile(
     resolveRelativeToSampleWorkspace(`configFileTypes/${project}/package.json`),
-    JSON.stringify(
+    `${JSON.stringify(
       {
         name: "test",
         type: moduleType,
       },
       undefined,
       2,
-    ),
+    )}\n`,
     "utf-8",
   );
   await reloadService();

package/src/language-server/__e2e__/rover.e2e.ts

@@ -1,9 +1,3 @@
-import { test as origTest } from "@jest/globals";
-import { load } from "js-yaml";
-import { readFileSync } from "node:fs";
-import { execFileSync } from "node:child_process";
-import { join } from "node:path";
-import { ParsedApolloConfigFormat } from "../config";
 import { TextEditor } from "vscode";
 import {
   closeAllEditors,
@@ -16,36 +10,6 @@ import {
   getDefinitions,
 } from "./utils";
 
-// we want to skip these tests unless the user running them has a rover config profile named "VSCode-E2E"
-let test = origTest.skip;
-try {
-  const roverProjectDir = join(__dirname, "../../../sampleWorkspace/rover");
-  const config = load(
-    readFileSync(join(roverProjectDir, "apollo.config.yaml"), "utf-8"),
-  ) as ParsedApolloConfigFormat;
-  const roverBin = join(roverProjectDir, config.rover!.bin);
-  const result = execFileSync(roverBin, [
-    "config",
-    "list",
-    "--format=json",
-  ]).toString("utf8");
-  const parsed = JSON.parse(result);
-  if (parsed.data.profiles.includes("VSCode-E2E")) {
-    test = origTest;
-  }
-} catch (e) {}
-if (test === origTest.skip) {
-  console.info(
-    "Skipping rover E2E tests: no profile with the name 'VSCode-E2E'\n" +
-      "You can create one by running `rover config auth --profile VSCode-E2E`",
-  );
-}
-
-if (process.platform === "win32") {
-  console.info("Skipping rover E2E tests in Windows");
-  test = origTest.skip;
-}
-
 let editor: TextEditor;
 let getPosition: GetPositionFn;
 beforeAll(async () => {
@@ -73,47 +37,71 @@ test("completion", async () => {
 [
   {
     "detail": undefined,
+    "label": "@authenticated",
+  },
+  {
+    "detail": "",
     "label": "@deprecated",
   },
   {
-    "detail": undefined,
+    "detail": "",
     "label": "@external",
   },
   {
     "detail": undefined,
-    "label": "@federation__authenticated",
+    "label": "@inaccessible",
   },
   {
-    "detail": undefined,
-    "label": "@federation__inaccessible",
+    "detail": "",
+    "label": "@override(…)",
   },
   {
     "detail": undefined,
-    "label": "@federation__policy(…)",
+    "label": "@policy(…)",
   },
   {
     "detail": undefined,
-    "label": "@federation__provides(…)",
+    "label": "@provides(…)",
   },
   {
-    "detail": undefined,
-    "label": "@federation__requiresScopes(…)",
+    "detail": "",
+    "label": "@requires(…)",
   },
   {
     "detail": undefined,
-    "label": "@federation__tag(…)",
+    "label": "@requiresScopes(…)",
   },
   {
-    "detail": undefined,
-    "label": "@override(…)",
+    "detail": "",
+    "label": "@shareable",
   },
   {
     "detail": undefined,
-    "label": "@requires(…)",
+    "label": "@tag(…)",
+  },
+  {
+    "detail": "",
+    "label": "@federation__authenticated",
+  },
+  {
+    "detail": "",
+    "label": "@federation__inaccessible",
+  },
+  {
+    "detail": "",
+    "label": "@federation__policy(…)",
+  },
+  {
+    "detail": "",
+    "label": "@federation__provides(…)",
+  },
+  {
+    "detail": "",
+    "label": "@federation__requiresScopes(…)",
   },
   {
     "detail": undefined,
-    "label": "@shareable",
+    "label": "@federation__tag(…)",
   },
 ]
 `);

package/src/language-server/config/config.ts

@@ -322,8 +322,10 @@ export abstract class ApolloConfig {
   get configDirURI() {
     // if the filepath has a _file_ in it, then we get its dir
     return this.configURI &&
-      this.configURI.fsPath.match(/\.(ts|js|cjs|mjs|yaml|yml|json)$/i)
-      ? URI.parse(dirname(this.configURI.fsPath))
+      this.configURI.path.match(/\.(ts|js|cjs|mjs|yaml|yml|json)$/i)
+      ? URI.from(this.configURI).with({
+          path: dirname(this.configURI.path),
+        })
       : this.configURI;
   }
 

package/src/language-server/workspace.ts

@@ -228,12 +228,12 @@ export class GraphQLWorkspace {
         folder: { uri: folderUri } as WorkspaceFolder,
       });
 
+      this.reloadService();
       const existingProjects = this.projectsByFolderUri.get(folderUri) || [];
       this.projectsByFolderUri.set(folderUri, [
         ...existingProjects,
         newProject,
       ]);
-      this.reloadService();
     }
   }
 

package/src/languageServerClient.ts

@@ -52,9 +52,8 @@ export function getLanguageServerClient(
     documentSelector: supportedLanguageIds,
     synchronize: {
       fileEvents: [
-        workspace.createFileSystemWatcher(
-          "**/{.env?(.local),apollo.config.{json,yml,yaml}}",
-        ),
+        workspace.createFileSystemWatcher("**/{.env?(.local)}"),
+        workspace.createFileSystemWatcher("**/apollo.config.{json,yml,yaml}"),
         workspace.createFileSystemWatcher(
           "**/*{" + supportedExtensions.join(",") + "}",
         ),

package/syntaxes/graphql.json

@@ -485,6 +485,19 @@
         "1": { "name": "constant.language.null.graphql" }
       }
     },
+    "graphql-block-string-value": {
+      "contentName": "string.quoted.triple.block.graphql",
+      "begin": "\\s*+((\"\"\"))",
+      "end": "\\s*+((\"\"\"))",
+      "beginCaptures": {
+        "1": { "name": "string.quoted.triple.block.graphql" },
+        "2": { "name": "punctuation.definition.string.begin.graphql" }
+      },
+      "endCaptures": {
+        "1": { "name": "string.quoted.triple.block.graphql" },
+        "2": { "name": "punctuation.definition.string.end.graphql" }
+      }
+    },
     "graphql-string-value": {
       "contentName": "string.quoted.double.graphql",
       "begin": "\\s*+((\"))",
@@ -553,6 +566,7 @@
       "patterns": [
         { "include": "#graphql-variable-name" },
         { "include": "#graphql-float-value" },
+        { "include": "#graphql-block-string-value" },
         { "include": "#graphql-string-value" },
         { "include": "#graphql-boolean-value" },
         { "include": "#graphql-null-value" },