Redux Reducer에서 GraphQL Mutation을 사용하는 방법

Question

여기 내 감속기에서 돌연변이를 불러 일으키는 반응 무 상태 함수가 있습니다. 참고로, React.Component 클래스 내에서 돌연변이를 호출하는 것은 구성 요소 내부에 함수를 추가하여 작동합니다. 그럴 필요가 없습니다. 내 감속기를 사용하고 싶습니다.

최소 코드 예제와

, 내 설치

// index.js render function 


[...] // imported variables 

<ApolloProvider client={client}> 
    <Provider store={store}> 
    <ConnectedRouter history={history}> 
     <div> 
     <App /> 
     </div> 
    </ConnectedRouter> 
    </Provider> 
</ApolloProvider> 

// Mutation 
const Foo = gql` 
    mutation Foo($id: String) { 
    AddBar(id: $id) { 
    id 
    } 
    } 
`; 

// Component 
[...] // other imports for below variables 
const Comp = (props) => (
    <div> 
    <button onClick={() => props.addFoo(props)}>Click</button> 
    </div> 
) 

const mapDispatchToProps = dispatch => bindActionCreators({ 
    addFoo 
}, dispatch) 

export default connect(
mapDispatchToProps 
)(graphql(Foo)(Comp)) 

// Reducer (very slimmed with just the action) 

export const addFoo = (props) => { 

// props contained the mutate function 
props.mutate({ 

    variables: {id: "1" } 

}) 

    // dispatch goes here but not needed. 

} 

좋아 보여주지, 나는 가능한 한 많은이 예제를 다운 몸매는 여전했다. 내 문제는 내 변수가 내 mutation 함수로 전달되지 않는다는 것입니다. id을 하드 코드하여 단추를 클릭하면 graphql이 내 데이터를 변경하지만 (예) 변수가 전달되지 않는 유일한 문제입니다. 관리자에서는 올바른 값을 가진 변수를 보지만 ... mutate 함수로 전달하지 않습니다.

Answer 1

몇 가지 생각 ...

첫째, 감속기는 데이터를 돌연변이하거나 비동기 호출을해서는 안됩니다. 그것들은 부작용이없는 순수한 기능을 의미합니다.

GraphQL을 잠시 동안 사용하지 않고 REST 통화 만 있다고 가정하면 대개 Action Creator 또는 비슷한 것으로 변합니다. 액션 Redux의 생성자는 본질적으로 동기 적이므로 Redux Thunks 또는 Redux Sagas (또는 이와 비슷한 것)을 사용하면 도움이됩니다.

그래, GraphQL을 다시 설치해 보자. 당신의 구성 요소에 돌연변이를 포함 시키면 Redux 구현에 연결하는 것이 어렵다는 것을 지적했다. 이 두 가지는 상호 배타적입니다. mutate에 반응하지 않고 돌아 오는 구현 그러나 일반적 비동기 fetch 전화를 할 것입니다, 당신은

이제

const apolloClient = createApolloClient(); 
apolloClient.mutate({mutation: Foo}).then(handleResult) 

, createApolloClient() 무엇을합니까 ... 아폴로 클라이언트를 사용할 수 있습니까? 매번 새로운 것을 만들고 싶지는 않습니다. 해당 클라이언트는 캐시를 유지 관리하고 클라이언트 재사용에서 오는 모든 부가가치를 처리 할 수 ​​있습니다. 그것은 React 코드에 해당됩니다. ReQuality 액션 생성자에서 사용하는 것과 동일한 클라이언트를 사용하도록 React 바인딩에서 어떤 쿼리를 실행하고 싶습니다. 그 createApolloClient() 기능은뿐만 아니라 당신의 ApolloProvider에서 사용할 줄 수 있도록 클라이언트 싱글을 만들고 그것을 반환 할 필요가 :

<ApolloProvider client={createApolloClient()}> 

난이 도움이되기를 바랍니다!