How to make Redux Thunk and Apollo GraphQL work together

Question

In my projects, Redux Thunk are used to keep all the async functions in action creators.

Now I am trying to add Apollo GraphQL into my project, everything works well except that when adding mutations into my functional Component and call them there, it breaks the redux thunk architecture.

How to solve it? I suppose I can create new action creator methods and pass the mutations into them, but it would soon become boilerplate and that just doesn't seem to be a good solution to me.

Answer 1

Apollo mutations don't break redux thunk architecture. If you need to update your own reducers after a mutation, then dispatch those reducer's actions from within the then or catch of the mutation. Apollo's graphql container is designed to replace async redux middleware (thunks, sagas, epics), not break it.

For Apollo Client 1.0

If you want, you could also wire up your own reducers to the same actions that Apollo dispatches (APOLLO_MUTATION_INIT, APOLLO_MUTATION_RESULT, etc.). Just makes sure that you have the apollo store integrated with your own. See http://dev.apollodata.com/react/redux.html.

Update: Migrating to Apollo Client 2.0

Apollo Client 2.0 removed the dependency on using redux as its cache (store). If you still want to be able to use 1.0 style actions in your reducers, you can use this link https://www.npmjs.com/package/apollo-link-redux (example usage in the readme).