使用相对路径而不是 API 服务器中继变异

Posted 2023-03-08

【中文标题】使用相对路径而不是 API 服务器中继变异

【英文标题】：Relay Mutation using relative path instead of API server

【发布时间】：2016-11-22 19:20:56

【问题描述】：

我正在尝试将我的中继突变与我的 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-relay 库中将它记录到屏幕上

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

【问题讨论】：

您是否检查过您的突变是否有效，例如使用 graphiql？ 404 似乎有点奇怪，但如果忘记使用 GraphQLNonNull 设置服务器端所需的属性，我会得到 400。顺便说一句，我使用的是nodejs实现

突变通过 graphql 工作得很好。我也可以通过编辑中继库来查看我的网址来填充它并使其工作。

【参考方案1】：

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

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