Запрос из базы данных по событию onChange внутри выбора ввода в React, Redux-Form и GraphQL - PullRequest
Новая
       34

Запрос из базы данных по событию onChange внутри выбора ввода в React, Redux-Form и GraphQL

0 голосов
/ 18 марта 2020

Я пытаюсь выполнить запрос из базы данных, когда пользователь выбирает машину из поля select input (данные также поступают из базы данных). Я использую редукс-форму. Мой код выглядит следующим образом: 

<div className='universal_form-input'>
  <label>Mechine Name</label>
    <Field
      type='number'
      name='machine'
      component={this.renderSelect}
     />
</div>

И select input, заполненный именем машины и value, является id соответствующей машины. Теперь, когда пользователь выберет компьютер, его состояние будет обновлено значением id этого компьютера.

Вкл. handleChange Я пытаюсь вызвать метод с именем queryMachineById, который должен извлекать данные по заданным параметрам. c machine id. И запрос должен вернуть noOfDispenser этой машины из базы данных. (Кстати, этот запрос работает на площадке GraphQL). 

handleChange = (event, input) => {
    event.preventDefault();
    const { name, value } = event.target;
    input.onChange(value);
    this.setState({ [name]: value });
    setTimeout(() => {
      this.queryMachineById();
    }, 1000);
  };

queryMachineById метод написан, как показано ниже: 

 queryMachineById = () => {
    const machineId = parseInt(this.state.machine);
    console.log(typeof machineId, machineId);
    return (
      <Query query={MACHINE_BY_ID_QUERY} variables={{ machineId }}>
        {({ data, loading, error }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error</p>;
          console.log(data);
          return data.machineById.map(
            machine => (initialValues.dispenserNo = machine.noOfDispensers)
          );
        }}
      </Query>
    );
  };

machineId также обновляется с действительным значением id из состояния , Но console.log(data) внутри queryMachineById ничего не показывает, даже не пустой {}

Мой GraphQL query выглядит так: 

export const MACHINE_BY_ID_QUERY = gql`
  query MACHINE_BY_ID_QUERY($machineId: Int!) {
    machineById(machineId: $machineId) {
      id
      noOfDispensers
    }
  }
`;

onClick тоже нет за работой.

1 Ответ

1 голос
/ 19 марта 2020

Устаревший / устаревший

  • с использованием <Query /> и <Mutation/> компонентов - признак использования устаревших примеров / учебников / знаний.

В эти дни вы должны использовать useLazyQuery hook.

Конечно, вы все еще можете использовать <Query/> component или даже более старые методы (compose [множественные] graphql HOCs), если они поддерживаются.

  • Используйте старые документы
  • или вы можете использовать свойство skip для его ручного запуска ...
  • или даже [проще] визуализировать <Query/> компонент условно.

Более новые методы описаны в документах .

Bads

В React вы не можете визуализировать компоненты из обработчиков событий . Вы можете использовать методы [переданные в качестве реквизита], полученные из компонентов (например, mutation ), но never rendered from handler! - например, вы не можете вернуть ничего видимого (подлежащего визуализации) из обработчика событий (вместо этого обновите состояние, выполните рендеринг) что-то условно) ... это все управляемые данными , update data > render will update a view.

Обновление

Компонент работает только в контексте рендеринга / flow - поток обработчика события является отдельным, вы не можете использовать (как не отображать его) или возвращать компонент, который должен быть отображен (отображение было закончено ранее) - таким образом, вы не можете использовать его функциональность - запрашивая в этом случае.

[Один из вариантов] Вы должны визуализировать <Query /> компонент в потоке рендеринга и использовать свойство skip, чтобы заблокировать его автоматический c запуск при запуске. Обработчик может изменить условие блокировки (skip) (используйте setState), и он будет запущен и перезапущен с результатами data. Таким образом, вы управляете запросом событий.

...