在找到的中继路由器中重置环境答案

【问题标题】：resetting Environment in Found Relay Router在找到的中继路由器中重置环境
【发布时间】：2018-02-01 08:16:50
【问题描述】：

我正在使用 React-Relay 和 Found。当用户注销时，应正确刷新 Relay Store 作为安全措施。

显然，推荐的过程是实现一个可重置对象。

这是我的可复位继电器（遵循found-relay#42 的建议）：

ResettableRelay.js

import {Environment, Network, RecordSource, Store} from "relay-runtime";
import {Resolver} from "found-relay";

function fetchQuery(operation, variables, cacheConfig, uploadables) {
    return fetch("/graphql", {
        method: "POST",
        headers: headers,
        body: JSON.stringify({
            query: operation.text, // GraphQL text from input
            variables,
        }),
    }).then(response => {
        return(response.json());
    });
}

class ResettableRelay {
    environment = null;
    resolver = null;

    constructor() {
        this.reset();
    }

    reset = function () {
        const source = new RecordSource();
        const environment = new Environment({
            store: new Store(source),
            network: Network.create(fetchQuery)
        });

        this.environment = environment;
        this.resolver = new Resolver(environment);
        console.log("Reset!");
    }
}

const currentRelay = new ResettableRelay();
export default currentRelay;

这是我的 index.js：

index.js
import currentRelay from "./ResettableRelay";
import Routes from "./Routes";

const Router = createFarceRouter({
    historyProtocol: new BrowserProtocol(),
    historyMiddlewares: [queryMiddleware],
    routeConfig: Routes,
    render: createRender({})
});
const mountNode = document.getElementById("root");

ReactDOM.render(
    <Router
        resolver={currentRelay.resolver}
    />, mountNode);

这是来自嵌套在 Routes.js 中的我的应用程序：

onLogout = () {
    clearLoginToken();
    console.log(currentRelay.environment);
    currentRelay.reset();
    console.log(currentRelay.environment); //These two logged relay environments are different!
    this.forceUpdate(); //Not sure if I need this
}

我仍然无法使用上述方法。注销时，即使环境属性已重置，解析器属性也不会更新其环境。此外，{viewer} 中继查询不会在登录或注销时更新。它只会在后续查询中更新。

【问题讨论】：

我也有同样的担忧......我刚刚在 Discord 的#relay 频道上 ping @taion 来帮助我们

标签： reactjs relayjs relay

【解决方案1】：

我发现this test component 在found-relay 的repo 中显示了一个可重新设置的路由器。

我在此处复制该测试的组件主题以供将来参考：

class ResettableRouter extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      resolver: this.createResolver(),
    };
  }

  reset() {
    this.setState({
      resolver: this.createResolver(),
    });
  }

  createResolver() {
    return new InstrumentedResolver(createEnvironment(fetchSpy));
  }

  render() {
    return <Router resolver={this.state.resolver} />;
  }
}

这个想法是将Router 包装到另一个组件中，以便使用this.setState(...) 和新的解析器触发重新渲染。

如果您使用的是连接路由，我认为您应该能够将新环境/解析器作为道具传递。

【讨论】：