Skip to content

Instantly share code, notes, and snippets.

@joelgriffith
Last active June 23, 2017 12:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joelgriffith/ea708da6dae991fc39b7441d6c8afb34 to your computer and use it in GitHub Desktop.
Save joelgriffith/ea708da6dae991fc39b7441d6c8afb34 to your computer and use it in GitHub Desktop.
apollo-client in your reducer tree as opposed to HOC
// External dependencies
import React from 'react';
import thunk from 'redux-thunk';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { routerReducer } from 'react-router-redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
// Setup router
const Router = () => (
<BrowserRouter basename={app.route}>
// Routers go here
</BrowserRouter>
);
// Setup reducer tree
const reducers = combineReducers({
// ... your reducers here ...
routing: routerReducer,
apollo: apolloClient.reducer(),
});
// Setup apollo-client
const apolloClient = new ApolloClient({
networkInterface: createNetworkInterface({
uri: `/my-graphql-server`,
opts: {
credentials: 'same-origin',
},
}),
});
// Setup your redux store
const store = createStore(
reducers,
compose(
applyMiddleware(thunk.withExtraArgument(apolloClient)),
window.devToolsExtension ? window.devToolsExtension() : (f) => f
)
);
// Render
render(
<Provider store={store}>
<Router />
</Provider>,
document.getElementById('react-root')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment