Transport, Client, from coral-framework

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(
-    <ApolloProvider client={client} store={store}>
-      <Stream />
-    </ApolloProvider>
-
-    , document.querySelector('#coralStream'));
+  <ApolloProvider client={client} store={store}>
+    <Stream />
+  </ApolloProvider>
+  , document.querySelector('#coralStream')
+);

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()
+});

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)
+  )
 );

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;

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,
+    },
+  });
+}