2

refetch是否可以通过从同级组件调用来更新组件的 props ？

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

<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'sQueryRenderer查询相同。似乎 Relay 不会将重新获取的结果映射到存储 的数据的部分List，因为List的道具不会改变。

refetch 是否可以更新 Refetch Container 包含的组件之外的 props？如果没有，一个组件中的更改如何触发重新获取并更新兄弟组件的道具而不将重新获取容器移动到更高级别 - 除非这是唯一的方法？

对于更多上下文，我包含了一些代码来更清楚地说明结构和查询。

使用 Relay，假设我们有一个包装在 a 中的父组件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 Container 中：

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
        }
    `
)

代码已减少，因此可能有错字！让我知道是否是这种情况，我会更新它。

4

0 回答 0