如何在客户端为 graphql 指定环境变量？

Question

对于上下文，我在我的应用程序上运行 graphql。此应用程序使用 SSR（服务器端渲染），并且这方面的所有调用都运行良好。当客户端点击应用程序时，我会渲染该应用程序，就像任何其他标准 React 应用程序一样：

render(Routes, createClient())

问题是.. 在创建客户端（创建 apolloclient 的地方，它告诉提供者如何连接到外部 graphql 服务器）中，我引用了一个 env 变量。

const serverLocation =
  process.env.SERVER_LOCATION || 'http://localhost:8080/graphql

现在，在 SSR 情况下，这在服务器上一切正常，但在客户端上没有 env 变量的概念 - 只是未定义。鉴于此值可以配置并在客户端上实例化，我应该如何填充它？

Answer 1

有很多很多方法可以做到这一点。本质上，您希望在编译时以某种方式读取环境变量并将它们烘焙到最终在客户端运行的已编译 JS 文件中。

使用 webpack 为 React 应用实现此目的的一种方法是使用自定义插件：

const webpack = require('webpack');

module.exports = (env) => {
  // Create an object from the env variable
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};

这将为您的客户端代码提供对process.env 变量的访问权限。

来源（和一些替代解决方案）：https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5

编辑：由于这是一个非常常见的场景，这就是您使用.env 文件执行相同操作的方式。

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = (env) => {
  const env = dotenv.config().parsed;

  // Create an object from the env variable
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};