Как определить состояние загрузки мутации с помощью реакции-apollo graphql

Question

Использование текущей версии компонента более высокого порядка в react-apollo (v0.5.2), я не вижу документально подтвержденного способа сообщить своему пользовательскому интерфейсу, что мутация ожидая ответа сервера. Я вижу, что earlier versions of the package отправит свойство, указывающее на загрузку.

Запросы по-прежнему получать свойство загрузки как описано здесь: http://dev.apollodata.com/react/queries.html#default-result-props

Мое приложение также использует Redux, так что я думаю, что один из способов сделать это, чтобы подключить компонент к Redux и передать вниз функцию собственности, которая поместит мой пользовательский интерфейс в состоянии загрузки. Затем, переписывая мою мутацию graphql в свойство, я могу совершать звонки, чтобы обновить хранилище redux.

Что-то примерно так:

function Form({ handleSubmit, loading, handleChange, value }) { 
    return (
    <form onSubmit={handleSubmit}> 
     <input 
     name="something" 
     value={value} 
     onChange={handleChange} 
     disabled={loading} 
     /> 
     <button type="submit" disabled={loading}> 
     {loading ? 'Loading...' : 'Submit'} 
     </button> 
    </form> 
); 
} 

const withSubmit = graphql(
    gql` 
    mutation submit($something : String) { 
     submit(something : $something) { 
     id 
     something 
     } 
    } 
    `, 
    { 
    props: ({ ownProps, mutate }) => ({ 
     async handleSubmit() { 
     ownProps.setLoading(true); 
     try { 
      const result = await mutate(); 
     } catch (err) { 
      // @todo handle error here 
     } 
     ownProps.setLoading(false); 
     }, 
    }), 
    } 
); 

const withLoading = connect(
    (state) => ({ loading: state.loading }), 
    (dispatch) => ({ 
    setLoading(loading) { 
     dispatch(loadingAction(loading)); 
    }, 
    }) 
); 

export default withLoading(withSubmit(Form)); 

Мне интересно, если есть более идиоматический подход к информированию UI, что мутация «в полете». Благодарю.

Answer 1

Я повторно разместил this question on github, и предлагаемое решение должно было использовать что-то вроде реагирующего компонента более высокого порядка так же, как вы предлагали в своем исходном вопросе. Я сделал аналогичную вещь - без использования сокращения - as outlined in this gist.

Сошлемся Tom Coleman «s ответ от вопроса GitHub:

Это действительно не имеет смысла включать загрузку состояния на мутации контейнера; если вы думаете об этом, вы можете одновременно вызвать мутацию - какое состояние загрузки должно передаваться дочернему? Мое чувство вообще нехорошо смешивать императив (this.mutate (x, y, z)) с декларативными (реквизитами) вещами; это приводит к неразрешимым несоответствиям.