Question

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);

我有一个用例，我想根据组件道具更改查询，但我很难搞清楚如何执行此操作。

更具体地说，我正在尝试更改我从其他文件导入的CurrentUserForLayout对象。

Answer 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中动态查询查询的解决方案

1 个答案: