Relay: Unavoidable warning when using injectImplementation

[sgwilym]

Recently a call to injectDefaultNetworkLayer in Relay.js was introduced by this commit: https://github.com/facebook/relay/commit/d1abc54d5ab60fc8e0b17353ea3b9b3bf2d4f4a0

Now it seems that any use of injectNetworkLayer fires off the warning Warning: RelayNetworkLayer: Call received to injectImplementation(), but a layer was already injected.

That aside, it also seems weird for a default network layer pointing at the same domain to be used, especially considering that Relay may be running in an app with React Native.

[wincent]

Thanks for bringing this up.

The commit you link to it not yet in a released version; it's still only on the master branch. Once we cut a new release (soon) or once you switch to the master branch, you should be able to inject just fine using injectNetworkLayer without seeing a warning.

[sgwilym]

Hi @wincent, I really wouldn't want to waste your time with unreleased bugs! This (or something like it) really seems to have shipped with 0.8.1. I definitely have 0.8.1 installed from npm, and when I look in node_modules/react-relay/lib/Relay.js has the following on line 31:

// By default, assume that GraphQL is served at `/graphql` on the same domain.
RelayStore.injectNetworkLayer(new RelayDefaultNetworkLayer('/graphql'));

[wincent]

Right. So note that in 0.8.1 it is using injectNetworkLayer, which is why you get the warning when you subsequently use injectNetworkLayer.

On the master branch, it uses injectDefaultNetworkLayer, which means that stuff will work out of the box, but if you want to override it with injectNetworkLayer, you will be able to do so without a warning.

Note that really only Relay itself should ever need to use injectDefaultNetworkLayer; I can't think of a use case why product code would ever want to use anything other than injectNetworkLayer.

[sgwilym]

Got it, thanks!

[nicerr]

I'm using 0.8.1 and still getting the warning:

Warning: RelayNetworkLayer: Call received to injectImplementation(), but a layer was already injected.

using the code:

`import RelayLocalSchema from 'relay-local-schema';

import schema from './data/schema';

Relay.injectNetworkLayer(
new RelayLocalSchema.NetworkLayer({ schema })
);`

from here: relay-local-schema

running this example: babel-plugin-react-relay, even after upgrading it to use: 0.8.1.

[wincent]

I'm using 0.8.1 and still getting the warning.

This is expected. 0.8.1 prints the warning, but the master branch does not. We'll cut a new release soon so that people don't keep running into this.

[nicerr]

Thanks... I misunderstood that.

[andyfen]

Did this get pushed /resolved ? i'm using "react-relay": "^0.9.2" and getting this warning when i try and call this function a second time with a token. everything works fine when i dismiss it.

export function setNetworkLayer() {
    var options = {
      headers: {}
    };

    AsyncStorage.getItem("currentUser", (err, res) => {
       if(res !== null){
        const store = JSON.parse(res);
        options.headers = {
          Authorization: 'Bearer ' + store.token
        }
      }
    })

    Relay.injectNetworkLayer(
      new Relay.DefaultNetworkLayer(config.URL, options)
    )
}

Thanks in advance.

[voxmatt]

Upgrading past 0.8.1 solved this for me.

[andyfen]

@voxmatt not as such.
Basically as i can see the error is benign, everything seems to still work fine even tho it gives the yellow box warning ?

Are you using it for RN ? you can turn off the warnings by clicking the app name next to the emulator button> edit schema > (change build config to release from debug).
so that would fix it for production.

i've just been hitting "dismiss errors" for development process.

any better suggestions/ more info would love to hear ?

[Oxyaction]

having the same problem as @andyfenelon has. Is there any solutions when reconfiguring network layer?

[Oxyaction]

I found a hacky solution for this issue:
store the instance of the layer and then modify the configuration stored in private properties.

let network;

export function init(url) {
  network = new Relay.DefaultNetworkLayer(url);
  Relay.injectNetworkLayer(network);
}

export function setToken(token) {
  if (network) {
    network._init = {
      ...network._init,
      headers: { ...network._init.headers, 'my-secret-token': token },
    };
  }
}

I know that it's very ugly solution but I don't found the other way since there is no any methods to modify or replace the layer. Suggest to add them.

[voxmatt]

I have to confess that I paused on React Native since this. Upgrading did fix it for me but I haven't working on it actively since then.

[andyfen]

Somewhere I read that it's recommend doing a full page refresh after the token is saved rather than re-init the network layer (this error).

I've got this working on web relay using document.location.reload(true);

  submit = (e) => {
    e.preventDefault()
    const { username, password } = this.state;
    login(username, password)
      .then((result) => {
        localStorage.setItem("currentUser", JSON.stringify(result.token))
        document.location.reload(true);
    })
  }

I don't know what (if there is) an equivalent to document.location.reload(true); that performs a full page refresh for react native, but it would fix this error.

[sibelius]

@voxmatt u can use a custom Relay.Store to avoid this

import { Environment } from 'react-relay';
import RelayNetworkDebug from 'react-relay/lib/RelayNetworkDebug';

class RelayStore {
  constructor() {
    this._env = new Environment();

    this._networkLayer = null;
    this._taskScheduler = null;

    RelayNetworkDebug.init(this._env);
  }

  reset(networkLayer) {
    if (networkLayer !== undefined) {
      this._networkLayer = networkLayer;
    }

    this._env = new Environment();
    if (this._networkLayer !== null) {
      this._env.injectNetworkLayer(this._networkLayer);
    }
    if (this._taskScheduler !== null) {
      this._env.injectTaskScheduler(this._taskScheduler);
    }

    // Comment/Uncomment the line bellow to enable relay debug (dafult commented)
    RelayNetworkDebug.init(this._env);
  }

  // Map existing RelayEnvironment methods
  getStoreData() {
    return this._env.getStoreData();
  }

  injectNetworkLayer(networkLayer) {
    this._networkLayer = networkLayer;
    this._env.injectNetworkLayer(networkLayer);
  }

  injectTaskScheduler(taskScheduler) {
    this._taskScheduler = taskScheduler;
    this._env.injectTaskScheduler(taskScheduler);
  }

  primeCache(...args) {
    return this._env.primeCache(...args);
  }

  forceFetch(...args) {
    console.log('---> force fetch');

    return this._env.forceFetch(...args);
  }

  read(...args) {
    return this._env.read(...args);
  }

  readAll(...args) {
    return this._env.readAll(...args);
  }

  readQuery(...args) {
    return this._env.readQuery(...args);
  }

  observe(...args) {
    return this._env.observe(...args);
  }

  getFragmentResolver(...args) {
    return this._env.getFragmentResolver(...args);
  }

  applyUpdate(...args) {
    return this._env.applyUpdate(...args);
  }

  commitUpdate(...args) {
    return this._env.commitUpdate(...args);
  }

  /**
   * @deprecated
   *
   * Method renamed to commitUpdate
   */
  update(...args) {
    return this._env.update(...args);
  }
}

const relayStore = new RelayStore();
export default relayStore;

just call
RelayStore.reset(new Networklayer(....))

[voxmatt]

@sibelius thank you once again!

[sibelius]

I made a working version here: https://github.com/sibelius/react-native-relay-example

[dminkovsky]

fwiw, i kept seeing this due to hot module reloading: i erroneously had the network layer configured in a module that was being reloaded, so as a result this call kept repeating and the warning logged.