继电器现代请求onClick
问题描述:
如何使用中继onclick
向graphql发送请求?继电器现代请求onClick
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
}
我不知道如何用继电器做到这一点。 在这个例子中,relay用来获取并渲染onMount。
但我将如何获取数据和更改事件侦听器的状态(onclick
)? 我找不到任何这样的例子。
答
您可以在继电器中声明数据依赖性,但在某些情况下,当您有一个paginationcontainer将不会提取所有的第一:10,所以我们不能得到它的长度,在这种情况下,你需要通过请求声明另一个数据依赖。我希望你明白我想说的话。
这是我要做的事在我的代码,u需要探索继电器道具更多:
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
}
});
}
实现这个对我们的代码然后更新me.best运气!
您需要使用直接与数据存储交互的突变。该商店维护您的应用程序的状态。您可以让点击事件触发触发突变事件的功能。突变利用回调和各种内置机制来乐观地更新状态。 –