react-apollo中动态改变查询的解决方案
Posted
技术标签:
【中文标题】react-apollo中动态改变查询的解决方案【英文标题】:Solution for dynamically chaning the query in react-apollo 【发布时间】:2017-12-17 13:32:27 【问题描述】:react-apollo
在他们的docs 中有一个示例,他们根据组件道具计算查询变量:
// The caller could do something like:
<ProfileWithData avatarSize=300 />
// And our HOC could look like:
const ProfileWithData = graphql(CurrentUserForLayout,
options: ( avatarSize ) => ( variables: avatarSize ),
)(Profile);
我有一个用例,我想根据组件道具更改 查询,但很难弄清楚如何做到这一点。 p>
更具体地说,我正在尝试更改我从另一个文件导入的 CurrentUserForLayout
对象。
【问题讨论】:
解析器内部的开关可以工作吗?你绝对可以从 props 计算结果:dev.apollodata.com/react/queries.html#options-from-props 【参考方案1】:对于包装 graphql 调用并返回另一个接受您的低级组件的函数的高阶组件来说,这听起来像是一个很好的案例。然后,该 HOC 可以根据传递给它的属性动态创建查询。
例如
export const graphqlWrapper = (...rest) =>
const query = /* Create your query here. */;
return graphql(query, ...rest);
然后使用:
const ProfileWithData = graphqlWrapper(
options: ( avatarSize ) => ( variables: avatarSize ),
)(Profile);
或者你可以遵循类似的模式。
不过,关于您的用例的更多细节会很有用。
【讨论】:
以上是关于react-apollo中动态改变查询的解决方案的主要内容,如果未能解决你的问题,请参考以下文章
Graphql,react-apollo如何在加载组件状态时将变量传递给查询
当我的 useEffect 钩子在 react-apollo 突变后被触发时,如何从反应中解决这个警告?
未捕获的错误:react-apollo 仅支持每个 HOC 的查询、订阅或突变