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

Posted 2023-03-08

【中文标题】GraphQL _ Apollo-client - 直接在组件中传递 guery 变量

【英文标题】：GraphQL _ Apollo-client - pass guery variables directly in component

【发布时间】：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); 

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

谢谢，

【参考方案1】：

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

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

【讨论】：

可能会很有趣

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