GraphQL _ Apollo-client - 直接在组件中传递 guery 变量答案

【问题标题】：GraphQL _ Apollo-client - pass guery variables directly in componentGraphQL _ Apollo-client - 直接在组件中传递 guery 变量
【发布时间】：2019-01-25 06:40:31
【问题描述】：

我正在尝试直接在我的 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);

所以我还是在寻找如何直接在组件中传递，任何提示都会很棒，

谢谢，

【问题讨论】：

标签： reactjs graphql apollo react-apollo apollo-client

【解决方案1】：

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

它有一些缺点 - 使用graphql() 编写许多查询和突变要容易得多。

【讨论】：

可能会很有趣
stackoverflow.com/questions/39814853/…

【解决方案2】：

Redux 来了，再次证明了它的强大。

我只需在我的 Redux 状态下传递属性。然后，我将变量选项中的属性直接传递给 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);

【讨论】：