What is the recommended way to pass Apollo Client around in a React app? - react-apollo

Question

Right now I am using the HOC withApollo like:
export default connect(mapStateToProps, mapDispatchToProps)(withApollo(withData(Browse)));
then in that component:
render() {
const { client } = this.props;
<Button onPress={() => searchInterestsTab(client)} />
then outside that component:
export const searchInterestsTab = (client) => {
^ but am finding this gets very messy having to pass it into every outside function from my component.
Couldn't I just use:
const apolloClient = new ApolloClient({...})
export default apolloClient;
then:
import apolloClient from './apolloClient';
everywhere?

Answer 1

It should be possible to use it with kind of:
import apolloClient from './apolloClient'
If you look at the usage documantation you see that you can use it. So somewhere most possible in your index.js you should already have
const apolloClient = new ApolloClient({...})
My apollo client is instantiated like this:
import ApolloClient, { addTypename } from 'apollo-client';
const createApolloClient = options => {
return new ApolloClient(Object.assign({}, {
queryTransformer: addTypename,
dataIdFromObject: (result) => {
if (result.id && result.__typename) {
return result.__typename + result.id;
}
return null;
},
}, options))
};
export default createApolloClient;
and in the index.js it is used like this:
...
const client = createApolloClient({
networkInterface: networkInterface,
initialState: window.__APOLLO_STATE__,
ssrForceFetchDelay: 100,
});
....
export {
client,
...
};