继电器现代请求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)? 我找不到任何这样的例子。

+0

您需要使用直接与数据存储交互的突变。该商店维护您的应用程序的状态。您可以让点击事件触发触发突变事件的功能。突变利用回调和各种内置机制来乐观地更新状态。 –

您可以在继电器中声明数据依赖性,但在某些情况下,当您有一个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运气!