Question

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

我能够从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-relay lib中的屏幕

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

使用相对路径而不是API服务器

1 个答案: