diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js
index 1a3ca29f1..67b4bad29 100644
--- a/client/coral-embed-stream/src/index.js
+++ b/client/coral-embed-stream/src/index.js
@@ -1,33 +1,15 @@
import React from 'react';
import {render} from 'react-dom';
-import ApolloClient, {createNetworkInterface} from 'apollo-client';
import {ApolloProvider} from 'react-apollo';
-import thunk from 'redux-thunk';
-import {createStore, applyMiddleware, compose} from 'redux';
+
+import {client} from 'coral-framework/client';
+import store from 'coral-framework/store';
import Stream from './CommentStream';
-const client = new ApolloClient({
- networkInterface: createNetworkInterface({
- uri: '/api/v1/graph/ql',
- opts: {
- credentials: 'same-origin'
- }
- })
-});
-
-const store = createStore(
- client.reducer(),
- {}, // initial state
- compose(
- applyMiddleware(thunk),
- window.devToolsExtension ? window.devToolsExtension() : f => f,
- )
-);
-
render(
-
-
-
-
- , document.querySelector('#coralStream'));
+
+
+
+ , document.querySelector('#coralStream')
+);
diff --git a/client/coral-framework/client.js b/client/coral-framework/client.js
new file mode 100644
index 000000000..abd193b52
--- /dev/null
+++ b/client/coral-framework/client.js
@@ -0,0 +1,7 @@
+import ApolloClient, {addTypename} from 'apollo-client';
+import getNetworkInterface from './transport';
+
+export const client = new ApolloClient({
+ queryTransformer: addTypename,
+ networkInterface: getNetworkInterface()
+});
diff --git a/client/coral-framework/store.js b/client/coral-framework/store.js
index 8c3f9edc1..cad05505c 100644
--- a/client/coral-framework/store.js
+++ b/client/coral-framework/store.js
@@ -1,9 +1,13 @@
-import {createStore, applyMiddleware} from 'redux';
+import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import mainReducer from './reducers';
+import {client} from './client';
export default createStore(
+ client.reducer(),
mainReducer,
- window.devToolsExtension && window.devToolsExtension(),
- applyMiddleware(thunk)
+ compose(
+ window.devToolsExtension && window.devToolsExtension(),
+ applyMiddleware(thunk)
+ )
);
diff --git a/client/coral-framework/subscriptions.js b/client/coral-framework/subscriptions.js
new file mode 100644
index 000000000..f514ea18b
--- /dev/null
+++ b/client/coral-framework/subscriptions.js
@@ -0,0 +1,14 @@
+import {print} from 'graphql-tag/printer';
+
+// quick way to add the subscribe and unsubscribe functions to the network interface
+const addGraphQLSubscriptions = (networkInterface, wsClient) => Object.assign(networkInterface, {
+ subscribe: (request, handler) => wsClient.subscribe({
+ query: print(request.query),
+ variables: request.variables,
+ }, handler),
+ unsubscribe: (id) => {
+ wsClient.unsubscribe(id);
+ },
+});
+
+export default addGraphQLSubscriptions;
diff --git a/client/coral-framework/transport.js b/client/coral-framework/transport.js
new file mode 100644
index 000000000..2bd6ac636
--- /dev/null
+++ b/client/coral-framework/transport.js
@@ -0,0 +1,11 @@
+import {createNetworkInterface} from 'apollo-client';
+
+export default function getNetworkInterface(apiUrl = '/api/v1/graph/ql', headers = {}) {
+ return new createNetworkInterface({
+ uri: apiUrl,
+ opts: {
+ credentials: 'same-origin',
+ headers,
+ },
+ });
+}