是否可以通过从同级组件调用refetch
来更新组件的道具?
考虑具有以下结构的组件:
<Home> # wrapped in a QueryRenderer
<List /> # wrapped in a Fragment Container
<Map /> # wrapped in a Refetch Container
</Home>
List
和Map
使用相同的查询端点:allItems
。
当Map
调用refetch
时,它是自己的数据更新,但是List
的数据没有更新。
refetch查询与Home
的{{1}}查询相同。似乎中继不会将重新获取的结果映射到存储QueryRenderer
的数据的存储区中,因为List
的道具不会改变。
在Refetch容器包含的组件之外,refetch是否有可能更新道具?如果不是这样,除非唯一的方法是如何在不将refetch容器移到更高级别的情况下,如何在一个组件中进行更改以触发重新引用并更新同级组件的props?
有关更多上下文,我提供了一些代码以更清楚地说明结构和查询。
使用中继,假设我们有一个封装在List
中的父组件来执行初始数据提取。
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
createFragmentContainer(List, {
query: graphql`
fragment List_query on Query {
allItems(first: 10) @connection(key: "Map_allItems") {
edges {
node {
id
name
}
}
}
}
`
})
包装在Refetch容器中:
Map
代码已减少,因此可能有错字!让我知道是否是这种情况,我将对其进行更新。