Relay 的注入网络层未被识别为 React 应用程序中的函数

Posted 2023-03-08

【中文标题】Relay 的注入网络层未被识别为 React 应用程序中的函数

【英文标题】：Relay's Inject Network Layer Not Being Recognized as a Function in a React App

【发布时间】：2018-01-23 22:33:26

【问题描述】：

我正在关注一个名为“构建和部署全栈 React 应用程序”的 Lynda.com 教程，在“注入中继网络层”一章中，index.js 中有一个尝试设置网络层，程序编译成功，但我在浏览器中收到以下错误：

TypeError：__WEBPACK_IMPORTED_MODULE_4_react_relay___default.a.injectNetworkLayer 不是函数

有什么想法吗？ 我会很感激， 厘米

（我的 index.js 文件）

import React from 'react'
import ReactDOM from 'react-dom'
import Router, browserHistory, applyRouterMiddleware from 'react-router'
import Routes from './routes'
import Relay from 'react-relay'
import useRelay from 'react-router-relay'
import RelayNetworkLayer, urlMiddleware from 'react-relay-network-layer'
import relayApi from './config/endpoints'
import auth from './utils/auth'

const createHeaders = () => 
  let idToken = auth.getToken()
  if (idToken) 
    return 
      'Authorization': `Bearer $idToken`
    
   else 
    return 
  


Relay.injectNetworkLayer(
  new RelayNetworkLayer([
    urlMiddleware(url: (req) => relayApi,),
        next => req => 
          req.headers = 
            ...req.headers,
            ...createHeaders()
          
          return next(req)
      ,
  ],disableBatchQuery: true)
)

ReactDOM.render(
  <Router
    environment=Relay.Store
    render=applyRouterMiddleware(useRelay)
    history=browserHistory
    routes=Routes
  />,
  document.getElementById('root')
)

【参考方案1】：

您可能没有使用正确版本的 Relay，但这只是一个猜测。检查教程是否指定了任何版本并检查您使用的是哪个版本。

在上一版本的 Relay: Relay-Modern 中发生了很多变化。您可能想研究一下，它比 Relay-Classic 更方便、更高效。

还有更简单的方法可以将路由器与中继相结合。直接在路由器上方或下方创建中继环境，具体取决于您是否需要从数据库中获取路由。但我想你只需要通过教程。

【讨论】：

感谢您回复 joeydebreuk。我安装了用于教程的 Relay 版本，不幸的是问题仍然存在......

其实我只匹配了'react-relay-network-layer'到使用的版本。当我在使用的版本上安装“react-relay”时，我能够克服错误。非常感谢。

react-relay 允许从经典向后兼容到 modern，只需更改引用导入语句的方式即可。我自己看了同样的教程，发现react-relay模块中有3个文件：classic.js、compat.js和classic.js。出于本教程的目的，我决定在所有引用 react-relay 的地方使用 import Relay from 'react-relay/classic'，以使其更容易。我认为这会是一个更好的方法，因为以后你可以重构单个组件来使用 React Modern。