[英]GraphQL _ Apollo-client - pass guery variables directly in component
I'm trying to pass my GraphQL queries's variables directly in my React component. 我试图在我的React组件中直接传递GraphQL查询的变量。
So far I have tried to pass it : 到目前为止,我已经尝试通过:
None of them works, maybe I have forget something. 它们都不起作用,也许我忘记了一些东西。
Currently I have to hardcode it in the options but it privates me of the possibility to dynamically code it : 目前,我必须在选项中对其进行硬编码,但是它使我无法对它进行动态编码:
export default graphql(fetchRecipe,
{options: (props) => ({
variables: { }
})})(Displayer);
* Workaround try but fails: the vanishing pattern as following :* *解决方法尝试但失败:消失模式如下:*
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);
So I still search how to pass it directly in component, Any hint would be great, 所以我仍然在搜索如何直接在组件中传递它,任何提示都会很棒,
Thanks, 谢谢,
You're probably (?) looking for graphQL usage from inside of components
. 您可能正在(?)从inside of components
寻找graphQL的用法。 It's possible with <Query />
and <Mutation />
components. <Query />
和<Mutation />
组件是可能的。 https://www.apollographql.com/docs/react/essentials/queries.html#manual-query can be suitable, too. https://www.apollographql.com/docs/react/essentials/queries.html#manual-query也可能适用。
It has some drawbacks - composing many queries and mutations is far easier with graphql()
. 它有一些缺点-使用graphql()
轻松组成许多查询和变异。
Redux comes at hand and prove again its awesomness. Redux即将到来,再次证明了它的出色。
I have simply to pass the property in my Redux's state. 我只需在Redux的状态下传递属性。 Then, I pass the property in the variable option direclty vie the ownProps property. 然后,我将变量选项direclty中的属性传递给ownProps属性。 Hence, my state can reach the query. 因此,我的状态可以到达查询。 I will appreciate if it allow me to dynamically refetch my data now. 如果能使我现在动态地重新获取数据,我将不胜感激。
Here my reduxContainer.js: 这是我的reduxContainer.js:
const mapStateToProps = (state) => {
return {
property: state
}
}
const yourContainer = connect(mapStateToProps)(YourReactComponent)
export default yourContainer
Then, the state's connected query: 然后,该州的连接查询:
export default graphql(YourQuery,
{options(ownProps) {
return {
variables: { property : ownProps.property}
}
}})(YourReactComponent);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.