Jak określić stan obciążenia mutacji za pomocą reagującego apollo grafql

Question

Używając aktualnej wersji komponentu wyższego rzędu graphql w react-apollo (v0.5.2), nie widzę udokumentowanego sposobu poinformowania mojego interfejsu użytkownika, że ​​mutacja jest oczekiwanie na odpowiedź serwera. Widzę, że earlier versions of the package wyśle ​​właściwość wskazującą ładowanie.

Zapytania nadal otrzymywać właściwość załadowczy udokumentowane tutaj: http://dev.apollodata.com/react/queries.html#default-result-props

Moja aplikacja jest również za pomocą Redux, więc myślę, że jednym ze sposobów, aby to zrobić, to podłączyć mój składnik do Redux i przechodzą w dół własności funkcji, które umożliwią mój interfejs do stanu ładowania. Następnie, podczas przepisywania mojej mutacji grafql do właściwości, mogę wykonywać połączenia, aby zaktualizować sklep redux.

Coś mniej więcej tak:

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

Jestem ciekawy, czy istnieje bardziej idiomatyczne podejście do informowania UI, że mutacja jest „w locie”. Dzięki.

Answer 1

Ponownie opublikowałem this question on github, a sugerowanym rozwiązaniem było użycie czegoś w stylu reagującego komponentu wyższego rzędu, tak jak zaproponowałeś w oryginalnym pytaniu. Zrobiłem podobną rzecz - bez użycia reduxa - as outlined in this gist.

Przytoczyć Tom Coleman „s odpowiedź od wydania github:

To naprawdę nie ma sensu to stan ładowania na mutację pojemnika; jeśli myślisz o tym, możesz dwukrotnie nazwać mutację - który stan załadunku powinien zostać przekazany dziecku? Moje odczucia to generalnie nie jest miło mieszać imperatyw (this.mutate (x, y, z)) z deklaratywnymi (props) rzeczami; prowadzi to do nierozwiązywalnych niespójności.