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)
    ]
  };
};

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

1 个答案: