Reactjs 如何将graphQL查询变量传递到组件中

有人知道向apollo添加查询变量的正确方法是什么吗？如果我手动添加book name字符串而不是传入

$name

查询变量，我可以让以下代码正常工作，但只要我添加它并尝试通过propTypes中的选项传入name变量，

不变冲突：操作“data”包装“BookPage”需要一个变量：“name”，但在传递给“Apollo（BookPage）”的道具中找不到该变量

我直接从包中提取了decorator的语法，因此我知道它比其他示例有更多的语法优势，但它对查询仍然有效，对吗

const query = gql`
  query ($name: String!){
    bookByName(name: $name) {
      id
    }
}
`;

@graphql(query)
class BookPage extends React.PureComponent {
  static propTypes = {
    options: (props) => { return { variables: { name: "Quantum Mechanics"}}},
    data: mergeData({
      book:
        PropTypes.shape({
          id: PropTypes.string.isRequired,
        }),
    }),
  }

  render() {
    const { data } = this.props;
    if (data.loading) {
      return <p>Loading</p>
    }
    const { bookByName } = data;
    const book = bookByName;

    return (
      <p>book.id</p>
    );
  }
}

export default BookPage;

const query=gql`
查询（$name:String！）{
bookByName（名称：$name）{
身份证件
}
}
`;
@graphql（查询）
类BookPage扩展了React.PureComponent{
静态类型={
选项：（props）=>{return{variables:{name:“量子力学”}}}，
数据：合并数据({
书：
PropTypes.shape({
id:PropTypes.string.isRequired，
}),
}),
}
render（）{
const{data}=this.props；
if（数据加载）{
返回加载

}
const{bookByName}=数据；
const book=bookByName；
返回(
书号

);
}
}
导出默认书页；

装饰器的

@graphql

还有第二个参数，您可以在其中定义查询或变异的选项

类似于中的选项定义

因此，在您的情况下，它可能看起来像：

const query=gql`
查询（$name:String！）{
bookByName（名称：$name）{
身份证件
}
}
`;
@graphql（查询{
选项：（ownProps）=>({
变量：{
名称：ownProps.bookName//ownProps是从父组件添加的道具
},
})})
类BookPage扩展了React.PureComponent{
静态类型={
书名：PropTypes.string.isRequired，
数据：合并数据({
书：
PropTypes.shape({
id:PropTypes.string.isRequired，
}),
}),
}
render（）{
const{data}=this.props；
if（数据加载）{
返回加载

}
const{bookByName}=数据；
const book=bookByName；
返回(
书号

);
}
}
导出默认书页我试着把选项配置放到propTypes中，而不是decorator中，你的方式非常有效。谢谢