是否可以通过从兄弟组件调用 refetch
来更新组件的道具?
考虑具有以下结构的组件:
<Home> # wrapped in a QueryRenderer
<List /> # wrapped in a Fragment Container
<Map /> # wrapped in a Refetch Container
</Home>
List
和 Map
使用相同的查询 endpoints : allItems
.
当 Map
调用 refetch
时,它自己的数据更新,但是 List
的数据不会更新 .
重新获取查询与 Home
的 QueryRenderer
查询相同 . 似乎Relay没有将重新获取的结果映射到保存 List
数据的商店的部分,因为 List
的道具不会改变 .
refetch是否有可能更新Refetch Container包含的组件之外的props?如果没有,一个组件中的更改如何触发重新获取并更新兄弟组件的props而不将重新获取容器移动到更高级别 - 除非这是唯一的方法?
对于更多上下文,我已经包含了一些代码来更清楚地说明结构和查询 .
使用Relay,假设我们有一个包含在 QueryRenderer
中的父组件来执行初始数据提取 .
<QueryRenderer
environment={environment}
query={graphql`
query HomeQuery {
...List_query
...Map_query
}
`}
render={({ error, props }) => {
if (error) {
console.log(error)
return <div>Error!</div>
}
if (!props) {
return <div>Loading...</div>
}
return (
<div>
<List query={props} />
<Map query={props} />
</div>
)
}}
/>
List
和 Map
都包含片段 . List
用Fragment Container包装:
createFragmentContainer(List, {
query: graphql`
fragment List_query on Query {
allItems(first: 10) @connection(key: "Map_allItems") {
edges {
node {
id
name
}
}
}
}
`
})
而 Map
包装在Refetch容器中:
createRefetchContainer(
Map,
{
query: graphql`
fragment Map_query on Query {
allItems(first: 10) @connection( key: "Map_allItems") {
edges {
node {
id
name
created
}
}
}
}
`
},
graphql`
query MapRefetchQuery {
...Map_query
...List_query
}
`
)
代码已经减少,因此可能会有拼写错误!如果是这种情况,请告诉我,我会更新它 .