Last active
June 23, 2017 12:25
-
-
Save joelgriffith/ea708da6dae991fc39b7441d6c8afb34 to your computer and use it in GitHub Desktop.
apollo-client in your reducer tree as opposed to HOC
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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