Allow the Router environment to be dynamically changed

[walterbm]

Not sure if this is a bug or if I have simply not configured my Router correctly.

let environment = new Relay.Environment();

<Router history={hashHistory} render={applyRouterMiddleware(useRelay)} environment={environment}>
  <Route path="/" component={App} queries={RootQuery}>
    <Route path="/logout" onEnter={(next, replace) => { environment = new Relay.Environment() }}/
</Router>

[taion]

You need to actually re-render the relevant elements. Wrap this in a React component that uses state or something.

[walterbm]

For anyone that may be have stumbled into a similar problem, this is how I fixed it.

const routes = (logout) => (
  <div>
    <Route path="/" component={App} queries={RootQuery}>
    <Route path="/logout" onEnter={logout} />
  </div>
)
export default class RouterWrapper extends React.Component {
  constructor() {
    super();
    let environment = new Relay.Environment();
    this.state = { environment: environment }
    this.routes = routes(this.logout.bind(this));
  }
  logout() {
    this.setState({ environment = new Relay.Environment() });
  }
  render() {
    return (
      <Router history={hashHistory} render={applyRouterMiddleware(useRelay)} environment={this.state.environment}>
        {routes}
      </Router> );
  }
}

[pedro-ribeiro]

@walterbm, is that solution working when it comes to mutations?

When configuring a custom Network Layer (new-environment.injectNetworkLayer(...)), mutations still fallback to the default network layer implementation.

I am really struggling with this. :(

[skoushan]

@pedro-ribeiro see facebook/relay#1494. There is a bug in Relay Classic that could be causing your component to use the old environment instead of the new one.