Question

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

到目前为止，我一直试图通过它：

直接在this.props.mutate
在client.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);

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

2 个答案: