CODEWITHSUNDEEP
javascriptreactjshttp-status-code-404graphqlrelayjs
jackncoke
jackncoke

Reputation: 2020

Relay Mutation using relative path instead of API server

I am trying to tie my relay mutations to my graphql mutations. I have my React/Relay front end running on localhost:4444 and my graphql API running on localhost:3000/graphql.

I am able to query/read data from the API with no issues. BUT If I pass a mutation to graphql thru the RelayDefaultnetwork layer like so. I seem to be getting a relative path reference. 

    //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);

When i perform a mutation it seems that Relay is referencing Graphql from a relative path. Causing me to get a 404 in my console saying cannot find localhost:4444/graphql. It should be looking for localhost:3000/graphql.

I am able to log this out to the screen within the 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);
  };

Has anyone ran into this issue? I am sure people have there GraphQL servers on separate servers. What could be causing this?

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

Upvotes: 1

Views: 437

Answers (1)

Fan Jin
Fan Jin

Reputation: 2460

You can use a webpack-dev-server's proxy option to proxy all /graphql requests from port 3000 to port 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
},

Checkout here for more info: https://github.com/bfwg/relay-gallery/blob/master/config/webpack-dev-server.config.js#L20

Upvotes: 0

Related Questions