Set Graphql URI in React with .env

Question

I'm trying to develop using localhost on one machine (via localhost:5000/graphql) and using Github codespaces on another (via https://githubuser-repo-wackycode-5000.githubpreview.dev/graphql).

In my index.tsx I have:

const graphqlHost: string = (process.env.GRAPHQL_HOST as string);

console.log(graphqlHost);

const httpLink = createHttpLink({
  uri: graphqlHost,
  credentials: 'same-origin'

});

My .env (located just outside of /src looks as follows:

# GRAPHQL_HOST="localhost:5000/graphql"
GRAPHQL_HOST="https://githubuser-repo-wackycode-5000.githubpreview.dev/graphql"

Error I'm getting (obviously not resolving .env): Module not found: Can't resolve 'graphql'

Everything does would when the uri is hardcoded.

What's the proper .env setup I'm missing?

score 2 · Answer 1 · answered Dec 07 '21 at 22:16

2

Could you try something like this? The .env files doesn't need quotes.

GRAPHQL_HOST=https://githubuser-repo-wackycode-5000.githubpreview.dev/graphql

If that doesn't work try to create a dummy key and check if you can get it.

.env

DUMMY=dummy

index.tsx

const graphqlHost: string = (process.env.DUMMY as string);

answered Dec 07 '21 at 22:16

Diego Bascans

1,083
1
6
14

I'm getting `graphqlHost: undefined` when piping to console. I'm thinking *smh* that this is b/c I'm developing on a Github Codespace. They have whole section just for .env variables. Testing now. – paulywill Dec 08 '21 at 16:47
As per [this answer](https://stackoverflow.com/a/53237511/664933) I had to use prefixed with `REACT_APP_`. Now `REACT_APP_GRAPHQL_HOST` is working. :) – paulywill Dec 08 '21 at 17:01

score 0 · Answer 2 · answered Dec 08 '21 at 17:04

As per this answer I had to use the prefixed REACT_APP_.

.env

REACT_APP_GRAPHQL_HOST=https://githubuser-repo-wackycode-5000.githubpreview.dev/graphql

index.tsx

const graphqlHost: string = (process.env.REACT_APP_GRAPHQL_HOST as string);

const httpLink = createHttpLink({
  uri: graphqlHost,
  credentials: 'same-origin'

});

Also as recommended by Github I added the .env variable to my Codespace... therefore I can spin up another instance without worrying about updating my .env on the Codespace.

Set Graphql URI in React with .env

2 Answers2