Relay的RefetchContainer可以使用refetch更新同级组件吗?

时间:2018-09-07 20:05:58

标签: reactjs graphql relayjs relaymodern

是否可以通过从同级组件调用refetch来更新组件的道具?

考虑具有以下结构的组件:

<Home> # wrapped in a QueryRenderer
    <List /> # wrapped in a Fragment Container
    <Map /> # wrapped in a Refetch Container
</Home>

ListMap使用相同的查询端点: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

代码已减少,因此可能有错字!让我知道是否是这种情况,我将对其进行更新。

0 个答案:

没有答案