process is not defined when importing Shopify Admin API in Hydrogen app

[johannbuscail]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2023-04

What version of Remix are you using?

1.15.0

Steps to Reproduce

• Create an app with the Hydrogen CLI
• Create a Shopify custom app for your store
• Add API keys / access tokens to the .env file generated by Hydrogen.
• Install the @shopify/shopify-api package
• Import it in the server.ts file.

import { shopifyApi, LATEST_API_VERSION } from '@shopify/shopify-api';

Then, initialize the Admin API, in the fetch function.

export default {
	async fetch(
		request: Request,
		env: Env,
		executionContext: ExecutionContext,
	): Promise<Response> {
                 ...

                 const shopifyAdminAPI = shopifyApi({
			// The next 4 values are typically read from environment variables for added security
			apiKey: env.PUBLIC_APP_API_TOKEN,
			apiSecretKey: env.PRIVATE_APP_API_TOKEN,
			privateAppStorefrontAccessToken: env.STOREFRONT_ACCESS_TOKEN,
			scopes: ['read_products', 'write_products'],
			hostName: `https://${env.PUBLIC_STORE_DOMAIN}`,
			isCustomStoreApp: true,
			isEmbeddedApp: false,
			apiVersion: LATEST_API_VERSION
		});

		const adminApi = new shopifyAdminAPI.clients.Graphql({
			session: shopifyAdminAPI.session.customAppSession(env.PUBLIC_STORE_DOMAIN),
		});
		const handleRequest = createRequestHandler({
			build: remixBuild,
			mode: process.env.NODE_ENV,
			getLoadContext: () => ({ session, storefront, env }),
		});

		...

Expected Behavior

Get access to the Admin API across the whole app through the context, just like it does with the Storefront API

Actual Behavior

I get this error instead:

[shopify-api/WARNING] [Deprecated | 8.0.0] adminApiAccessToken should be set to the Admin API access token for custom store apps; apiSecretKey should be set to the custom store app's API secret key.
ReferenceError: process is not defined

[jamalsoueidan]

Here we go, this remove the warning and you can access the adminApi, just remember to update the types.

const shopify = shopifyApi({
  apiKey: env.PRIVATE_API_KEY,
  apiSecretKey: env.PRIVATE_API_SECRET_KEY,
  adminApiAccessToken: env.PRIVATE_API_ACCESS_TOKEN,
  apiVersion: LATEST_API_VERSION,
  isCustomStoreApp: true,
  scopes: [],
  isEmbeddedApp: false,
  hostName: env.PUBLIC_STORE_DOMAIN,
});

const shopifySession = shopify.session.customAppSession(
  env.PUBLIC_STORE_DOMAIN,
);

const adminApi = new shopify.clients.Graphql({
  session: shopifySession,
});

/**
 * Create a Remix request handler and pass
 * Hydrogen's Storefront client to the loader context.
 */
const handleRequest = createRequestHandler({
  build: remixBuild,
  mode: process.env.NODE_ENV,
  getLoadContext: () => ({
    session,
    waitUntil,
    storefront,
    adminApi,
    env,
  }),
});

[codeustad]

@jamalsoueidan, I still get the process is not defined error even with importing @shopify/shopify-api/adapters/node

[blittle]

When deployed to Oxygen, Hydrogen is running in a worker environment, not Node, so you can't use standard node functionality. For example, process is undefined in a worker. Instead get access to environment variables with the env param passed to the async fetch worker function:

export default {
	async fetch(
		request: Request,
		env: Env,  // here
		executionContext: ExecutionContext,
	): Promise<Response> {