Cách xác định trạng thái tải đột biến với graphql phản ứng-apollo

Question

Sử dụng phiên bản hiện tại của graphql thành phần bậc cao hơn trong react-apollo (v0.5.2), tôi không thấy cách tài liệu để thông báo cho UI của tôi rằng đột biến là đang chờ phản hồi của máy chủ. Tôi có thể thấy rằng earlier versions of the package sẽ gửi thuộc tính cho biết đang tải.

Queries vẫn nhận được một tài sản bốc như tài liệu ở đây: http://dev.apollodata.com/react/queries.html#default-result-props

ứng dụng của tôi cũng đang sử dụng Redux, vì vậy tôi nghĩ rằng một trong những cách để làm điều đó là để kết nối thành phần của tôi để Redux và vượt qua xuống một tài sản chức năng mà sẽ đưa giao diện người dùng của tôi vào trạng thái tải. Sau đó, khi viết lại biến thể graphql của tôi thành thuộc tính, tôi có thể thực hiện cuộc gọi để cập nhật kho lưu trữ redux.

Something gần như thế này:

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

tôi tò mò nếu có một cách tiếp cận nhiều thành ngữ để thông báo cho giao diện người dùng rằng đột biến là "trên máy bay." Cảm ơn.

Answer 1

Tôi đã đăng lại this question on github và giải pháp được đề xuất là sử dụng thứ gì đó giống như thành phần đặt hàng cao hơn phản ứng giống như bạn đã đề xuất trong câu hỏi ban đầu của mình. Tôi đã làm một điều tương tự - mà không sử dụng redux mặc dù - as outlined in this gist.

Để trích dẫn Tom Coleman 's phản ứng từ các vấn đề github:

Nó không thực sự có ý nghĩa với bao gồm tải trạng thái trên đột biến container; nếu bạn nghĩ về nó, bạn có thể gọi đột biến hai lần đồng thời - trạng thái tải nào sẽ được chuyển xuống cho trẻ? Cảm giác của tôi nói chung là không tốt đẹp khi trộn lẫn mệnh lệnh (this.mutate (x, y, z)) với các thứ khai báo (đạo cụ); nó dẫn đến mâu thuẫn không thể giải quyết được.