Невозможно получить доступ к переменным env в Remix даже в файле сервера

Question

Я использовал версию Remix от Shopify и столкнулся с проблемой, когда пытался получить доступ к ключу API для использования в форме подписки на рассылку новостей. Однако я не могу получить доступ к своим переменным env из-за ошибкиprocess is not defined.

приложение/env/env.server.ts:

      import {ZodFormattedError} from 'zod';

const serverSchema = z.object({
  KLAVIYO_API_KEY: z.string(),
  KLAVIYO_GLOBAL_LIST_ID: z.string(),
  KLAVIYO_API_VERSION: z.string(),
})

const _serverEnv = serverSchema.safeParse(process.env);

const formatErrors = (errors: ZodFormattedError<Map<string, string>, string>) =>
  Object.entries(errors)
    .map(([name, value]) => {
      if (value && '_errors' in value)
        return `${name}: ${value._errors.join(', ')}\n`;
    })
    .filter(Boolean);

if (_serverEnv.success === false) {
  // eslint-disable-next-line no-console
  console.error(
    '❌ Invalid environment variables:\n',
    ...formatErrors(_serverEnv.error.format()),
  );

  throw new Error('Invalid environment variables');
}

export const env = {..._serverEnv.data};

маршруты/информационный бюллетень/subscribe.tsx:

      import {ActionArgs, json} from '@shopify/remix-oxygen';
import { env } from '../../env/env.server';

export async function action({request}: ActionArgs) {
  const email = (await request.formData()).get('email')?.toString() ?? '';
  try {
    const res = await subscribeToKlaviyoList(email);

    return res.json();
  } catch (error) {
    return json({error: error.message, ok: false});
  }
}



export async function subscribeToKlaviyoList(
  email: string,
  source = 'Home Page Footer',
) {
  const API_KEY = env.KLAVIYO_API_VERSION;
  const API_VERSION = env.KLAVIYO_API_VERSION;
  const LIST_ID = env.KLAVIYO_GLOBAL_LIST_ID;

  return await fetch(
    'https://a.klaviyo.com/api/profile-subscription-bulk-create-jobs/',
    {
      method: 'POST',
      headers: {
        accept: 'application/json',
        revision: API_VERSION ?? '2023-01-24',
        'content-type': 'application/json',
        Authorization: `Klaviyo-API-Key ${API_KEY}`,
      },
      body: JSON.stringify({
        data: {
          type: 'profile-subscription-bulk-create-job',
          attributes: {
            list_id: LIST_ID,
            custom_source: source,
            subscriptions: [
              {
                channels: {email: ['MARKETING']},
                email,
              },
            ],
          },
        },
      }),
    },
  );
}

Я следовал этому примеру из Remix и этому репозиторию GitHub, но в обоих случаях они либо не используют переменные env, либо ключ API жестко запрограммирован. Любая помощь приветствуется.

Answer 1

Вы должны добавить переменные env вEnvвведите файл remix.env.d.ts. Итак, я решил это, выполнив следующие действия:

      interface Env extends z.infer<typeof serverSchema> {
    SESSION_SECRET: string;
    PUBLIC_STOREFRONT_API_TOKEN: string;
    PRIVATE_STOREFRONT_API_TOKEN: string;
    PUBLIC_STOREFRONT_API_VERSION: string;
    PUBLIC_STORE_DOMAIN: string;
    PUBLIC_STOREFRONT_ID: string;
  }

А затем вызов переменной env, как показано:

      export async function action({context, request}: ActionArgs) {
  const email = (await request.formData()).get('email')?.toString() ?? '';
  try {
    await subscribeToKlaviyoList(context.env, email);
    return json({error: null, ok: true});
  } catch (error) {
    return json({error: error.message, ok: false});
  }
}

export async function subscribeToKlaviyoList(
  env: Env,
  email: string,
  source = 'Home Page Footer',
) {
  const API_KEY = env.KLAVIYO_API_KEY;
  const API_VERSION = env.KLAVIYO_API_VERSION;
  const LIST_ID = env.KLAVIYO_GLOBAL_LIST_ID;

  return await fetch(
    'https://a.klaviyo.com/api/profile-subscription-bulk-create-jobs/',
    {
      method: 'POST',
      headers: {
        accept: 'application/json',
        revision: API_VERSION ?? '2023-01-24',
        'content-type': 'application/json',
        Authorization: `Klaviyo-API-Key ${API_KEY}`,
      },
      body: JSON.stringify({
        data: {
          type: 'profile-subscription-bulk-create-job',
          attributes: {
            list_id: LIST_ID,
            custom_source: source,
            subscriptions: [
              {
                channels: {email: ['MARKETING']},
                email,
              },
            ],
          },
        },
      }),
    },
  );
}

Надеюсь, нам не нужно будет использовать контекст в будущем.