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