Apollo React: как обновить запрос, когда в раскрывающемся списке выбран другой вариант?
Мне нужно отображать разные данные в зависимости от выбранного варианта в раскрывающемся списке. Я запрашиваю значение с помощью компонента Query, и это значение отличается для каждого параметра.
Вот пример кода для этого.
<Query query = {CURRENT_USER}>
{({loading, error, data}) => {
if (loading)
return "loading...";
if (error)
return `Error! ${error.message}`;
return <h1>{data.month === Date().slice(4,7).toLowerCase() ? data.amount : 0}</h1>
}}
</Query>
<div>
<select defaultValue = {Date().slice(4,7).toLowerCase()}>
<option value = "jan">JAN</option>
<option value = "feb">FEB</option>
<option value = "mar">MAR</option>
<option value = "apr">APR</option>
<option value = "jun">JUN</option>
<option value = "jul">JUL</option>
<option value = "aug">AUG</option>
<option value = "sep">SEPT</option>
<option value = "oct">OCT</option>
<option value = "nov">NOV</option>
<option value = "dec">DEC</option>
</select>
</div>
Ответы 2
Компонент Query возвращает refetch, который можно передать функции onChange в вашей форме. Он принимает переменные так же, как исходный запрос.
Это выглядело бы примерно так:
<Query query = {CURRENT_USER} variables = {{month: this.state.month}}>
{({loading, error, data, refetch}) => {
if (loading) return 'loading...'
if (error) return `Error! ${error.message}`
return (
<h1>
{data.month ===
Date().slice(4, 7).toLowerCase()
? data.amount
: 0
}
</h1>
)
}}
</Query>
<div>
<select
value = {this.state.month}
onChange = {(event) => refetch({variables: {month: event.target.value}}
>
<option value = "jan">JAN</option>
<option value = "feb">FEB</option>
<option value = "mar">MAR</option>
<option value = "apr">APR</option>
<option value = "jun">JUN</option>
<option value = "jul">JUL</option>
<option value = "aug">AUG</option>
<option value = "sep">SEPT</option>
<option value = "oct">OCT</option>
<option value = "nov">NOV</option>
<option value = "dec">DEC</option>
</select>
</div>
@AndreyMedvedev Спасибо, что указали на это. Query возвращает refetch, который довольно легко использовать. Я обновил свой ответ.
refetch определен в Query, он выдаст ошибку при использовании его в теге select, который находится за пределами Query, и, конечно, перемещение всего select в Query, очевидно, является решением этого, но есть ли в любом случае я могу вызвать refetch извне Query и самое главное запрос CURRENT_USER не принимает никаких переменных.
Хотя вы можете, в этом типичном случае использования refetch не обязательно. Можно просто обычный setState сделать. Apollo увидит, что переменные были изменены, и автоматически обновит запрос. Обычно вы используете refetch, если у вас есть вложенный компонент, требующий изменений, и вы не детализируете обработчик onChange, который вызывает setState (и по другим причинам).
Чтобы указать также, вам нужно будет вызвать setState в обработчике onChange, чтобы выпадающий список выбора обновился. Таким образом, даже если вы добавили повторную выборку ниже, запрос будет извлекаться второй раз без необходимости.
<Query query = {CURRENT_USER} variables = {{ month: this.state.month }}>
<select
value = {this.state.month}
onChange = {event => this.setState({ month: event.target.value })}
>
Это не вызывает refetch onChange!
Не могли бы вы добавить код для всего вашего компонента, а не только для метода рендеринга?
Мне любопытно, действительно ли Query выполняет повторное сканирование при изменении переменной? Я не нашел такой информации в документации Apollo. Я думал, что для таких случаев есть специальная функция refetch (). Круто, если получится.