vscode-apollo 2.2.1 → 2.3.0

package/.circleci/config.yml

@@ -6,7 +6,7 @@ orbs:
 executors:
   node:
     docker:
-      - image: cimg/node:22.7.0
+      - image: cimg/node:22.8.0
     working_directory: ~/vscode-graphql
 
 commands:

package/.github/workflows/build-prs.yml

@@ -11,7 +11,7 @@ jobs:
         with:
           cache: "npm"
       - run: npm install
-      - run: echo PKG_VERSION="$(git show --no-patch --format=0.0.0-build.%ct.pr.${{ github.event.pull_request.number }}.commit.%h)" >> $GITHUB_ENV
+      - run: echo PKG_VERSION="$(git show --no-patch --format=0.0.0-build-%ct.pr-${{ github.event.pull_request.number }}.commit-%h)" >> $GITHUB_ENV
       - run: npm pkg set "version=${{ env.PKG_VERSION }}"
       - run: npx -y @vscode/vsce package --out vscode-apollo-${{ env.PKG_VERSION }}.vsix
 

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # CHANGELOG
 
+## 2.3.0
+
+### Minor Changes
+
+- [#209](https://github.com/apollographql/vscode-graphql/pull/209) [`fc73ed30`](https://github.com/apollographql/vscode-graphql/commit/fc73ed3089e281aa1234268f4ec78e6aa68eae15) Thanks [@phryneas](https://github.com/phryneas)! - Change default recommended configuration file format to `json`.
+
+### Patch Changes
+
+- [#200](https://github.com/apollographql/vscode-graphql/pull/200) [`d6c6af81`](https://github.com/apollographql/vscode-graphql/commit/d6c6af811e1c04901990278e3b76057ef2221911) Thanks [@phryneas](https://github.com/phryneas)! - Fixed an issue where the configuration was not reloaded when the `.env.local` file changed.
+
+- [#202](https://github.com/apollographql/vscode-graphql/pull/202) [`ea5cc094`](https://github.com/apollographql/vscode-graphql/commit/ea5cc0944b7015cd7b2cfee15993469c124a8356) Thanks [@phryneas](https://github.com/phryneas)! - Prevent configuration file parsing loop when transpiling TypeScript configs.
+
+- [#204](https://github.com/apollographql/vscode-graphql/pull/204) [`c2351d2e`](https://github.com/apollographql/vscode-graphql/commit/c2351d2e179eb92fb493a4209a3461c8aa92c979) Thanks [@phryneas](https://github.com/phryneas)! - Fix a bug where config file changes could not be picked up
+
+- [#200](https://github.com/apollographql/vscode-graphql/pull/200) [`d6c6af81`](https://github.com/apollographql/vscode-graphql/commit/d6c6af811e1c04901990278e3b76057ef2221911) Thanks [@phryneas](https://github.com/phryneas)! - Add support for `apollo.config.yml`, `apollo.config.yaml` and `apollo.config.json`.
+
 ## 2.2.1
 
 ### Patch Changes

package/README.md

@@ -26,31 +26,35 @@ The Apollo GraphQL extension for VS Code brings an all-in-one tooling experience
 
 <h2 id="getting-started">Getting started</h2>
 
-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. After that's done:
+For the VS Code plugin to know how to find the schema, it needs to be linked to either a published schema or a local one.
 
-1. Create an `apollo.config.js` file at the root of the project.
-   Alternatively, you can create a `cjs`, `mjs`, or `ts` file with the same configuration.
-2. Obtain a [Personal API key](https://www.apollographql.com/docs/graphos/api-keys) from GraphOS Studio.
+First, create an `apollo.config.json` file at the root of the project.
+Alternatively, you can create a `yaml`, `cjs`, `mjs`, or `ts` file with the same configuration.
 
-<h3 id="apollo-config">Setting up an Apollo config</h3>
+For the contents of this configuration file, select one of these options:
 
-For the VS Code plugin to know how to find the schema, it needs to be linked to either a published schema or a local one. To link a project to a published schema, edit the `apollo.config.js` file to look like this:
+<details>
+<summary>
+<h3>Configure extension for schemas published to Apollo GraphOS</h3>
+</summary>
 
-```js
-module.exports = {
-  client: {
-    service: "my-graphql-app",
-  },
-};
+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.
+
+After that's done, edit the `apollo.config.json` file to look like this:
+
+```json
+{
+  "client": {
+    "service": "graphos-graph-name"
+  }
+}
 ```
 
 The `service` name is the name of the graph you've created in [GraphOS Studio](https://studio.apollographql.com).
 
 See [additional configuration options](#additional-apollo-config-options).
 
-<h3 id="api-key">Setting up the <code>.env</code> file</h3>
-
-To authenticate with GraphOS Studio to pull down your schema, create a `.env` file in the same directory as the `apollo.config.js` file. This should be an untracked file (that is, don't commit it to Git).
+To authenticate with GraphOS Studio to pull down your schema, create a `.env` file in the same directory as the `apollo.config.json` file. This should be an untracked file (that is, don't commit it to Git).
 
 Then go to your [User Settings page](https://studio.apollographql.com/user-settings/api-keys?referrer=docs-content) in GraphOS Studio to create a new Personal API key.
 
@@ -64,56 +68,68 @@ APOLLO_KEY=<enter copied key here>
 
 After this is done, VS Code can be reloaded and the Apollo integration will connect to GraphOS Studio to provide autocomplete, validation, and more.
 
-<h3 id="local-schemas">Local schemas</h3>
+</details>
+
+<details>
+<summary>
+<h3 id="local-schemas">Configure extension to use introspection from a locally running service</h3>
+</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.js` file can be linked to a local service definition:
+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:
 
-```js
-module.exports = {
-  client: {
-    service: {
-      name: "my-graphql-app",
-      url: "http://localhost:4000/graphql",
-    },
-  },
-};
+```json
+{
+  "client": {
+    "service": {
+      "name": "my-graphql-app",
+      "url": "http://localhost:4000/graphql"
+    }
+  }
+}
 ```
 
 Linking to the local schema won't provide all features, such as switching graph variants and performance metrics.
 
-<h3 id="local-schema-files">Local schema files</h3>
+</details>
+
+<details>
+<summary>
+<h3 id="local-schema-files">Configure extension for local schema files</h3>
+</summary>
 
 You might not always have a running server to link to, so the extension also supports linking to a local schema file.
 This is useful for working on a schema in isolation or for testing out new features.
-To link to a local schema file, add the following to the `apollo.config.js` file:
+To link to a local schema file, add the following to the `apollo.config.json` file:
 
-```js
-module.exports = {
-  client: {
-    service: {
+```json
+{
+  "client": {
+    "service": {
       // can be a string pointing to a single file or an array of strings
-      localSchemaFile: "./path/to/schema.graphql",
-    },
-  },
-};
+      "localSchemaFile": "./path/to/schema.graphql"
+    }
+  }
+}
 ```
 
-<h3 id="client-only-schemas">Client-only schemas</h3>
+</details>
+
+<h3 id="client-only-schemas">Adding Client-only schemas</h3>
 
 One of the best features of the VS Code extension is the automatic merging of remote schemas and local ones when using integrated state management with Apollo Client. This happens automatically whenever schema definitions are found within a client project. By default, the VS Code extension will look for all JavaScript, TypeScript and GraphQL files under `./src` to find both the operations and schema definitions for building a complete schema for the application.
 
-Client side schema definitions can be spread throughout the client app project and will be merged together to create one single schema. The default behavior can be controlled by adding specifications to the `apollo.config.js`:
+Client side schema definitions can be spread throughout the client app project and will be merged together to create one single schema. The default behavior can be controlled by adding specifications to the `apollo.config.json`:
 
-```js
-module.exports = {
-  client: {
-    service: "my-graphql-app",
+```json
+{
+  "client": {
+    // "service": <your service configuration>,
     // array of glob patterns
-    includes: ["./src/**/*.js"],
+    "includes": ["./src/**/*.js"],
     // array of glob patterns
-    excludes: ["**/__tests__/**"],
-  },
-};
+    "excludes": ["**/__tests__/**"]
+  }
+}
 ```
 
 <h3 id="get-the-extension">Get the extension</h3>
@@ -195,11 +211,11 @@ _Optional_ - custom tagged template literal.
 
 When using GraphQL with JavaScript or TypeScript projects, it is common to use the `gql` tagged template literal to write out operations. Apollo tools look through your files for the `gql` tag to extract your queries, so if you use a different template literal, you can configure it like so:
 
-```js
-module.exports = {
-  client: {
-    tagName: "graphql", // highlight-line
-    service: ...
+```json
+{
+  "client": {
+    "tagName": "graphql",
+    "service": //...
   }
-};
+}
 ```

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.2.1",
+  "version": "2.3.0",
   "referenceID": "87197759-7617-40d0-b32e-46d378e907c7",
   "author": "Apollo GraphQL <opensource@apollographql.com>",
   "license": "MIT",
@@ -48,6 +48,7 @@
     "graphql": "16.9.0",
     "graphql-language-service": "5.2.2",
     "graphql-tag": "2.12.6",
+    "jsonc-parser": "^3.3.1",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
     "lodash.throttle": "4.1.1",
@@ -84,6 +85,7 @@
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-prettier": "5.0.1",
     "graphql-http": "^1.22.1",
+    "import-fresh": "^3.3.0",
     "jest": "29.7.0",
     "jest-environment-node": "29.7.0",
     "memfs": "4.11.1",
@@ -93,7 +95,8 @@
     "ts-jest": "29.1.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
-    "vscode-tmgrammar-test": "^0.1.3"
+    "vscode-tmgrammar-test": "^0.1.3",
+    "zod-to-json-schema": "^3.23.3"
   },
   "publisher": "apollographql",
   "categories": [
@@ -103,7 +106,8 @@
   "icon": "images/icon-apollo-blue-400x400.png",
   "activationEvents": [
     "workspaceContains:**/apollo.config.[jt]s",
-    "workspaceContains:**/apollo.config.[cm]js"
+    "workspaceContains:**/apollo.config.[cm]js",
+    "workspaceContains:**/apollo.config.{yaml,yml,json}"
   ],
   "contributes": {
     "configuration": {
@@ -147,6 +151,12 @@
           "GraphQL"
         ],
         "configuration": "./graphql.configuration.json"
+      },
+      {
+        "id": "jsonc",
+        "filenames": [
+          "apollo.config.json"
+        ]
       }
     ],
     "grammars": [
@@ -231,6 +241,23 @@
         }
       }
     ],
+    "jsonValidation": [
+      {
+        "fileMatch": "apollo.config.json",
+        "url": "./schemas/apollo.config.schema.json"
+      }
+    ],
+    "__yamlValidation": "For context, see https://github.com/redhat-developer/vscode-yaml?tab=readme-ov-file#mapping-a-schema-in-an-extension",
+    "yamlValidation": [
+      {
+        "fileMatch": "apollo.config.yml",
+        "url": "./schemas/apollo.config.schema.json"
+      },
+      {
+        "fileMatch": "apollo.config.yaml",
+        "url": "./schemas/apollo.config.schema.json"
+      }
+    ],
     "commands": [
       {
         "command": "apollographql/selectSchemaTag",

package/renovate.json

@@ -5,19 +5,19 @@
     {
       "groupName": "all @types",
       "groupSlug": "all-types",
-      "matchPackagePatterns": ["@types/*"]
+      "matchPackageNames": ["/@types/*/"]
     },
     {
       "groupName": "all devDependencies",
       "groupSlug": "all-dev",
-      "matchPackagePatterns": ["*"],
-      "matchDepTypes": ["devDependencies"]
+      "matchDepTypes": ["devDependencies"],
+      "matchPackageNames": ["*"]
     },
     {
       "groupName": "all dependencies - patch updates",
       "groupSlug": "all-patch",
-      "matchPackagePatterns": ["*"],
-      "matchUpdateTypes": ["patch"]
+      "matchUpdateTypes": ["patch"],
+      "matchPackageNames": ["*"]
     }
   ],
   "ignoreDeps": [

package/sampleWorkspace/localSchemaArray/apollo.config.json

@@ -0,0 +1,9 @@
+{
+  "client": {
+    "service": {
+      // test
+      "name": "localMultiSchema",
+      "localSchemaFile": ["./starwarsSchema.graphql", "./planets.graphql"]
+    }
+  }
+}

package/sampleWorkspace/rover/apollo.config.yaml

@@ -0,0 +1,2 @@
+rover:
+  profile: default

package/schemas/apollo.config.schema.json

@@ -0,0 +1,184 @@
+{
+  "allOf": [
+    {
+      "$ref": "#/definitions/baseConfig"
+    },
+    {
+      "type": "object",
+      "properties": {
+        "client": {
+          "$ref": "#/definitions/clientConfig"
+        }
+      },
+      "required": [
+        "client"
+      ]
+    }
+  ],
+  "definitions": {
+    "clientConfig": {
+      "type": "object",
+      "properties": {
+        "service": {
+          "anyOf": [
+            {
+              "type": "string",
+              "description": "The name of the Apollo Studio graph to use. Alternatively pass in an object to configure a local schema."
+            },
+            {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "The name your project will be referred to by the Apollo GraphQL extension."
+                },
+                "url": {
+                  "type": "string",
+                  "description": "URL of a GraphQL to use for the GraphQL Schema for this project. Needs introspection enabled."
+                },
+                "headers": {
+                  "type": "object",
+                  "additionalProperties": {
+                    "type": "string"
+                  },
+                  "default": {},
+                  "description": "Additional headers to send to the server."
+                },
+                "skipSSLValidation": {
+                  "type": "boolean",
+                  "default": false,
+                  "description": "Skip SSL validation. May be required for self-signed certificates."
+                }
+              },
+              "required": [
+                "url"
+              ],
+              "additionalProperties": false,
+              "description": "Configuration for using a local schema from a URL."
+            },
+            {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "description": "The name your project will be referred to by the Apollo GraphQL extension."
+                },
+                "localSchemaFile": {
+                  "anyOf": [
+                    {
+                      "type": "string",
+                      "description": "Path to a local schema file to use as GraphQL Schema for this project. Can be a string or an array of strings to merge multiple partial schemas into one."
+                    },
+                    {
+                      "type": "array",
+                      "items": {
+                        "type": "string"
+                      },
+                      "description": "Path to a local schema file to use as GraphQL Schema for this project. Can be a string or an array of strings to merge multiple partial schemas into one."
+                    }
+                  ],
+                  "description": "Path to a local schema file to use as GraphQL Schema for this project. Can be a string or an array of strings to merge multiple partial schemas into one."
+                }
+              },
+              "required": [
+                "localSchemaFile"
+              ],
+              "additionalProperties": false,
+              "description": "Configuration for using a local schema from a file."
+            }
+          ],
+          "description": "A string to refer to a graph in Apollo Studio, or an object for a local schema."
+        },
+        "validationRules": {
+          "anyOf": [
+            {
+              "type": "array",
+              "description": "Additional validation rules to check for. To use this feature, please use a configuration file format that allows passing JavaScript objects."
+            }
+          ],
+          "description": "Additional validation rules to check for. To use this feature, please use a configuration file format that allows passing JavaScript objects."
+        },
+        "includes": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "description": "An array of glob patterns this project should be active on. The Apollo GraphQL extension will only support IntelliSense-like features in files listed here."
+        },
+        "excludes": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "default": [
+            "**/node_modules",
+            "**/__tests__"
+          ],
+          "description": "Files to exclude from this project. The Apollo GraphQL extension will not provide IntelliSense-like features in these files."
+        },
+        "tagName": {
+          "type": "string",
+          "default": "gql",
+          "description": "The name of the template literal tag or function used in JavaScript files to declare GraphQL Documents."
+        },
+        "clientOnlyDirectives": {
+          "description": "This option is no longer supported, please remove it from your configuration file."
+        },
+        "clientSchemaDirectives": {
+          "description": "This option is no longer supported, please remove it from your configuration file."
+        },
+        "statsWindow": {
+          "description": "This option is no longer supported, please remove it from your configuration file."
+        },
+        "name": {
+          "description": "This option is no longer supported, please remove it from your configuration file."
+        },
+        "referenceId": {
+          "description": "This option is no longer supported, please remove it from your configuration file."
+        },
+        "version": {
+          "description": "This option is no longer supported, please remove it from your configuration file."
+        }
+      },
+      "required": [
+        "service"
+      ],
+      "additionalProperties": false,
+      "description": "Configuration for a Client project."
+    },
+    "engineConfig": {
+      "type": "object",
+      "properties": {
+        "endpoint": {
+          "type": "string",
+          "default": "https://graphql.api.apollographql.com/api/graphql",
+          "description": "The URL of the Apollo Studio API."
+        },
+        "apiKey": {
+          "type": "string",
+          "description": "The API key to use for Apollo Studio. If possible, use a `.env` file or `.env.local` file instead to store secrets like this."
+        }
+      },
+      "additionalProperties": false,
+      "description": "Network configuration for Apollo Studio API."
+    },
+    "baseConfig": {
+      "type": "object",
+      "properties": {
+        "engine": {
+          "$ref": "#/definitions/engineConfig",
+          "default": {},
+          "description": "Network configuration for Apollo Studio API."
+        },
+        "client": {
+          "description": "Configuration for a Client project."
+        },
+        "service": {
+          "description": "This option is no longer supported, please remove it from your configuration file."
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

package/src/build.js

@@ -1,11 +1,19 @@
 const esbuild = require("esbuild");
+const { zodToJsonSchema } = require("zod-to-json-schema");
+const { writeFileSync } = require("fs");
+const importFresh = require("import-fresh");
 
 const production = process.argv.includes("--production");
 const watch = process.argv.includes("--watch");
 
 async function main() {
   const ctx = await esbuild.context({
-    entryPoints: ["src/extension.ts", "src/language-server/server.ts"],
+    entryPoints: [
+      "src/extension.ts",
+      "src/language-server/server.ts",
+      "src/language-server/config/config.ts",
+      "src/language-server/config/cache-busting-resolver.js",
+    ],
     bundle: true,
     format: "cjs",
     minify: production,
@@ -19,6 +27,8 @@ async function main() {
     plugins: [
       /* add to the end of plugins array */
       esbuildProblemMatcherPlugin,
+      buildJsonSchemaPlugin,
+      resolvePlugin,
     ],
   });
   if (watch) {
@@ -51,6 +61,48 @@ const esbuildProblemMatcherPlugin = {
   },
 };
 
+const buildJsonSchemaPlugin = {
+  name: "build-json-schema",
+  setup(build) {
+    build.onEnd(() => {
+      const {
+        configSchema,
+        clientConfig,
+        // roverConfig,
+        engineConfig,
+        baseConfig,
+        // @ts-ignore
+      } = importFresh("../lib/language-server/config/config.js");
+
+      const jsonSchema = zodToJsonSchema(configSchema, {
+        errorMessages: true,
+        definitions: {
+          clientConfig,
+          //roverConfig,
+          engineConfig,
+          baseConfig,
+        },
+      });
+      writeFileSync(
+        "./schemas/apollo.config.schema.json",
+        JSON.stringify(jsonSchema, null, 2),
+      );
+    });
+  },
+};
+
+const resolvePlugin = {
+  name: "resolve",
+  setup(build) {
+    build.onResolve(
+      { filter: /^jsonc-parser$/ },
+      async ({ path, ...options }) => {
+        return build.resolve("jsonc-parser/lib/esm/main.js", options);
+      },
+    );
+  },
+};
+
 main().catch((e) => {
   console.error(e);
   process.exit(1);

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

@@ -174,7 +174,10 @@ Object {
       expect(config?.client?.service).toEqual("hello");
     });
 
-    it("loads config from a cjs file", async () => {
+    // we skip these tests because ts-jest transpiles every `import` down to a `require` call,
+    // which messes up all the importing anyways.
+    // we have to rely on our E2E tests to ensure that config files resolve correctly
+    it.skip("loads config from a cjs file", async () => {
       writeFilesToDir(dir, {
         "apollo.config.cjs": `module.exports = {"client": {"service": "hello"} }`,
       });
@@ -182,13 +185,43 @@ Object {
       expect(config?.client?.service).toEqual("hello");
     });
 
-    it("loads config from a mjs file", async () => {
+    it.skip("loads config from a mjs file", async () => {
       writeFilesToDir(dir, {
         "apollo.config.mjs": `export default {"client": {"service": "hello"} }`,
       });
       const config = await loadConfig({ configPath: dirPath });
       expect(config?.client?.service).toEqual("hello");
     });
+
+    it("loads config from a yml file", async () => {
+      writeFilesToDir(dir, {
+        "apollo.config.yml": `
+client:
+  service: hello
+`,
+      });
+      const config = await loadConfig({ configPath: dirPath });
+      expect(config?.client?.service).toEqual("hello");
+    });
+
+    it("loads config from a yaml file", async () => {
+      writeFilesToDir(dir, {
+        "apollo.config.yaml": `
+client:
+  service: hello
+`,
+      });
+      const config = await loadConfig({ configPath: dirPath });
+      expect(config?.client?.service).toEqual("hello");
+    });
+
+    it("loads config from a json file", async () => {
+      writeFilesToDir(dir, {
+        "apollo.config.json": `{"client": /* testing jsonc */ {"service": "hello"} }`,
+      });
+      const config = await loadConfig({ configPath: dirPath });
+      expect(config?.client?.service).toEqual("hello");
+    });
   });
 
   describe("errors", () => {