javascript - 使用相对路径而不是 API 服务器进行中继突变

Question

我正在尝试将我的中继突变与我的 graphql 突变联系起来。我的 React/Relay 前端在 localhost:4444 上运行，而 graphql API 在 localhost:3000/graphql 上运行。

我可以毫无问题地从 API 查询/读取数据。但是如果我像这样通过 RelayDefaultnetwork 层将突变传递给 graphql 。我似乎得到了相对路径引用。

    //RT: value in .env file
    GRAPHQLURL= http://localhost:3000/graphql

Server.JS    
    const networkLayer = new Relay.DefaultNetworkLayer(process.env.GRAPHQLURL);

Client.js
// Create Relay environment
const environment = new Relay.Environment( );
environment.injectNetworkLayer( new Relay.DefaultNetworkLayer(
  'http://localhost:3000/graphql',{
      credentials: 'same-origin',
    }));
IsomorphicRelay.injectPreparedData(environment, data);

当我执行突变时，Relay 似乎从相对路径引用 Graphql。导致我在控制台中收到 404 错误消息，提示找不到 localhost:4444/graphql。它应该寻找localhost:3000/graphql。

我可以将其记录到 react 中继库中的屏幕

RelayDefaultNetworkLayer.js "react-relay"

  RelayDefaultNetworkLayer.prototype._sendMutation = function _sendMutation(request) {
    var init = undefined;
    var files = request.getFiles();
    if (files) {
      if (!global.FormData) {
        throw new Error('Uploading files without `FormData` not supported.');
      }
      var formData = new FormData();
      formData.append('query', request.getQueryString());
      formData.append('variables', JSON.stringify(request.getVariables()));
      for (var filename in files) {
        if (files.hasOwnProperty(filename)) {
          formData.append(filename, files[filename]);
        }
      }
      init = _extends({}, this._init, {
        body: formData,
        method: 'POST'
      });
    } else {
      init = _extends({}, this._init, {
        body: JSON.stringify({
          query: request.getQueryString(),
          variables: request.getVariables()
        }),
        headers: _extends({}, this._init.headers, {
          'Accept': '*/*',
          'Content-Type': 'application/json'
        }),
        method: 'POST'
      });
    }
    return fetch(this._uri, init).then(throwOnServerError);
  };

有人遇到过这个问题吗？我确信人们在不同的服务器上有 GraphQL 服务器。可能是什么原因造成的？

https://github.com/facebook/relay/issues/1291

Answer 1

您可以使用 webpack-dev-server 的代理选项来代理从端口 3000 到端口 4444 的所有 /graphql 请求。

devServer:{
  contentBase: '../frontend/src/www',  //Relative directory for base of server
  proxy: {'/': 'http://localhost:3000'},
  devtool: 'eval',
  hot: true,        //Live-reload
  inline: true,
  port: 3001        //Port Number
}, 

在此处查看更多信息:https://github.com/bfwg/relay-gallery/blob/master/config/webpack-dev-server.config.js#L20