gatsby-source-shopify undefined graphql link

[danvernon]

Description

When my site is deployed via Netlify I am getting an error from Shopify I don't get locally.
POST https://undefined.myshopify.com/api/2020-07/graphql 404
All my environment variables are connected and correct.

Steps to reproduce

Repo - https://github.com/danvernon/shator-boost/
Live link - https://shator-boost.netlify.app/coaching

Expected result

The error should not be there

Actual result

Error is there

Environment

Prod

[vladar]

The URL suggests that the process.env.SHOP_NAME is undefined.

Have you tried adding console.log("Shopfiy shop name: " + process.env.SHOP_NAME) to gatsby-config.js to make sure env vars are actually delivered correctly to the app?

[danvernon]

@vladar I will try that now, but the strange thing is it grabs all of the variants correctly and options from shopify.

[danvernon]

@vladar ive removed the variables and hard coded it - still getting same issue.

[danvernon]

@vladar any other thoughts on this?

[vladar]

The only place where API endpoint is constructed in gatsby-source-shopify is here:

gatsby/packages/gatsby-source-shopify/src/create-client.js

Lines 5 to 11 in 10dfe01

	export const createClient = (shopName, accessToken, apiVersion) => {
	let url
	if (shopName.includes(`.`)) {
	url = `https://${shopName}/api/${apiVersion}/graphql.json`
	} else {
	url = `https://${shopName}.myshopify.com/api/${apiVersion}/graphql.json`
	}

The only place where this function is called is here:

gatsby/packages/gatsby-source-shopify/src/gatsby-node.js

Lines 52 to 62 in 10dfe01

	{
	shopName,
	accessToken,
	apiVersion = `2020-07`,
	verbose = true,
	paginationSize = 250,
	includeCollections = [SHOP, CONTENT],
	shopifyQueries = {},
	}
	) => {
	const client = createClient(shopName, accessToken, apiVersion)

So if it's set in plugin options - there is no way to get it as undefined. Also if it were undefined, we would've got an error in the createClient function itself (in .includes(".") part).

It made me think that the issue is not in this codepath. I've checked your repo and I think the issue is in your own code somehow. Try hardcoding the value there too.

https://github.com/danvernon/shator-boost/blob/be0f9f4fc68901a3cde83b9efb4c671a4fb876c1/src/provider/ContextProvider.js#L7-L13

Also, check out this guide on using environment variables on the client side: https://www.gatsbyjs.com/docs/environment-variables/#client-side-javascript

[danvernon]

this worked, thanks a lot

[dakeobac]

i have run into the same issue.

hardcoding the api token into the client const works, but seems bad from a security standpoint? just by looking at OP's repo i can get his api token. i have created two console.log statements, one in gatsby config and one in cartcontext. running gatsby develop now shows the correct store name in the terminal as expected. when visiting a product page the console.log from cartcontext shows that the shop name is indeed undefined here.

i would be glad to resolve this issue, looks to me like the env variable set in .env is not available in cartcontext for some reason. however i dont know how to resolve this issue. would be greatful for a solution to this too - just like op im trying to build a webshop right now.

best regards

[dakeobac]

After reading this post I was able to resolve the issue. Changing the name of the env variables to GATSBY_SHOP_NAME and GATSBY_SHOP_TOKEN everywhere fixes it.

[david69-js]

Thank you @dakeobac