Extension configuration through .env files, is it possible?

[mauro-ni]

Hi,
I have a React application and I use ViteJs as a Front End Tooling.
My application is configured through .env files: in these files I also put the url to the GraphQl service (backend).
How can I read the GraphQl service url from .env files and properly setup apollo.config.js file?
Is it possible?
Could you please provide an example?

Many thanks in advance,
Mauro

┆Issue is synchronized with this Jira Task by Unito

[jpvajda]

@mauro-ni you should check out our documentation on configuring the vscode extension. I believe it will answer your question.

[mauro-ni]

@jpvajda many thanks for the replay.
I had read the documentation, but I didn't find anything about env variables that can be used directly in apollo.config.js.
I would like to be able to read client service url from .env file (e.g. variable called VITE_API_URL) and doing something as follows:

module.exports = {
  client: {
    service: {
      name: "my-app",
      url: VITE_API_URL,
    },
  },
};

Is this possible?

Many thanks in advance!

Mauro

[jpvajda]

@mauro-ni did this setup not work for you? https://www.apollographql.com/docs/devtools/apollo-config/#server-projects Specifically Option 1, for a remote endpoint.

[mauro-ni]

@jpvajda if i put the url directly in apollo.config.js, it works. But as specified in the previous comment I would like to define the url in a .env file.

.env

VITE_API_URL="https://api.example.com"

apollo.config.js

module.exports = {
    client: {
        service: {
            name: "my-app",
            url: VITE_API_URL,
        },
    },
};

Is it possible to load the .env file and use the defined variable in apollo.config.js file?

Many thanks,
Mauro

[jpvajda]

@mauro-ni I see. For what reason specifically? Isn't the URL public? What concerns do you have with the URL being in the apollo.config.js file

[mauro-ni]

@jpvajda URL is public.

The main reasons for this requirement are:

1. api url defined only in one place (otherwise I have to put it in apollo client configuration, in vitejs configuration, in apollo.config.js for appollo client extension configuration, ...)
2. put the configuration of the application only in env files (please consider that my app is a template that will be used by collegues to develop their REact appplications)

Many thanks in advance,
Mauro

[jpvajda]

@mauro-ni gotcha, thanks for clarifying. I'll label this as an enhancement and we can consider it for the future. We accept PRs as well , I think the code that needs to change is located in this file, and we look to have a test for the values as well. If you want to try to add this improvement we'd be happy to review the PR for you.

[safeamiiir]

Hey @jpvajda,

Wanted to say I have the same issue. Given that we had to save API's URL as an environment variable I had to either hardcode the URL here and ask the others to change it or just yet not use the extension. second option selected for the time being but I'll be happy to help if you can give me a clue where to start with.

Thanks!