从外部存储中检索中继查询片段的变量
Retrieving variables for a Relay query fragment from an external store
在编写 GraphQL 查询片段作为 RelayContainer
的一部分时,我一直在为如何在某些情况下设置查询变量而苦苦挣扎。 documentation 中概述的基础知识非常简单。但是考虑到这些查询的静态性质以及 RelayContainer
如何成为高阶 React 组件,当查询所需的输入是来自外部源的对象时,我不确定处理此问题的最佳方法,例如作为 Redux 商店。在组件加载之前,我没有任何方法从该存储中检索数据,因此作为一种解决方法,我一直在使用 @include
指令并在组件加载后将 ready 变量设置为 true:
class ListData extends React.Component {
// ... proptypes
componentWillMount() {
const { listDataInfo } = this.context.store.getState(); // Retrieve from Redux store
this.props.relay.setVariables({
input: {
id: listDataInfo.id,
user: listDataInfo.user
},
inputReady: true,
});
// The query will now execute and fetch all the data
}
render() {
return (
{/* view */}
)
}
}
export default Relay.createContainer(ListData, {
initialVariables: {
input: null,
inputReady: false,
},
fragments: {
listData: () => Relay.QL`
fragment on ListDataQuery {
listData(input: $input) @include(if: $inputReady) {
city
state
zip
phone
}
}
`,
},
});
最终这按预期工作,但我担心这更像是一种 hack,而且我遗漏了一些关于 Relay 应该如何处理查询变量的重要信息。有一个更好的方法吗? prepareVariables 看起来很有用,但我仍然无法访问我的数据存储。这是我明显的选择:
- 保持原样
- 将其转换为将在组件生命周期方法中执行的突变。我不想这样做,因为它会删除与组件的数据绑定。
- 使用自定义
RelayNetworkLayer
(可以访问我的商店)拦截我的查询并从那里的外部商店设置变量。这也感觉像是黑客。
我发现 this gist 完全符合我的要求。它允许你通过 @container
装饰器和 属性 variablesFromState
传递 redux 状态变量。本质上,它将 return 一个标准中继容器(如果 variablesFromState
未设置)或一个包裹在 redux Provider
包装器中并传入 redux 存储实例的中继容器。
在编写 GraphQL 查询片段作为 RelayContainer
的一部分时,我一直在为如何在某些情况下设置查询变量而苦苦挣扎。 documentation 中概述的基础知识非常简单。但是考虑到这些查询的静态性质以及 RelayContainer
如何成为高阶 React 组件,当查询所需的输入是来自外部源的对象时,我不确定处理此问题的最佳方法,例如作为 Redux 商店。在组件加载之前,我没有任何方法从该存储中检索数据,因此作为一种解决方法,我一直在使用 @include
指令并在组件加载后将 ready 变量设置为 true:
class ListData extends React.Component {
// ... proptypes
componentWillMount() {
const { listDataInfo } = this.context.store.getState(); // Retrieve from Redux store
this.props.relay.setVariables({
input: {
id: listDataInfo.id,
user: listDataInfo.user
},
inputReady: true,
});
// The query will now execute and fetch all the data
}
render() {
return (
{/* view */}
)
}
}
export default Relay.createContainer(ListData, {
initialVariables: {
input: null,
inputReady: false,
},
fragments: {
listData: () => Relay.QL`
fragment on ListDataQuery {
listData(input: $input) @include(if: $inputReady) {
city
state
zip
phone
}
}
`,
},
});
最终这按预期工作,但我担心这更像是一种 hack,而且我遗漏了一些关于 Relay 应该如何处理查询变量的重要信息。有一个更好的方法吗? prepareVariables 看起来很有用,但我仍然无法访问我的数据存储。这是我明显的选择:
- 保持原样
- 将其转换为将在组件生命周期方法中执行的突变。我不想这样做,因为它会删除与组件的数据绑定。
- 使用自定义
RelayNetworkLayer
(可以访问我的商店)拦截我的查询并从那里的外部商店设置变量。这也感觉像是黑客。
我发现 this gist 完全符合我的要求。它允许你通过 @container
装饰器和 属性 variablesFromState
传递 redux 状态变量。本质上,它将 return 一个标准中继容器(如果 variablesFromState
未设置)或一个包裹在 redux Provider
包装器中并传入 redux 存储实例的中继容器。