Relay Modern request onClick

Question

リレー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 

    } 

私はリレーでこれを行う方法を理解できません。 例では、リレーはonMountの取得とレンダリングに使用されます。

しかし、イベントリスナー（onclick）でデータを取得して状態を変更するにはどうすればよいですか？ 私はそのような例を見つけることができませんでした。

Answer 1

リレーでデータ依存関係を宣言することはできますが、場合によっては、「すべて」ではないフェッチするページ区画を持っている場合などです。最初は：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を更新ウルのコードでこれを実装！