使用React Native中的react-navigation时,Relay中的数据未被提取

时间:2017-03-29 09:09:28

标签: javascript react-native graphql relay react-navigation

我正在尝试使用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":[{}]}}}

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

1 个答案:

答案 0 :(得分:1)

我自己解决了这个问题,显然PokemonList是我的根组件,无法访问所请求的数据 - 虽然我认为它实际上已经加载了,但是由于Relay&# 39;组件无法看到数据屏蔽。

我提出的解决方案是将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 />
    )
  }
}