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