vscode-apollo 2.3.0 → 2.3.2

package/.circleci/config.yml

@@ -53,28 +53,12 @@ jobs:
           name: Test
           command: npm run test --  --runInBand
 
-  E2E tests:
-    executor: node
-    steps:
-      - checkout
-      - npm-install
-      - run: sudo apt update &&  sudo apt install -y libasound2 libgbm1 libgtk-3-0 libnss3 xvfb
-      - run:
-          name: Build
-          command: npm run build:production
-      - run:
-          command: echo 'APOLLO_KEY="service:bob-123:489fhseo4"' > ./sampleWorkspace/spotifyGraph/.env
-      - run:
-          name: E2E tests
-          command: xvfb-run -a npm run test:extension
-
 workflows:
   build-test-deploy:
     jobs:
       - lint
       - typescript
       - test
-      - E2E tests
   security-scans:
     jobs:
       - secops/gitleaks:

package/.github/workflows/E2E.yml

@@ -0,0 +1,27 @@
+name: Run E2E tests
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+jobs:
+  test:
+    name: Run E2E tests
+    runs-on: ubuntu-latest
+    steps:
+      - run: sudo apt update && sudo apt install -y libasound2 libgbm1 libgtk-3-0 libnss3 xvfb expect
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          cache: "npm"
+      - run: npm install
+      - run: npm run build:production
+      - run: echo 'APOLLO_KEY="service:bob-123:489fhseo4"' > ./sampleWorkspace/spotifyGraph/.env
+      - run: |
+          expect <<EOF
+          spawn ./node_modules/.bin/rover config auth --profile VSCode-E2E
+          expect "Copy the key and paste it into the prompt below."
+          send -- "test\n"
+          expect eof
+          EOF
+      - run: xvfb-run -a npm run test:extension

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## 2.3.2
+
+### Patch Changes
+
+- [#211](https://github.com/apollographql/vscode-graphql/pull/211) [`9aa1fc1b`](https://github.com/apollographql/vscode-graphql/commit/9aa1fc1b9b419a5e72216f032e64aa5f86f15b59) Thanks [@phryneas](https://github.com/phryneas)! - Avoid detection if .js config file is ESM or CommonJs, just try both.
+
+## 2.3.1
+
+### Patch Changes
+
+- [`7a55e46b`](https://github.com/apollographql/vscode-graphql/commit/7a55e46bbce01af851a5daafd2507a7b353ea081) Thanks [@phryneas](https://github.com/phryneas)! - Fix styling in README.
+
 ## 2.3.0
 
 ### Minor Changes

package/README.md

@@ -33,9 +33,10 @@ Alternatively, you can create a `yaml`, `cjs`, `mjs`, or `ts` file with the same
 
 For the contents of this configuration file, select one of these options:
 
+<h3>Configure extension for schemas published to Apollo GraphOS</h3>
 <details>
 <summary>
-<h3>Configure extension for schemas published to Apollo GraphOS</h3>
+<i>Expand for instructions.</i>
 </summary>
 
 To get all the benefits of the VS Code experience, it's best to link the schema that is being developed against before installing the extension. The best way to do that is by [publishing a schema](https://www.apollographql.com/docs/graphos/delivery/publishing-schemas/) to the Apollo schema registry.
@@ -70,9 +71,10 @@ After this is done, VS Code can be reloaded and the Apollo integration will conn
 
 </details>
 
+<h3 id="local-schemas">Configure extension to use introspection from a locally running service</h3>
 <details>
 <summary>
-<h3 id="local-schemas">Configure extension to use introspection from a locally running service</h3>
+<i>Expand for instructions.</i>
 </summary>
 
 Sometimes it may make sense to link the editor to a locally running version of a schema to try out new designs that are in active development. To do this, the `apollo.config.json` file can be linked to a local service definition:
@@ -92,9 +94,10 @@ Linking to the local schema won't provide all features, such as switching graph
 
 </details>
 
+<h3 id="local-schema-files">Configure extension for local schema files</h3>
 <details>
 <summary>
-<h3 id="local-schema-files">Configure extension for local schema files</h3>
+<i>Expand for instructions.</i>
 </summary>
 
 You might not always have a running server to link to, so the extension also supports linking to a local schema file.

package/jest.e2e.config.js

@@ -3,6 +3,8 @@ const path = require("path");
 
 module.exports = {
   moduleFileExtensions: ["js", "ts"],
+  // restrict the roots here so jest doesn't complain about *other* snapshots it sees as obsolete
+  roots: ["<rootDir>/src/language-server/__e2e__"],
   testMatch: ["<rootDir>/src/**/*.e2e.ts"],
   testEnvironment: "./src/__e2e__/vscode-environment.js",
   setupFiles: ["./src/__e2e__/setup.js"],

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.3.0",
+  "version": "2.3.2",
   "referenceID": "87197759-7617-40d0-b32e-46d378e907c7",
   "author": "Apollo GraphQL <opensource@apollographql.com>",
   "license": "MIT",
@@ -65,6 +65,7 @@
     "zod-validation-error": "3.3.1"
   },
   "devDependencies": {
+    "@apollo/rover": "0.27.0-alpha.0",
     "@changesets/changelog-github": "0.4.8",
     "@changesets/cli": "2.26.2",
     "@graphql-codegen/cli": "^5.0.2",

package/sampleWorkspace/configFileTypes/cjsConfig/apollo.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  client: {
+    service: {
+      name: "cjsConfig",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

package/sampleWorkspace/configFileTypes/cjsConfig/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "module"
+}

package/sampleWorkspace/configFileTypes/cjsConfig/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

package/sampleWorkspace/configFileTypes/jsConfigWithCJS/apollo.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  client: {
+    service: {
+      name: "jsConfigWithCJS",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

package/sampleWorkspace/configFileTypes/jsConfigWithCJS/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "module"
+}

package/sampleWorkspace/configFileTypes/jsConfigWithCJS/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

package/sampleWorkspace/configFileTypes/jsConfigWithESM/apollo.config.js

@@ -0,0 +1,8 @@
+export default {
+  client: {
+    service: {
+      name: "jsConfigWithESM",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

package/sampleWorkspace/configFileTypes/jsConfigWithESM/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "commonjs"
+}

package/sampleWorkspace/configFileTypes/jsConfigWithESM/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

package/sampleWorkspace/configFileTypes/mjsConfig/apollo.config.mjs

@@ -0,0 +1,8 @@
+export default {
+  client: {
+    service: {
+      name: "mjsConfig",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

package/sampleWorkspace/configFileTypes/mjsConfig/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "commonjs"
+}

package/sampleWorkspace/configFileTypes/mjsConfig/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

package/sampleWorkspace/configFileTypes/tsConfigWithCJS/apollo.config.ts

@@ -0,0 +1,8 @@
+module.exports = {
+  client: {
+    service: {
+      name: "tsConfigWithCJS",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

package/sampleWorkspace/configFileTypes/tsConfigWithCJS/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "module"
+}

package/sampleWorkspace/configFileTypes/tsConfigWithCJS/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

package/sampleWorkspace/configFileTypes/tsConfigWithESM/apollo.config.ts

@@ -0,0 +1,8 @@
+export default {
+  client: {
+    service: {
+      name: "tsConfigWithESM",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

package/sampleWorkspace/configFileTypes/tsConfigWithESM/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "commonjs"
+}

package/sampleWorkspace/configFileTypes/tsConfigWithESM/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

package/sampleWorkspace/localSchemaArray/src/test.js

@@ -2,7 +2,7 @@ import gql from "graphql-tag";
 gql`
   query Test {
     droid(id: "2000") {
-      name
+      dName: name
     }
     planets {
       id

package/sampleWorkspace/rover/apollo.config.yaml

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

package/sampleWorkspace/rover/src/test.graphql

@@ -1,14 +1,15 @@
-"""
-The query type, represents all of the entry points into our object graph
-"""
+extend schema
+  @link(
+    url: "https://specs.apollo.dev/federation/v2.8"
+    import: ["@key", "@override", "@requires", "@external", "@shareable"]
+  )
+
 type Query {
-  me: User!
+  a: A
 }
 
-"""
-Test
-"""
-type User {
-  id: ID!
-  name: String!
+type A @key(fields: "a") {
+  a: ID @override(from: "DNE")
+  b: String! @requires(fields: "c") @shareable
+  c: String! @external
 }

package/sampleWorkspace/sampleWorkspace.code-workspace

@@ -18,6 +18,9 @@
     {
       "path": "rover"
     },
+    {
+      "path": "configFileTypes"
+    },
     {
       "path": "../src/language-server/__tests__/fixtures/documents"
     }

package/src/__e2e__/runTests.js

@@ -18,6 +18,7 @@ async function main() {
     const TEST_PORT = 7096;
     process.env.APOLLO_ENGINE_ENDPOINT = "http://localhost:7096/apollo";
     process.env.MOCK_SERVER_PORT = String(TEST_PORT);
+    process.env.APOLLO_FEATURE_FLAGS = "rover";
     disposables.push(
       ...(await Promise.all([
         runMockServer(TEST_PORT, false, loadDefaultMocks),

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

@@ -1,24 +1,45 @@
 import { TextEditor } from "vscode";
-import { closeAllEditors, openEditor, testCompletion, getHover } from "./utils";
+import {
+  closeAllEditors,
+  openEditor,
+  getCompletionItems,
+  getHover,
+  getPositionForEditor,
+  GetPositionFn,
+} from "./utils";
 
 let editor: TextEditor;
+let getPosition: GetPositionFn;
 beforeAll(async () => {
   closeAllEditors();
   editor = await openEditor("clientSchema/src/test.js");
+  getPosition = getPositionForEditor(editor);
 });
 
 test("completion", async () => {
-  // dro|id
-  await testCompletion(editor, [4, 7], [["droid", "Droid"]]);
-  // na|me
-  await testCompletion(editor, [5, 8], [["name", "String!"]]);
-  // mo|del
-  await testCompletion(editor, [6, 8], [["model", "String"]]);
+  expect(
+    (await getCompletionItems(editor, getPosition("dro|id")))[0],
+  ).toStrictEqual({
+    label: "droid",
+    detail: "Droid",
+  });
+  expect(
+    (await getCompletionItems(editor, getPosition("na|me")))[0],
+  ).toStrictEqual({
+    label: "name",
+    detail: "String!",
+  });
+  expect(
+    (await getCompletionItems(editor, getPosition("mo|del")))[0],
+  ).toStrictEqual({
+    label: "model",
+    detail: "String",
+  });
 });
 
 test("hover", async () => {
-  // featu|reFlagDefer
-  expect(await getHover(editor, [3, 10])).toMatchInlineSnapshot(`
+  expect(await getHover(editor, getPosition("featu|reFlagDefer")))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 Query.featureFlagDefer: Boolean!
 \`\`\`
@@ -32,8 +53,8 @@ Query.featureFlagDefer: Boolean!
 Whether to use defer"
 `);
 
-  // @c|lient(always: false)
-  expect(await getHover(editor, [3, 24])).toMatchInlineSnapshot(`
+  expect(await getHover(editor, getPosition("@c|lient(always: false)")))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 @client(always: Boolean)
 \`\`\`
@@ -43,8 +64,8 @@ Whether to use defer"
 Direct the client to resolve this field locally, either from the cache or local resolvers."
 `);
 
-  // @client(alwa|ys: false)
-  expect(await getHover(editor, [3, 33])).toMatchInlineSnapshot(`
+  expect(await getHover(editor, getPosition("@client(alwa|ys: false)")))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 always: Boolean
 \`\`\`
@@ -55,8 +76,8 @@ When true, the client will never use the cache for this value. See
 https://www.apollographql.com/docs/react/local-state/local-resolvers/#forcing-resolvers-with-clientalways-true"
 `);
 
-  // @expo|rt(as: "defer")
-  expect(await getHover(editor, [3, 49])).toMatchInlineSnapshot(`
+  expect(await getHover(editor, getPosition('@expo|rt(as: "defer")')))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 @export(as: String!)
 \`\`\`
@@ -66,7 +87,9 @@ https://www.apollographql.com/docs/react/local-state/local-resolvers/#forcing-re
 Export this locally resolved field as a variable to be used in the remainder of this query. See
 https://www.apollographql.com/docs/react/local-state/local-resolvers/#using-client-fields-as-variables"
 `);
-  expect(await getHover(editor, [3, 53])).toMatchInlineSnapshot(`
+
+  expect(await getHover(editor, getPosition('@export(a|s: "defer")')))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 as: String!
 \`\`\`
@@ -76,8 +99,8 @@ as: String!
 The variable name to export this field as."
 `);
 
-  // @nonre|active
-  expect(await getHover(editor, [7, 28])).toMatchInlineSnapshot(`
+  expect(await getHover(editor, getPosition("@nonre|active")))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 @nonreactive
 \`\`\`
@@ -89,8 +112,9 @@ This allows parent components to fetch data to be rendered by their children wit
 https://www.apollographql.com/docs/react/data/directives#nonreactive"
 `);
 
-  // @def|er(if: $defer, label: "fc")
-  expect(await getHover(editor, [8, 14])).toMatchInlineSnapshot(`
+  expect(
+    await getHover(editor, getPosition('@def|er(if: $defer, label: "fc")')),
+  ).toMatchInlineSnapshot(`
 "\`\`\`graphql
 @defer(if: Boolean, label: String)
 \`\`\`
@@ -101,8 +125,10 @@ This directive enables your queries to receive data for specific fields incremen
 This is helpful whenever some fields in a query take much longer to resolve than others.
 https://www.apollographql.com/docs/react/data/directives#defer"
 `);
-  //@defer(i|f: $defer, label: "fc")
-  expect(await getHover(editor, [8, 18])).toMatchInlineSnapshot(`
+
+  expect(
+    await getHover(editor, getPosition('@defer(i|f: $defer, label: "fc")')),
+  ).toMatchInlineSnapshot(`
 "\`\`\`graphql
 if: Boolean
 \`\`\`
@@ -111,8 +137,10 @@ if: Boolean
 
 When true fragment may be deferred, if omitted defaults to true."
 `);
-  //@defer(if: $defer, labe|l: "fc")
-  expect(await getHover(editor, [8, 33])).toMatchInlineSnapshot(`
+
+  expect(
+    await getHover(editor, getPosition('@defer(if: $defer, labe|l: "fc")')),
+  ).toMatchInlineSnapshot(`
 "\`\`\`graphql
 label: String
 \`\`\`
@@ -123,8 +151,9 @@ A unique label across all @defer and @stream directives in an operation.
 This label should be used by GraphQL clients to identify the data from patch responses and associate it with the correct fragment.
 If provided, the GraphQL Server must add it to the payload."
 `);
-  // @connec|tion(key: "feed")
-  expect(await getHover(editor, [9, 53])).toMatchInlineSnapshot(`
+
+  expect(await getHover(editor, getPosition('@connec|tion(key: "feed")')))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 @connection(key: String!, filter: [String!])
 \`\`\`
@@ -134,8 +163,9 @@ If provided, the GraphQL Server must add it to the payload."
 Specify a custom store key for this result. See
 https://www.apollographql.com/docs/react/caching/advanced-topics/#the-connection-directive"
 `);
-  // @connection(ke|y: "feed")
-  expect(await getHover(editor, [9, 61])).toMatchInlineSnapshot(`
+
+  expect(await getHover(editor, getPosition('@connection(ke|y: "feed")')))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 key: String!
 \`\`\`

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

@@ -0,0 +1,37 @@
+import { writeFile } from "fs/promises";
+import {
+  reloadService,
+  waitForLSP,
+  resolveRelativeToSampleWorkspace,
+} from "./utils";
+
+test.each([
+  ["cjsConfig", "commonjs"],
+  ["cjsConfig", "module"],
+  ["mjsConfig", "module"],
+  ["mjsConfig", "commonjs"],
+  ["jsConfigWithCJS", "commonjs"],
+  ["jsConfigWithCJS", "module"],
+  ["jsConfigWithESM", "module"],
+  ["jsConfigWithESM", "commonjs"],
+  ["tsConfigWithCJS", "commonjs"],
+  ["tsConfigWithCJS", "module"],
+  ["tsConfigWithESM", "module"],
+  ["tsConfigWithESM", "commonjs"],
+] as const)("%s with `type: '%s'`", async (project, moduleType) => {
+  await writeFile(
+    resolveRelativeToSampleWorkspace(`configFileTypes/${project}/package.json`),
+    JSON.stringify(
+      {
+        name: "test",
+        type: moduleType,
+      },
+      undefined,
+      2,
+    ),
+    "utf-8",
+  );
+  await reloadService();
+  const stats = await waitForLSP(`configFileTypes/${project}/src/test.js`);
+  expect(stats.serviceId).toBe(project);
+});

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

@@ -1,19 +1,38 @@
 import { TextEditor } from "vscode";
-import { closeAllEditors, openEditor, testCompletion, getHover } from "./utils";
+import {
+  closeAllEditors,
+  openEditor,
+  getCompletionItems,
+  getHover,
+  getPositionForEditor,
+  GetPositionFn,
+} from "./utils";
 
 let editor: TextEditor;
+let getPosition: GetPositionFn;
 beforeAll(async () => {
   closeAllEditors();
   editor = await openEditor("httpSchema/src/test.js");
+  getPosition = getPositionForEditor(editor);
 });
 
 test("completion", async () => {
-  await testCompletion(editor, [3, 7], [["books", "[Book]"]]);
-  await testCompletion(editor, [5, 9], [["author", "String"]]);
+  expect(
+    (await getCompletionItems(editor, getPosition("bo|oks")))[0],
+  ).toStrictEqual({
+    label: "books",
+    detail: "[Book]",
+  });
+  expect(
+    (await getCompletionItems(editor, getPosition("au|thor")))[0],
+  ).toStrictEqual({
+    label: "author",
+    detail: "String",
+  });
 });
 
 test("hover", async () => {
-  expect(await getHover(editor, [5, 9])).toMatchInlineSnapshot(`
+  expect(await getHover(editor, getPosition("au|thor"))).toMatchInlineSnapshot(`
 "\`\`\`graphql
 Book.author: String
 \`\`\`"

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

@@ -1,19 +1,38 @@
 import { TextEditor } from "vscode";
-import { closeAllEditors, openEditor, testCompletion, getHover } from "./utils";
+import {
+  closeAllEditors,
+  openEditor,
+  getCompletionItems,
+  getHover,
+  GetPositionFn,
+  getPositionForEditor,
+} from "./utils";
 
 let editor: TextEditor;
+let getPosition: GetPositionFn;
 beforeAll(async () => {
   closeAllEditors();
   editor = await openEditor("localSchema/src/test.js");
+  getPosition = getPositionForEditor(editor);
 });
 
 test("completion", async () => {
-  await testCompletion(editor, [3, 7], [["droid", "Droid"]]);
-  await testCompletion(editor, [4, 8], [["name", "String!"]]);
+  expect(
+    (await getCompletionItems(editor, getPosition("dro|id")))[0],
+  ).toStrictEqual({
+    label: "droid",
+    detail: "Droid",
+  });
+  expect(
+    (await getCompletionItems(editor, getPosition("na|me")))[0],
+  ).toStrictEqual({
+    label: "name",
+    detail: "String!",
+  });
 });
 
 test("hover", async () => {
-  expect(await getHover(editor, [4, 8])).toMatchInlineSnapshot(`
+  expect(await getHover(editor, getPosition("na|me"))).toMatchInlineSnapshot(`
 "\`\`\`graphql
 Droid.name: String!
 \`\`\`

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

@@ -1,20 +1,45 @@
 import { TextEditor } from "vscode";
-import { closeAllEditors, openEditor, testCompletion, getHover } from "./utils";
+import {
+  closeAllEditors,
+  openEditor,
+  getCompletionItems,
+  getHover,
+  GetPositionFn,
+  getPositionForEditor,
+} from "./utils";
 
 let editor: TextEditor;
+let getPosition: GetPositionFn;
 beforeAll(async () => {
   closeAllEditors();
   editor = await openEditor("localSchemaArray/src/test.js");
+  getPosition = getPositionForEditor(editor);
 });
 
 test("completion", async () => {
-  await testCompletion(editor, [3, 7], [["droid", "Droid"]]);
-  await testCompletion(editor, [4, 8], [["name", "String!"]]);
-  await testCompletion(editor, [6, 7], [["planets", "[Planet]"]]);
+  expect(
+    (await getCompletionItems(editor, getPosition("dro|id")))[0],
+  ).toStrictEqual({
+    label: "droid",
+    detail: "Droid",
+  });
+  expect(
+    (await getCompletionItems(editor, getPosition("d|Name: name")))[0],
+  ).toStrictEqual({
+    label: "name",
+    detail: "String!",
+  });
+  expect(
+    (await getCompletionItems(editor, getPosition("pl|anet")))[0],
+  ).toStrictEqual({
+    label: "planets",
+    detail: "[Planet]",
+  });
 });
 
 test("hover", async () => {
-  expect(await getHover(editor, [4, 8])).toMatchInlineSnapshot(`
+  expect(await getHover(editor, getPosition("d|Name: name")))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 Droid.name: String!
 \`\`\`
@@ -23,7 +48,7 @@ Droid.name: String!
 
 What others call this droid"
 `);
-  expect(await getHover(editor, [6, 7])).toMatchInlineSnapshot(`
+  expect(await getHover(editor, getPosition("pl|anet"))).toMatchInlineSnapshot(`
 "\`\`\`graphql
 Query.planets: [Planet]
 \`\`\`"

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

@@ -0,0 +1,150 @@
+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,
+  openEditor,
+  getCompletionItems,
+  getHover,
+  getPositionForEditor,
+  GetPositionFn,
+  getFullSemanticTokens,
+  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`",
+  );
+}
+
+let editor: TextEditor;
+let getPosition: GetPositionFn;
+beforeAll(async () => {
+  closeAllEditors();
+  editor = await openEditor("rover/src/test.graphql");
+  getPosition = getPositionForEditor(editor);
+});
+
+test("hover", async () => {
+  expect(await getHover(editor, getPosition("@over|ride(from")))
+    .toMatchInlineSnapshot(`
+"The [\`@override\`](https://www.apollographql.com/docs/federation/federated-schemas/federated-directives/#override) directive indicates that an object field is now resolved by this subgraph instead of another subgraph where it's also defined. This enables you to migrate a field from one subgraph to another.
+
+You can apply \`@override\` to entity fields and fields of the root operation types (such as \`Query\` and \`Mutation\`). A second \`label\` argument can be used to progressively override a field. See [the docs](https://www.apollographql.com/docs/federation/entities/migrate-fields/#incremental-migration-with-progressive-override) for more information.
+***
+\`\`\`graphql
+directive @override(from: String!, label: String) on FIELD_DEFINITION
+\`\`\`"
+`);
+});
+
+test("completion", async () => {
+  expect(await getCompletionItems(editor, getPosition("@over|ride(from")))
+    .toMatchInlineSnapshot(`
+[
+  {
+    "detail": undefined,
+    "label": "@deprecated",
+  },
+  {
+    "detail": undefined,
+    "label": "@external",
+  },
+  {
+    "detail": undefined,
+    "label": "@federation__authenticated",
+  },
+  {
+    "detail": undefined,
+    "label": "@federation__inaccessible",
+  },
+  {
+    "detail": undefined,
+    "label": "@federation__policy(…)",
+  },
+  {
+    "detail": undefined,
+    "label": "@federation__provides(…)",
+  },
+  {
+    "detail": undefined,
+    "label": "@federation__requiresScopes(…)",
+  },
+  {
+    "detail": undefined,
+    "label": "@federation__tag(…)",
+  },
+  {
+    "detail": undefined,
+    "label": "@override(…)",
+  },
+  {
+    "detail": undefined,
+    "label": "@requires(…)",
+  },
+  {
+    "detail": undefined,
+    "label": "@shareable",
+  },
+]
+`);
+});
+
+test("semantic tokens", async () => {
+  const tokens = await getFullSemanticTokens(editor);
+  expect(tokens[0]).toStrictEqual({
+    startPosition: getPosition('fields: "|a"'),
+    endPosition: getPosition('fields: "a|"'),
+    tokenType: "property",
+    tokenModifiers: [],
+  });
+  expect(tokens[1]).toStrictEqual({
+    startPosition: getPosition('fields: "|c"'),
+    endPosition: getPosition('fields: "c|"'),
+    tokenType: "property",
+    tokenModifiers: [],
+  });
+});
+
+test("definitions", async () => {
+  const definitions = await getDefinitions(editor, getPosition("a: |A"));
+
+  expect(definitions[0].targetUri.toString()).toBe(
+    editor.document.uri.toString(),
+  );
+  expect(
+    editor.document.getText(definitions[0].targetSelectionRange!),
+  ).toMatchInlineSnapshot(`"A"`);
+  expect(editor.document.getText(definitions[0].targetRange))
+    .toMatchInlineSnapshot(`
+"type A @key(fields: "a") {
+  a: ID @override(from: "DNE")
+  b: String! @requires(fields: "c") @shareable
+  c: String! @external
+}"
+`);
+});

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

@@ -2,15 +2,14 @@ import { TextEditor } from "vscode";
 import {
   closeAllEditors,
   openEditor,
-  testCompletion,
+  getCompletionItems,
   getHover,
   getExtension,
   getOutputChannelDocument,
   reloadService,
+  getPositionForEditor,
 } from "./utils";
 import mocks from "../../__e2e__/mocks.js";
-import vscode from "vscode";
-import { scheduler } from "node:timers/promises";
 
 const mockPort = Number(process.env.MOCK_SERVER_PORT);
 beforeAll(async () => {
@@ -19,13 +18,26 @@ beforeAll(async () => {
 
 test("completion", async () => {
   const editor = await openEditor("spotifyGraph/src/test.js");
-  await testCompletion(editor, [4, 9], [["profile", "CurrentUserProfile!"]]);
-  await testCompletion(editor, [6, 15], [["displayName", "String"]]);
+  const getPosition = getPositionForEditor(editor);
+  expect(
+    (await getCompletionItems(editor, getPosition("pr|ofile")))[0],
+  ).toStrictEqual({
+    label: "profile",
+    detail: "CurrentUserProfile!",
+  });
+  expect(
+    (await getCompletionItems(editor, getPosition("dis|playName")))[0],
+  ).toStrictEqual({
+    label: "displayName",
+    detail: "String",
+  });
 });
 
 test("hover", async () => {
   const editor = await openEditor("spotifyGraph/src/test.js");
-  expect(await getHover(editor, [4, 9])).toMatchInlineSnapshot(`
+  const getPosition = getPositionForEditor(editor);
+  expect(await getHover(editor, getPosition("pr|ofile")))
+    .toMatchInlineSnapshot(`
 "\`\`\`graphql
 CurrentUser.profile: CurrentUserProfile!
 \`\`\`

package/src/language-server/__e2e__/utils.ts

@@ -7,6 +7,26 @@ import { VSCodeGraphQLExtension } from "src/extension";
 function resolve(file: string) {
   return join(__dirname, "..", "..", "..", "sampleWorkspace", file);
 }
+export { resolve as resolveRelativeToSampleWorkspace };
+
+export type GetPositionFn = ReturnType<typeof getPositionForEditor>;
+export function getPositionForEditor(editor: vscode.TextEditor) {
+  return function getPosition(cursor: `${string}|${string}`) {
+    if (cursor.indexOf("|") !== cursor.lastIndexOf("|")) {
+      throw new Error(
+        "`getPosition` cursor description can only contain one |",
+      );
+    }
+    const text = editor.document.getText();
+    const idx = text.indexOf(cursor.replace("|", ""));
+    if (idx !== text.lastIndexOf(cursor.replace("|", ""))) {
+      throw new Error("`getPosition` cursor description is not unique");
+    }
+    const cursorIndex = idx + cursor.indexOf("|");
+    const position = editor.document.positionAt(cursorIndex);
+    return position;
+  };
+}
 
 export async function closeAllEditors() {
   while (vscode.window.visibleTextEditors.length > 0) {
@@ -46,27 +66,32 @@ export function waitForLSP(file: string) {
       uri.toString(),
     );
     expect(stats.loaded).toBe(true);
-    return stats;
+    return stats as ProjectStats & { loaded: true };
   });
 }
 
-export async function testCompletion(
+export async function getCompletionItems(
   editor: vscode.TextEditor,
-  [line, character]: [number, number],
-  expected: Array<[label: string, detail: string]>,
+  position: vscode.Position,
 ) {
+  let result: { label: string; detail: string | undefined }[] | undefined = [];
   await waitFor(async () => {
-    editor.selection = new vscode.Selection(line, character, line, character);
+    editor.selection = new vscode.Selection(
+      position.line,
+      position.character,
+      position.line,
+      position.character,
+    );
     // without this, the completion list is not updated
     await scheduler.wait(300);
     const completions =
       await vscode.commands.executeCommand<vscode.CompletionList>(
         "vscode.executeCompletionItemProvider",
         editor.document.uri,
-        new vscode.Position(line, character),
+        position,
       );
-
-    const labels = completions.items.slice(0, expected.length).map((item) =>
+    expect(completions.items).not.toHaveLength(0);
+    const labels = completions.items.map((item) =>
       typeof item.label === "string"
         ? { label: item.label, detail: "" }
         : {
@@ -74,23 +99,27 @@ export async function testCompletion(
             detail: item.detail,
           },
     );
-    expect(labels).toStrictEqual(
-      expected.map(([label, detail]) => ({ label, detail })),
-    );
+    result = labels;
   });
+  return result;
 }
 
 export async function getHover(
   editor: vscode.TextEditor,
-  [line, character]: [number, number],
+  position: vscode.Position,
 ) {
-  editor.selection = new vscode.Selection(line, character, line, character);
+  editor.selection = new vscode.Selection(
+    position.line,
+    position.character,
+    position.line,
+    position.character,
+  );
   // without this, the completion list is not updated
   await scheduler.wait(300);
   const hovers = await vscode.commands.executeCommand<vscode.Hover[]>(
     "vscode.executeHoverProvider",
     editor.document.uri,
-    new vscode.Position(line, character),
+    position,
   );
 
   const item = hovers[0];
@@ -149,3 +178,76 @@ export async function reloadService() {
   await reloaded;
   await scheduler.wait(100);
 }
+
+export async function getFullSemanticTokens(editor: vscode.TextEditor) {
+  const legend = await vscode.commands.executeCommand<
+    vscode.SemanticTokensLegend | undefined
+  >(
+    // https://github.com/microsoft/vscode/blob/d90ab31527203cdb15056df0dc84ab9ddcbbde40/src/vs/workbench/api/common/extHostApiCommands.ts#L220
+    "vscode.provideDocumentSemanticTokensLegend",
+    editor.document.uri,
+  );
+  expect(legend).toBeDefined();
+  const tokens = await vscode.commands.executeCommand<
+    vscode.SemanticTokens | undefined
+  >(
+    // https://github.com/microsoft/vscode/blob/d90ab31527203cdb15056df0dc84ab9ddcbbde40/src/vs/workbench/api/common/extHostApiCommands.ts#L229
+    "vscode.provideDocumentSemanticTokens",
+    editor.document.uri,
+  );
+  expect(tokens).toBeDefined();
+
+  return decodeSemanticTokens(tokens!, legend!);
+}
+
+function decodeSemanticTokens(
+  tokens: vscode.SemanticTokens,
+  legend: vscode.SemanticTokensLegend,
+) {
+  const tokenArr = Array.from(tokens.data);
+  const decodedTokens: {
+    startPosition: vscode.Position;
+    endPosition: vscode.Position;
+    tokenType: string;
+    tokenModifiers: string[];
+  }[] = [];
+  let line = 0,
+    start = 0;
+  for (let pos = 0; pos < tokenArr.length; pos += 5) {
+    const [deltaLine, deltaStart, length, tokenType, tokenModifiers] =
+      tokenArr.slice(pos, pos + 5);
+    if (deltaLine) {
+      line += deltaLine;
+      start = 0;
+    }
+    start += deltaStart;
+    const decodedModifiers: string[] = [];
+    for (let modifiers = tokenModifiers; modifiers > 0; modifiers >>= 1) {
+      decodedModifiers.push(legend.tokenModifiers[modifiers & 0xf]);
+    }
+    const startPosition = new vscode.Position(line, start);
+    const endPosition = startPosition.translate(0, length);
+    decodedTokens.push({
+      startPosition,
+      endPosition,
+      tokenType: legend.tokenTypes[tokenType],
+      tokenModifiers: decodedModifiers,
+    });
+  }
+  return decodedTokens;
+}
+
+export async function getDefinitions(
+  editor: vscode.TextEditor,
+  position: vscode.Position,
+) {
+  return vscode.commands.executeCommand<
+    // this is not the correct type, but the best match with public types I could find
+    vscode.LocationLink[]
+  >(
+    // https://github.com/microsoft/vscode/blob/d90ab31527203cdb15056df0dc84ab9ddcbbde40/src/vs/workbench/api/common/extHostApiCommands.ts#L87
+    "vscode.executeDefinitionProvider",
+    editor.document.uri,
+    position,
+  );
+}

package/src/language-server/config/cache-busting-resolver.js

@@ -24,20 +24,12 @@ async function resolve(specifier, context, nextResolve) {
   if (context.importAttributes.as !== "cachebust") {
     return nextResolve(specifier, context);
   }
-  if (context.importAttributes.format) {
-    // no need to resolve at all, we have all necessary information
-    return {
-      url: bustFileName(specifier),
-      format: context.importAttributes.format,
-      importAttributes: context.importAttributes,
-      shortCircuit: true,
-    };
-  }
-  const result = await nextResolve(specifier, context);
+  // no need to resolve at all, we have all necessary information
   return {
-    ...result,
-    url: bustFileName(result.url),
+    url: bustFileName(specifier),
+    format: context.importAttributes.format,
     importAttributes: context.importAttributes,
+    shortCircuit: true,
   };
 }
 

package/src/language-server/config/cache-busting-resolver.types.ts

@@ -4,7 +4,7 @@ export type ImportAttributes =
   | {
       as: "cachebust";
       contents: string;
-      format?: Format;
+      format: Format;
     }
   | { as?: undefined };
 

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

@@ -1,5 +1,5 @@
 import { Loader } from "cosmiconfig";
-import { dirname } from "node:path";
+import { dirname, extname } from "node:path";
 import typescript from "typescript";
 import { pathToFileURL } from "node:url";
 import { register } from "node:module";
@@ -59,19 +59,7 @@ async function load(
     error.message = `TypeScript Error in ${filepath}:\n${error.message}`;
     throw error;
   }
-  // eslint-disable-next-line @typescript-eslint/return-await
-  const imported = await import(
-    filepath,
-    //@ts-ignore
-    {
-      with: {
-        as: "cachebust",
-        contents: transpiledContent,
-        format: type,
-      } satisfies ImportAttributes,
-    }
-  );
-  return imported.default;
+  return loadCachebustedJs(filepath, transpiledContent, type);
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -92,15 +80,44 @@ function resolveTsConfig(directory: string): any {
 }
 
 export const loadJs: Loader = async function loadJs(filepath, contents) {
+  const extension = extname(filepath);
+  if (extension === ".mjs") {
+    return loadCachebustedJs(filepath, contents, "module");
+  }
+  if (extension === ".cjs") {
+    return loadCachebustedJs(filepath, contents, "commonjs");
+  }
+  try {
+    return await loadCachebustedJs(filepath, contents, "module");
+  } catch (error) {
+    if (
+      error instanceof Error &&
+      // [ERROR] ReferenceError: module is not defined in ES module scope
+      error.message.includes("module is not defined")
+    ) {
+      return loadCachebustedJs(filepath, contents, "commonjs");
+    } else {
+      throw error;
+    }
+  }
+};
+
+async function loadCachebustedJs(
+  filename: string,
+  contents: string,
+  type: "module" | "commonjs",
+) {
   return (
     await import(
-      filepath, // @ts-ignore
+      filename,
+      // @ts-ignore
       {
         with: {
           as: "cachebust",
           contents,
+          format: type,
         } satisfies ImportAttributes,
       }
     )
   ).default;
-};
+}