How to integrate with chrome dev tools?

[Kaare Hoff Skovgaard]

Thanks for an awesome project first off!

After swapping out the Relay environment being used, my regular queries are no longer showing up in the React dev tools as relay queries. Are there anything I'm missing here that I can do to make this happen again?

[Edvin Eriksson]

Yeah it is because the devtool only work with the default environment.

https://github.com/facebook/react-devtools/blob/master/plugins/Relay/installRelayHook.js#L104
https://github.com/facebook/relay/blob/master/src/tools/RelayInternals.js#L27

It only queries the default Relay.Store for updates

[Kaare Hoff Skovgaard]

So there's not even an ugly hack that is possible to get this working again?

Would using both the default network layer injection and injecting it into the proper end posibly work?

[Edvin Eriksson]

I guess you can hook your own RelayInternals module to it instead. e.g overriding https://github.com/facebook/relay/blob/master/src/RelayPublic.js#L33-L35. so that the internals module returns your custom network layer instead

[Kaare Hoff Skovgaard]

The following seems to do the trick:

const env = new RelaySubscriptions.Environment();
const oldRelayInternals = global.__REACT_DEVTOOLS_GLOBAL_HOOK__._relayInternals;
global.__REACT_DEVTOOLS_GLOBAL_HOOK__._relayInternals = {
    NetworkLayer: env.getStoreData().getNetworkLayer(),
    DefaultStoreData: env.getStoreData(),
    flattenRelayQuery: oldRelayInternals.flattenRelayQuery,
    printRelayQuery: oldRelayInternals.printRelayQuery,
};

I don't know if it would be worth it to have some sort of option to include this behavior when newing up the environment?

But for now, thanks for the help :)

[Edvin Eriksson]

I think that if we were to do anything about this we should do it in the relay repo instead. e.g Relay.setDevtoolsEnvironment() or similar