CODEWITHSUNDEEP
react-apollo
MonkeyBonkey
MonkeyBonkey

Reputation: 47861

How to call an apollo client query from a redux action

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.

Upvotes: 9

Views: 4233

Answers (2)

MonkeyBonkey
MonkeyBonkey

Reputation: 47861

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

Upvotes: 2

Ali Miskeen
Ali Miskeen

Reputation: 300

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.

Upvotes: 0

Related Questions