How to call an apollo client query from a redux action

Question

If I'm using redux and the apollo client in my app, what's the best way to trigger a query from an action outside of a component.

For example, if I have a standard app, with redux and apollo client configured, how should I trigger a "refresh" list. I can trigger a function on the component itself which has the gql, but how would I do it from an action which would be more in line with flux.

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, say I want to trigger an action to refresh that user data? Since the logic is in the component itself, I'm not sure how I would trigger that gql query from the action itself.

score 2 · Accepted Answer · answered Jun 07 '17 at 14:59

2

I would need to use the ApolloClient in my actions.js. e.g.

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

answered Jun 07 '17 at 14:59

MonkeyBonkey

46,433
78
254
460

Have you find a way to do this? – Dec 10 '17 at 20:58
yeah you can just use the apollo client directly like in my sample code in the answer. – MonkeyBonkey Dec 12 '17 at 14:18
1

And from other components? `withApollo`? – Dec 12 '17 at 15:27

score 0 · Answer 2 · edited Jun 07 '17 at 07:02

I see your needs, as I was just in your place couple of days ago.

The sad news is: if you want to use actions with graphQL, then you shouldn't be using apollo, just use graphQL directly. This is a very good article to walk you through - getting started with Redux and GraphQL. Why? Because Apollo uses a function called qraphql(query) which calls its own action.

How both Redux and Apollo work in a very simplistic way.

Redux: (User dispatches an action) ActionCreator --> Action --> Middleware --> reducer --> store --> bind data to user props. And we control each state manually.
Apollo: (User passes the query/mutation to graphql(query)) all hidden (action --> store) then binds data to user props.

You can say that Apollo replaces Redux if you are using graphql, because it has a better integration with react and graphQL.

In the meantime, as Apollo is still developing, you might need redux for redux-form and so on. If you are used to some redux libraries, which you might consider to continue using redux besides Apollo, you can still bind their stores and add costumed middleware that probably apply to both, but you probably won't be fetching data using Redux actions through Apollo.

I know it feels like you are loosing redux, but you are getting all advantages with more async requests and caching taking care of with Apollo.

and if you need a place to start react-redux-apollo.

How to call an apollo client query from a redux action

2 Answers2