Relay中如何动态改变网络层答案

【问题标题】：How to dynamically change the network layer in RelayRelay中如何动态改变网络层
【发布时间】：2016-10-14 18:29:15
【问题描述】：

我知道中继可以在引导时注入一个网络层，如下所示：

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://example.com/graphql', {
    headers: {
      Authorization: 'Basic SSdsbCBmaW5kIHNvbWV0aGluZyB0byBwdXQgaGVyZQ==',
    },
  })
);

但是如果我以后需要告诉标题是什么（比如在登录之后）呢？

【问题讨论】：

标签： graphql relay

【解决方案1】：

很好的问题。我想您正在基本组件文件中设置网络层。您可以创建一个包装 Relay.injectNetworkLayer 调用的函数，以便在需要时更新 Auth 标头。

加载应用程序时，您可以执行以下操作：

export function setNetworkLayer() {
  return new Promise((resolve, reject) => {

      var options = {};
      if (localStorage.authToken) {
        options.headers = {
          Authorization: 'Basic ' + localStorage.authToken
        }
      }
      else {
        options.headers = {};
      }
      Relay.injectNetworkLayer(
        new Relay.DefaultNetworkLayer('http://example.com/graphql', options)
      );
      resolve(options);
    });
  })
}

如果你想更新网络层，你可以这样做：

loginUser().then((res) => {
    localStorage.authToken = res.token;
    setNetworkLayer();
    return;
})

【讨论】：

这意味着延迟注入网络层。但是，如果我想在使用有效令牌登录 setup networkLayer 后首先使用空标头（匿名）设置 networkLayer 怎么样？
您可以做的是在您的应用程序的第一个 render() 函数中调用 setNetworkLayer。如果在 localStorage 中没有检测到 authToken，那么它会将 options 变量设置为空对象，并将 DefaultNetworkLayer 设置为空头。并且每当你需要重置网络层时，你可以覆盖localStorage.authToken变量并再次调用setNetworkLayer()。
我尝试调用 injectNetworkLayer 两次，并收到警告为：“RelayNetworkLayer：收到对 injectImplementation() 的调用，但已经注入了一个层。”。而且新的调用没有生效，第一个调用也没有停止工作。
看起来这是一个警告，将在下一个版本中解决：github.com/facebook/relay/issues/1111。现在，在需要使用来自 localStorage 的网络层身份验证令牌最初加载应用程序时尝试重新渲染 DOM.render()，如下所示：mgiroux.me/2016/token-auth-in-relay-app-using-rails
其实上面的问题是在说：injectNetworkLayer 会导致警告，即使是第一次在应用程序中。因此 0.9 版本引入了 injectDefaultNetworkLayer，它仅在内部用于将默认层设置为“/graphql”。但是，我们现在面临的问题是我们不能在应用程序中调用两次injectNetworkLayer。

【解决方案2】：

我在 github 中继 repo 中提出了这个问题，他们建议我使用这个 react-relay-network-layer 库来解决问题。我相信这将是解决问题的最佳选择。

【讨论】：

【解决方案3】：

我发现了一个简单的技巧。您可以传入 headers 对象并更新其指针值。

const headers = {
    Authorization: '',
};

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://example.com/graphql', {
    headers: headers,
  })
);

// To update the authorization, set the field.

headers.Authorization = 'Basic SSdsbCBmaW5kIHNvbWV0aGluZyB0byBwdXQgaGVyZQ=='

【讨论】：

非常方便！您将如何从另一个文件更新值？
您可以导出您在 Relay DefaultNetworkLayer 中使用的headers 变量，并在任何地方设置授权。这是headers.Authorization = 部分，除非你在不同的文件中这样做。