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

Relay Mutation using relative path instead of API server

本文关键字：API 服务器 路径 相对 突变      更新时间：2023-09-26

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

我能够从API查询/读取数据，没有任何问题。但是，如果我像这样通过RelayDefault网络层将一个突变传递给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。

我可以在反应中继库中将其注销到屏幕上

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

您可以使用webpack-dev服务器的代理选项将所有/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

相关文章：