How to invoke apollo client request from reducex action

Question

If I use redux and the apollo client in my application, what is the best way to trigger a request from an action outside the component.

For example, if I have a standard application with the redux and apollo client configured, how should I run the "update" list. I can call the function on the component itself that has gql, but how to do it from an action that will more closely match the thread.

import React, { Component, PropTypes } from 'react'; import { graphql } from 'react-apollo'; import gql from 'graphql-tag'; import { connect } from 'react-redux'; import { refreshProfile } from './actions'; class Profile extends Component { ... } Profile.propTypes = { data: PropTypes.shape({ loading: PropTypes.bool.isRequired, user: PropTypes.object, }).isRequired, }; const UserQuery = gql` query getUser { user { id name } } `; const ProfileWithData = graphql(UserQuery)(Profile); const ProfileWithDataAndState = connect( (state) => ({ user: state.user })), )(ProfileWithData); 

And let's say I want to call an action to update user data? Since the logic is in the component itself, I'm not sure how I will run this gql query from the action itself.

Answer 1

I will need to use ApolloClient in my actions.js. eg.

 import ApolloClient, { createNetworkInterface } from 'apollo-client'; const networkInterface = createNetworkInterface({ uri: config.graphCoolUri, }); const client = new ApolloClient({ networkInterface, dataIdFromObject: r => r.id, }); const { data } = await client.query({ query: UserQuery }); 

Answer 2

I see your needs since I was in your place a couple of days ago.

The sad news is: if you want to use actions with graphQL , then you should not use apollo , just use graphQL directly. This is a very good article to guide you through starting with Redux and GraphQL . What for? Because Apollo uses a function called qraphql(query) , which calls its own action.

Like Redux , and apollo work very simplified.

• Redux: (User submits an action) ActionCreator -> Action -> Middleware -> reducer -> store -> binds data to the user's details. And we control each state manually.

• Apollo: (The user passes the request / mutation to graphql(query) ) all hidden (action → store), and then binds the data to the user's details.

You can say that Apollo replaces Redux if you use graphQL because it has better integration with reaction and graphQL .

In the meantime, as Apollo is still evolving, you may need a shorthand for redux form and so on. If you're used to some abbreviation libraries that you might want to consider continuing to use abbreviations besides Apollo, you can still link your stores and add middleware that probably applies to both, but you're probably not You will receive data using Redux actions through Apollo.

I know that it looks like you are losing reductions, but you get all the benefits with more asynchronous requests and caching that Apollo cares about.

and if you need a place to run response-redux-apollo .