apollographql / apollo-tooling

✏️ Apollo CLI for client tooling (Mostly replaced by Rover)
https://apollographql.com
MIT License
3.04k stars 467 forks source link

Unable to use env variable in config when using with Vite #2633

Closed Lamer217 closed 2 years ago

Lamer217 commented 2 years ago

Though I understand that this is not an actual bug, particularly not from the side of the extension developers, I hope to get an advice here on how to find a way around it while still using the env variable. And hopefully this helps someone having the same issue in future.

Intended outcome: Successfully use env variable in extension config to reference Apollo link in the backend

Actual outcome: Extension complains about syntax error in the output like so:

[ERROR] A config file failed to load with options: {"configPath":"/Users/malesh/Codebase/rebuild-webapp/src","requireConfig":true}.
    The error was: SyntaxError: Cannot use 'import.meta' outside a module
    at Object.loadConfig (/Users/malesh/.vscode/extensions/apollographql.vscode-apollo-1.19.11/lib/language-server/config/loadConfig.js:44:27)
    at async GraphQLWorkspace.reloadProjectForConfig (/Users/malesh/.vscode/extensions/apollographql.vscode-apollo-1.19.11/lib/language-server/workspace.js:108:22)
    at /Users/malesh/.vscode/extensions/apollographql.vscode-apollo-1.19.11/src/extension.ts:80:17
    at handleNotification (/Users/malesh/.vscode/extensions/apollographql.vscode-apollo-1.19.11/node_modules/vscode-jsonrpc/lib/main.js:489:43)
    at processMessageQueue (/Users/malesh/.vscode/extensions/apollographql.vscode-apollo-1.19.11/node_modules/vscode-jsonrpc/lib/main.js:260:17)
    at Immediate._onImmediate (/Users/malesh/.vscode/extensions/apollographql.vscode-apollo-1.19.11/node_modules/vscode-jsonrpc/lib/main.js:247:13)

How to reproduce the issue: 1) Use Vite + Vue for your front-end. 2) Input this to your apollo.config.js:

// config for the vscode extension "Apollo GraphQL"
module.exports = {
  client: {
    service: {
      name: "rebuild-webapp",
      // URL to the GraphQL API
      url: import.meta.env.APOLLO_API_URL,
    },
    // Files processed by the extension (queries and schemas)
    // includes: ["src/**/*.js", "src/**/*.vue"],
  },
};

Versions v1.19.11

Lamer217 commented 2 years ago

This solved my issue!

// config for the vscode extension "Apollo GraphQL"
module.exports = {
  client: {
    service: {
      name: "rebuild-webapp",
      // URL to the GraphQL API
      url: process.env.APOLLO_API_URL,
    },
    // Files processed by the extension
    includes: ["src/**/*.js", "src/**/*.vue"],
  },
};