React GraphQL Apollo and Redux. How to query data and place it in initialState of the store?

Question

How can I get the data from GraphQL/Apollo in my Redux store ? Here is my entry file.

...

render(
  (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <App />
        </ConnectedRouter>
      </Provider>
    </ApolloProvider>
  ),
  document.getElementById('root'),
);

And here is the store

import { createStore, applyMiddleware, compose as composeRedux } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import rootReducer from '../reducers';

export const history = createHistory();

const initialState = {};
const enhancers = [];
const middleware = [
  thunk,
  routerMiddleware(history),
];

if (process.env.NODE_ENV === 'development') {
  const { devToolsExtension } = window;

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension());
  }
}

const composedEnhancers = composeRedux(
  applyMiddleware(...middleware),
  ...enhancers,
);

const store = createStore(
  rootReducer,
  initialState,
  composedEnhancers,
);

export default store;

I used the following query for my App component

const LOGGED_IN_USER = gql`
  query LoggedInUser {
    loggedInUser {
      id
      facebookUserId
      facebookEmail
      facebookName
      facebookPicture
      facebookLocation
    }
  }
`;

export default compose(graphql(LOGGED_IN_USER, {
  options: {
    fetchPolicy: 'network-only',
  },
}))(App);

Should I move the query from App to the store? I'm lost. ;-)

Do you need the data in your Redux store? Just asking, because maybe you want to separate view state and data state with Redux and Apollo Client. — Robin Wieruch

Harkirat Saluja Harkirat Saluja · Accepted Answer · 2018-01-16T07:34:06

You need to combine your reducer with apollo's reducer. You can try something like:-

const client = new ApolloClient({
  networkInterface,
  dataIdFromObject: (o) => o.id
});

const middlewares = [thunk, logger];

const rootReducer = combineReducers({
  wlStore: wlReducer,
  apollo: client.reducer()
});

const store = applyMiddleware(...middlewares, client.middleware())(createStore)(rootReducer);

Your store would something like this:-

store: {
  wlStore: {
    // redux store
  },
  apollo: {
    // apollo store
  }
}

React GraphQL Apollo and Redux. How to query data and place it in initialState of the store?

1 Answers