将 Relay 中的数据与 React Native 中的 react-navigation 一起使用时，未获取 Relay 中的数据

Posted 2023-03-08

【中文标题】将 Relay 中的数据与 React Native 中的 react-navigation 一起使用时，未获取 Relay 中的数据

【英文标题】：Data in Relay not fetched when using it with react-navigation in React Native

【发布时间】：2017-08-22 16:22:46

【问题描述】：

我正在尝试使用 Relay 和 react-navigation 设置我的应用程序，遵循 this GitHub issue 中讨论的提示。另请注意，我使用create-react-native-app 创建项目。

这就是我的设置：

App.js

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('https://api.graph.cool/relay/v1/ciyeih9590fhl0162e5zh1z4h', 
    headers: 
    ,
  )
)

const RootNavigationStack = StackNavigator(
  PokemonList: 
    screen: PokemonList
  
)

export default class App extends React.Component 
  render() 
    return <RootNavigationStack />
  

PokemonList.js

class IndexRoute extends Route 
  static queries = 
    viewer: () => Relay.QL`query  viewer `
  
  static routeName = 'IndexRoute'


export default class PokemonList extends React.Component 

  render()     
    return (
      <Relay.RootContainer
        Component=PokemonListRelayContainer
        route=new IndexRoute()
        renderFetched=(data) => 
          console.log('PokemonList - renderFetched', data)
          return <Text>Test</Text>
        
      />
    )
  



const PokemonListRelayContainer = Relay.createContainer(PokemonList, 
  fragments: 
    viewer: () => Relay.QL`
      fragment on Viewer 
        id
        allPokemons(first: 10) 
          edges 
            node 
              id
              name
            
          
        
      
    `
  
)

renderFetched 中的日志语句正在执行，但由于某种原因data 为空：

PokemonList - renderFetched "viewer":"__dataID__":"viewer-fixed","__fragments__":"0::client":[]

知道我在这个设置中缺少什么吗？

【问题讨论】：

很高兴您解决了这个问题。看起来你上面的实现是循环的 - PokemonList 呈现 RootContainer，其中包含 PokemonListRelayContainer，它呈现 PokemonList，它呈现 RootContainer...

【参考方案1】：

我自己解决了这个问题，所以显然PokemonList，作为我的根组件，没有访问所请求的数据 - 虽然我认为它实际上已加载，但由于 Relay 的数据屏蔽不是对组件可见。

我想出的解决方案是将PokemonList 包装在另一个组件中，该组件将呈现Relay.RootContainer，然后使用我的常规中继设置从那里开始。

这就是现在的样子：

PokemonListWrapper.js

class PokemonListWrapper extends React.Component     
  render() 
    return (
      <Relay.RootContainer
        Component=PokemonList
        route=new IndexRoute()
        renderFetched=data => <PokemonList ...this.props ...data/>        
      />
    )
      

PokemonList.js

class PokemonList extends React.Component 

  render() 
    return (
      <ScrollView>
        this.props.viewer.allPokemons.edges.map(pokemonEdge => (
          <Text key=pokemonEdge.node.id>pokemonEdge.node.name</Text>
        ))
      </ScrollView>
    )
  



export default Relay.createContainer(PokemonList, 
  fragments: 
    viewer: () => Relay.QL`
      fragment on Viewer 
        id
        allPokemons(first: 10) 
          edges 
            node 
              id
              name
            
          
        
      
    `
  
)

App.js

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('https://api.graph.cool/relay/v1/ciyeih9590fhl0162e5zh1z4h')
)

export class IndexRoute extends Route 
  static queries = 
    viewer: () => Relay.QL`query  viewer `
  
  static routeName = 'IndexRoute'


const RootNavigationStack = StackNavigator(
  PokemonList: 
    screen: PokemonListWrapper
  
)

export default class App extends React.Component 
  render() 
    return (
      <RootNavigationStack />
    )
  

?