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

Posted 2023-03-08

【中文标题】如何在客户端为 graphql 指定环境变量？

【英文标题】：How can I specify environment variables on the client side for graphql?

【发布时间】：2020-03-29 18:57:30

【问题描述】：

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

render(Routes, createClient())

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

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

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

【问题讨论】：

简而言之，您不能在客户端机器上使用环境变量。相反，您需要构建最终提供给客户端的代码，以包含在服务器上设置的这些变量。

【参考方案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)
    ]
  ;
;

【讨论】：

啊，好吧，这很有意义。我应该如何在编译时获取实际的环境映射？鉴于这可能是 dockerized 和可配置的

或者只是通过 webpack 中的 --env 传递它们？

在这种情况下，请使用 npm 包 dotenv - 这允许您在源的根目录中提供一个 .env 文件，该文件可以包含您的所有环境变量。我链接的文章解释了如何将这个 .env 文件与 webpack 连接起来（我只是想保持答案相当通用）。