我正在尝试使用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":[{}]}}}
知道我在这个设置中缺少什么吗?
答案 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 />
)
}
}