diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js index 4dee04f1e..821399488 100644 --- a/client/coral-embed-stream/src/index.js +++ b/client/coral-embed-stream/src/index.js @@ -6,13 +6,14 @@ import {checkLogin} from 'coral-framework/actions/auth'; import './graphql'; import {addExternalConfig} from 'coral-embed-stream/src/actions/config'; import {getStore, injectReducers} from 'coral-framework/services/store'; -import {client} from 'coral-framework/services/client'; +import {getClient} from 'coral-framework/services/client'; import AppRouter from './AppRouter'; import {pym} from 'coral-framework'; import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins'; import reducers from './reducers'; const store = getStore(); +const client = getClient(); loadPluginsTranslations(); injectPluginsReducers(); diff --git a/client/coral-framework/services/client.js b/client/coral-framework/services/client.js index fd906c75e..facb23d06 100644 --- a/client/coral-framework/services/client.js +++ b/client/coral-framework/services/client.js @@ -2,27 +2,34 @@ import ApolloClient, {addTypename} from 'apollo-client'; import {networkInterface} from './transport'; import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws'; -const wsClient = new SubscriptionClient(`ws://${location.host}/api/v1/live`, { - reconnect: true -}); +let client; -const networkInterfaceWithSubscriptions = addGraphQLSubscriptions( - networkInterface, - wsClient, -); +export function getClient() { + if (client) { + return client; + } -export const client = new ApolloClient({ - connectToDevTools: true, - addTypename: true, - queryTransformer: addTypename, - dataIdFromObject: (result) => { - if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle - return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle - } - return null; - }, - networkInterface: networkInterfaceWithSubscriptions, -}); + const wsClient = new SubscriptionClient(`ws://${location.host}/api/v1/live`, { + reconnect: true + }); -export default client; + const networkInterfaceWithSubscriptions = addGraphQLSubscriptions( + networkInterface, + wsClient, + ); + client = new ApolloClient({ + connectToDevTools: true, + addTypename: true, + queryTransformer: addTypename, + dataIdFromObject: (result) => { + if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle + return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle + } + return null; + }, + networkInterface: networkInterfaceWithSubscriptions, + }); + + return client; +} diff --git a/client/coral-framework/services/store.js b/client/coral-framework/services/store.js index 0530d8c28..4d6dafe20 100644 --- a/client/coral-framework/services/store.js +++ b/client/coral-framework/services/store.js @@ -1,28 +1,7 @@ import {createStore, combineReducers, applyMiddleware, compose} from 'redux'; import thunk from 'redux-thunk'; import mainReducer from '../reducers'; -import {client} from './client'; - -const apolloErrorReporter = () => (next) => (action) => { - if (action.type === 'APOLLO_QUERY_ERROR') { - console.error(action.error); - } - return next(action); -}; - -const middlewares = [ - applyMiddleware( - client.middleware(), - thunk, - apolloErrorReporter, - ), -]; - -if (window.devToolsExtension) { - - // we can't have the last argument of compose() be undefined - middlewares.push(window.devToolsExtension()); -} +import {getClient} from './client'; export function injectReducers(reducers) { const store = getStore(); @@ -35,9 +14,30 @@ export function getStore() { return window.coralStore; } + const apolloErrorReporter = () => (next) => (action) => { + if (action.type === 'APOLLO_QUERY_ERROR') { + console.error(action.error); + } + return next(action); + }; + + const middlewares = [ + applyMiddleware( + getClient().middleware(), + thunk, + apolloErrorReporter, + ), + ]; + + if (window.devToolsExtension) { + + // we can't have the last argument of compose() be undefined + middlewares.push(window.devToolsExtension()); + } + const coralReducers = { ...mainReducer, - apollo: client.reducer() + apollo: getClient().reducer() }; window.coralStore = createStore(