Arhn - архитектура программирования

Ретрансляция современного запроса 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

  }

Я не могу понять, как это сделать с реле. В примерах реле используется для получения и рендеринга onMount.

Но как мне получить данные и изменить состояние прослушивателей событий (onclick)? Я не мог найти ни одного подобного примера.

reactjs http javascript relay relayjs
11.08.2017

  • Вам нужно использовать мутации, которые напрямую взаимодействуют с хранилищем данных. Магазин поддерживает состояние вашего приложения. У вас могут быть функции запуска событий щелчка, которые запускают событие мутации. Мутации используют обратные вызовы и различные встроенные механизмы для оптимистического обновления состояния. 23.08.2017

Ответы:


1

вы можете объявить зависимость данных в ретрансляторе, но в некоторых случаях, когда у вас был paginationcontainer, который будет извлекать не «все», например. first: 10, поэтому мы не можем получить его длину, в этом случае вам нужно объявить другую зависимость данных, выполнив запрос. Надеюсь, вы понимаете, что я пытаюсь сказать.

Вот как я это делаю в своем коде, вам нужно больше изучить реквизиты реле:

  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 
      }
    });
  }

внедрите это в свой код, а затем обновите меня. Удачи!

29.08.2017
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..