Last active
December 20, 2018 09:39
-
-
Save v-stickykeys/ef2fa8136dc522cf554555bd0a24eb99 to your computer and use it in GitHub Desktop.
Apollo Redux Super Fast
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
/* | |
3 Easy steps to get Apollo and Redux to play nicely super fast. | |
Configure the Apollo client | |
*/ | |
import { ApolloClient } from 'apollo-client'; | |
import { createHttpLink } from 'apollo-link-http' | |
import { InMemoryCache } from 'apollo-cache-inmemory'; | |
const HTTPLink = createHttpLink({ | |
uri: 'http://localhost:8000/graphql/', | |
credentials: 'include' | |
}); | |
const client = new ApolloClient({ | |
link: HTTPLink, | |
cache: new InMemoryCache() | |
}); | |
export default function apolloClient() { | |
return client | |
} |
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
/* | |
Add the Apollo provider if you want to use the HOC elsewhere | |
*/ | |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import AppRouter from './AppRouter'; | |
import * as serviceWorker from './serviceWorker'; | |
import { Provider } from 'react-redux'; | |
import configureStore from './store/configureStore'; | |
import { ApolloProvider } from 'react-apollo'; | |
import apolloClient from './graphql/apolloClient'; | |
const store = configureStore(); | |
const client = apolloClient(); | |
ReactDOM.render( | |
<ApolloProvider store={store.store} client={client}> | |
<Provider store={store.store} persistor={store.persistor}> | |
<AppRouter /> | |
</Provider> | |
</ApolloProvider>, | |
document.getElementById('root') | |
); | |
// If you want your app to work offline and load faster, you can change | |
// unregister() to register() below. Note this comes with some pitfalls. | |
// Learn more about service workers: http://bit.ly/CRA-PWA | |
serviceWorker.unregister(); |
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
/* | |
Use the client in your action creators. Requires thunk! | |
*/ | |
import * as actions from './actions.js'; | |
import apolloClient from '../../graphql/apolloClient'; | |
import QUERY from '../../graphql/queries'; // gql documents | |
const client = apolloClient(); | |
export function getData() { | |
return async dispatch => { | |
const result = await client.query({ | |
query: QUERY.WHOAMI | |
}); | |
dispatch(actions.setData(result.data.whoami)); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment