中继 prepareVariables 中的道具？

Question

您好，我可以访问容器上 prepareVariables 中的道具吗？

我有一个递归结构：

LocationList = Relay.createContainer(LocationList, {
    fragments: {
        location: () => Relay.QL`
            fragment on LocationPart {
                id, children { 
                    id, hasChildren, value,
                    ${LocationListItem.getFragment('location')} 
                }
            }
        `
    }
});
LocationListItem = Relay.createContainer(LocationListItem, {
    initialVariables: {
        expanded: false
    },
    fragments: {
        location: (variables) => Relay.QL`
            fragment on LocationPart {
                id, path, value, description, hasChildren,
                ${LocationList.getFragment('location').if(variables.expanded)}
            }
        `
    }
});

在根上，我将第一层扩展为：

fragment on LocationPart {
    ${LocationListItem.getFragment('location', { expanded: true })}
}

我想保留整个状态并在以后恢复。我已经涵盖了保留状态，并将带有状态的对象树传递给所有节点。所以我希望能够在 prepareVariables:

prepareVariables() {
    return { expanded: this.props.open[this.location.id] };
}

我尝试使用构造函数：

constructor(props) {
    super(props);
    if (props.open[props.location.id]) 
        props.relay.setVariables({ expanded: true });
}

但随后中继抱怨提供给 LocationList 的预期道具 location 将由中继获取数据。

这可能吗？

Answer 1

您不能 - prepareVariables 在组件呈现之前运行，并且道具在那里不可用。相反，使用从父级传入的变量。

Answer 2

这里的挑战是 expanded/collapsed 组件列表是针对每个实例的，而中继查询是静态的并且在创建任何组件之前构建。静态查询每个级别包含一个 LocationListItem，而结果将包含一个项目列表。这意味着查询不能表示不同列表项的不同 expanded 值，因为查询甚至没有多个列表项。

这是 GraphQL 和 Relay 中的明确设计决策：查询是静态的，因此大多数查询可以在单次往返中执行（更多解释 on the Relay docs）。在这种复杂的情况下，您可以：

要允许一次性获取数据，您可以更改查询本身以接受 expanded/collapsed 项的映射作为输入参数，并相应地调整 return 类型。
如果您可以接受一些额外的往返，您可以继续使用相同的查询并在 componentDidMount 生命周期方法中使用 setVariables，根据 props 设置扩展变量（例如你试图在 prepareVariables).

中继 prepareVariables 中的道具？

Props in relay prepareVariables?

javascript

relayjs