[英]Relay Modern request onClick
How can i send a request to graphql using relay onclick
? 我如何使用中继
onclick
向graphql发送请求?
render(){
<div>
<img src={this.state.picture}>
<input type="email" value={this.state.email} onChange{...}/>
<button onClick={this.checkEmail}>Check</button>
</div>
}
checkEmail = async () => {
const res = await axios({
method: 'post',
url: __RELAY_API_ENDPOINT__,
data: {
query: `query CheckEmail($email: String!){lookupEmail(email: $email){id, picture}}`,
variables: {"email": this.state.email}
}
});
//set state using res
}
I cant figure out how to do this with relay. 我无法弄清楚如何使用中继。 In the examples relay is used to fetch and render onMount.
在示例中,中继用于获取和渲染onMount。
But how would i get data and change state on event listeners ( onclick
) ? 但是我如何获取数据并更改事件侦听器(
onclick
)的状态? I couldnt find any example like that . 我找不到这样的例子。
you can declare data dependency in relay but in some cases when you had a paginationcontainer which will fetch not 'all' eg first: 10 so we cannot get the length of it, in this case, you need to declare another data dependency by doing request. 您可以在中继中声明数据依赖关系,但在某些情况下,当您有一个paginationcontainer不能获取“全部”时,例如first:10,因此我们无法获取其长度,在这种情况下,您需要通过执行请求来声明另一个数据依赖关系。 I hope you understand what I'm trying to say.
希望您能理解我的意思。
This is how i do it in my code, u need to explore the relay props more: 这就是我在代码中执行的操作,您需要更多地探索接力道具:
getPublicTodosLengthForPagination = async () => { // get publicTodos length since we cannot get it declared on createPaginationContainer
const getPublicTodosLengthQueryText = `
query TodoListHomeQuery {# filename+Query
viewer {
publicTodos {
edges {
cursor
node {
id
}
}
pageInfo { # for pagination
hasPreviousPage
startCursor
hasNextPage
endCursor
}
}
}
}`
const getPublicTodosLengthQuery = { text: getPublicTodosLengthQueryText }
const result = await this.props.relay.environment._network.fetch(getPublicTodosLengthQuery, {}) // 2nd arguments is for variables in ur fragment, in this case: e.g. getPublicTodosLengthQueryText but we dont need it
return await result.data.viewer.publicTodos.edges.length;
}
componentDidMount = async () => {
let result = await this.getPublicTodosLengthForPagination();
this.setState((prevState, props) => {
return {
getPublicTodosLength: result
}
});
}
implement this on ur code then update me.best of luck! 在您的代码上实现此功能,然后更新me.best!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.