react-apollo中动态改变查询的解决方案答案

【问题标题】：Solution for dynamically chaning the query in react-apolloreact-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

标签： reactjs graphql-js apollo react-apollo higher-order-components

【解决方案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);

或者你可以遵循类似的模式。

不过，关于您的用例的更多细节会很有用。

【讨论】：