react-apollo graphql을 사용하여 돌연변이 로딩 상태를 결정하는 방법

Question

react-apollo (v0.5.2)의 graphql 상위 구성 요소의 현재 버전을 사용하여 UI에 돌연변이가 있음을 알리는 문서화 된 방법이 없습니다 서버 응답을 기다리고 있습니다. earlier versions of the package은로드를 나타내는 속성을 보낼 것입니다. http://dev.apollodata.com/react/queries.html#default-result-props 내 응용 프로그램은 또한 REDUX을 사용

, 그래서 내가 할 수있는 한 가지 방법은 REDUX 내 구성 요소를 연결하고 넣어하는 함수 속성을 전달하는 것입니다 생각 : 여기에 설명 된대로

쿼리는 여전히 로딩 속성을받을 내 UI를 로딩 상태로 만듭니다. 그런 다음 graphql mutation을 속성에 다시 작성할 때 redux 저장소를 업데이트하도록 호출 할 수 있습니다. 대략 이런

뭔가 : 돌연변이 인 UI 알리는에 더 관용적 방법이 있다면 내가 궁금

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

"기내가." 감사.

Answer 1

this question on github을 다시 게시했으며 원래의 질문에서 제안한 것처럼 반응하는 고차원 구성 요소와 같은 것을 사용하는 것이 좋습니다. 나는 유사한 것을 했어. - redux는 사용하지 않고. as outlined in this gist.

은 GitHub의 문제에서 Tom Coleman의 응답 인용 : 정말 돌연변이 컨테이너에 적재 상태를 포함하는 이해가되지 않습니다

을; 당신이 그것에 대해 생각한다면 돌연변이를 두 번 동시에 호출 할 수 있습니다 - 어느 로딩 상태가 자식에게 전달되어야합니까? 내 느낌은 일반적으로 명령형 (this.mutate (x, y, z)) 과 선언적 (소품)을 섞는 것이 좋지 않습니다. 그것은 해결할 수없는 불일치를 가져온다.