Apollo React: Как повторно запросить запрос, если в выпадающем списке выберите другой вариант?

Question

Мне нужно показать разные данные в зависимости от выбранной опции из выпадающего списка.Я запрашиваю значение, используя 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>

Answer 1

Хотя вы можете, не обязательно использовать 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 })}
  >

Answer 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>