GraphQL _ Apollo客户端-直接在组件中传递guery变量

Question

我试图在我的React组件中直接传递GraphQL查询的变量。

到目前为止，我已经尝试通过：

• 直接在this.props.mutate中
• 在client.props中
• 在我的父组件中作为<parentProps variables = {props} />
• 查看React.clone
• 在client.query中

它们都不起作用，也许我忘记了一些东西。

目前，我必须在选项中对其进行硬编码，但是它使我无法对它进行动态编码：

export default graphql(fetchRecipe, 
        {options: (props) => ({ 
            variables: {  }
        })})(Displayer); 

*解决方法尝试但失败：消失模式如下：*

import {...} 

var property; // just declare your property

class YourClass extends Component { 

property = newValue // your property is now available on the Component's scope, 
                    // allowing you to code it dynamically

render(){ {...}

}

export default graphql(query, 
        {options: (props) => ({ 
            variables: { property } // hence pass the value you want in your graphql options's property
        })})(YourClass); 

所以我仍然在搜索如何直接在组件中传递它，任何提示都会很棒，

谢谢，

Answer 1

您可能正在（？）从inside of components寻找graphQL的用法。 <Query />和<Mutation />组件是可能的。 https://www.apollographql.com/docs/react/essentials/queries.html#manual-query也可能适用。

它有一些缺点-使用graphql()轻松组成许多查询和变异。

Answer 2

Redux即将到来，再次证明了它的出色。

我只需在Redux的状态下传递属性。 然后，我将变量选项direclty中的属性传递给ownProps属性。 因此，我的状态可以到达查询。 如果能使我现在动态地重新获取数据，我将不胜感激。

这是我的reduxContainer.js：

const mapStateToProps = (state) => { 
    return {
    property: state
    }
}
const yourContainer = connect(mapStateToProps)(YourReactComponent)
export default yourContainer

然后，该州的连接查询：

export default graphql(YourQuery, 
        {options(ownProps) {
            return {
              variables: { property : ownProps.property}
            }
}})(YourReactComponent);