Troubleshooting environment variables in Gatsby and Sanity API integration

any pointer?

- are you accessing the Sanity APIs at run-time (react in the browser), or build time? When Gatsby builds your app, it will only share environment variables that start with

GATSBY_

to the React app. Try changing your variables to

GATSBY_SANITYXXX

and rebuilding. Interestingly, I would imagine it wouldn't work in dev too though 🤔

that's when I'm building, it works greats in dev mode because I have

.env.xx

files with my envs that are picked up in the gatsby-config file

cool let me try with the prefix

I wonder if you're pulling in the data at build-time, but React is generating the images at run-time, which is where it can then not get the env vars. Hope this works for you 🤞

unless

gatsby build

has some sort of weird hybrid process, this is all happening at build time

and it's definitely an issue of env vars because building manually when I have the

.env.xx

files works

it's when I am building in netlify that is breaks

Yeah, if it's working with

gatsby develop

it's unlikely to be the env var names.

it's just really strange, if I run my build with

export MYVAR=var npm run build

I have

console.log(process.env)

in my gastby-node.js and I get the full list of env vars

but even then, the

<BlockConten>

in my component doesn't seem to pick it up

it breaks then trying to get the image url from my _rawfield

well well well

looks like the prefix trick is working

Changing the env vars definitely didn't work?

Aha 🙂

thanks!

that's so strange

So, what I think is happening is:
• Gatsby builds, and pulls the Sanity data in
• The data is stored in

public/page-data/...

as JSON• When you render the page, it's react running in the browser - react uses the JSON to render the content
• You then pass the content into the

<BlockContent>

component, which pulls out the image data from the API, requiring the

projectid

and

dataset

againThis last point is where it needs the

GATSBY_

prefixed variables.

Why it worked in dev is confusing 🤷

Glad it's working for you 😄

yeah right, I think it worked in dev ( and build manually on my machine) because I was using the .env files

when building with Netlify you can't have the .env files so you have to pass the variables to the netlify building script

when using the .env files you don't need the prefix

however you do when passing them straight to the script

did my head in, thanks for that!

You're welcome!

also you could use

gatsby-plugin-env-variables

what abouyt using

nice one I'll have a look at that thanks