Relay Modern request onClick

Question

How can i send a request to graphql using relay 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

  }

I cant figure out how to do this with relay. In the examples relay is used to fetch and render onMount.

But how would i get data and change state on event listeners ( onclick ) ? I couldnt find any example like that .

Answer 1

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. 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!