GraphQL에 대한 Dispatched Redx 액션에서 Apollo 클라이언트에 도달

Question

내 반응 앱에 Apollo를 통합하려고합니다.

쿼리 인수를 사용하여 동작을 디스패치하고이 동작 내에서 해당 쿼리를 처리하고 해결 된 약속을 페이드로드로 해당 감속기에 전달하려고합니다.

내 접근 방식은 다음과 같습니다.

나는

import { graphql } from 'react-apollo'; 
import { ApolloProvider } from 'react-apollo'; 
import { ApolloClient } from 'apollo-client'; 
import { HttpLink } from 'apollo-link-http'; 
import { InMemoryCache } from 'apollo-cache-inmemory'; 

const client = new ApolloClient({ 
    link: new HttpLink({ uri: 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr' }), 
    cache: new InMemoryCache() 
}); 

export default client 

그런 다음 나는 다음과 같은 조치를 내 구성 요소에서 파견 될 가지고 client.js 파일이 있습니다.

import client from '../graphclient' 

export function gQLFetch(query) { 

    const data = client.query({query: query}) 

    return { 
    type: "gQL_FETCH", 
    payload: new Promise((resolve, reject) => { 
     data.then(response => resolve(response)).catch(error => reject(error)) 
    }) 
    } 
} 

마지막으로, 내 감속기는 발송 작업을 처리하고 상태를 단지 나를 위해 잘 작동

const apiReducer = (state=[], action) => { 
    switch (action.type) { 
    case "gQL_FETCH_FULFILLED": 
     state = action.payload.data.allMovies 
     break; 
    } 
    return state; 
} 

export default apiReducer 

를 반환합니다.

그러나, 아폴로에 대한 문서는하는 index.js 파일 내부의 client을 정의하고 그래서 같이 전체 응용 프로그램에 클라이언트를 통과 client 속성을 사용하여 구성 요소 트리의 상단에 <ApolloProvider> 태그를 사용하여 제안한다;

ReactDOM.render(<ApolloProvider client={client}><Provider store={store}><App /></Provider></ApolloProvider>, document.getElementById('root')); 

내 첫 번째 질문

: 내 접근하는 것이 좋습니다? <ApolloProvider>은 전체 애플리케이션에 클라이언트를 서비스 할 수있는 방법을 제공하기 때문에 그렇지 않다고 느낍니다.

내 두 번째 질문은 다음과 같습니다. 쿼리 매개 변수를 전달하기 위해 내 redux 동작 내에서 클라이언트에 어떻게 접근합니까?

Answer 1

ApolloProvider 나를위한 HoC는 구성 요소에 직접 데이터를 채우거나 주입하려는 경우에 적합합니다. 다른 데이터 관리를 원할 경우 자체 클라이언트 요청 및 데이터 가져 오기 메커니즘을 만들 수 있습니다.

비동기 요청을 처리하는 방법이 올바르지 않습니다. 이러한 부작용을 관리하려면 redux-thunk 또는 redux-saga를 사용해야합니다. 감속기 기능은 동기식이어야하며 마지막으로 가져온 데이터 만 수신해야합니다. 귀하의 예에서 볼 수 있듯이 감속기는 .then 방법을 통해 처리해야하는 약속을받습니다. 어쩌면 당신은 미들웨어 같은 것을 사용하고 있을까요? redux-saga에 대해 자세히 읽고 세 가지 작업 (REQUEST, REQUEST_SUCCESSFUL 및 REQUEST_FAILURE)을 발송할 것을 제안합니다.