How to use the subscriptions-transport-ws.addGraphQLSubscriptions function in subscriptions-transport-ws

if (!req.options.headers) {
          req.options.headers = {}; // Create the header object if needed.
        }

        let authToken = resolveToken(token);
        if (authToken) {
          req.options.headers['authorization'] = `Bearer ${authToken}`;
        }
        // To debug queries add print(req.request.query) and import it from graphql/language/printer
        // console.log(print(req.request.query));
        next();
      },
    },
  ]);

  const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
    networkInterface,
    wsClient
  );

  const client = new ApolloClient({
    connectToDevTools: true,
    addTypename: true,
    fragmentMatcher: new IntrospectionFragmentMatcher({
      introspectionQueryResultData: introspectionData,
    }),
    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;

});

  if (!process.browser) {
    return networkInterface;
  }

  // Create WebSocket client
  const wsClient = new SubscriptionClient(`wss://subscriptions.graph.cool/v1/${GRAPHCOOL_PROJECT_ID}`, {
    reconnect: true,
    connectionParams: {
      // Pass any arguments you want for initialization
    },
  });

  // Extend the network interface with the WebSocket
  const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
    networkInterface,
    wsClient,
  );

  return networkInterfaceWithSubscriptions;
}

import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
import 'tachyons'
import './index.css'

// __SUBSCRIPTIONS_API_ENDPOINT__ looks similar to: `wss://subscriptions.graph.cool/v1/`
const wsClient = new SubscriptionClient('__SUBSCRIPTIONS_API_ENDPOINT_', {
  reconnect: true,
  timeout: 20000
})

// __SIMPLE_API_ENDPOINT__ looks similar to: `https://api.graph.cool/simple/v1/`
const networkInterface = createNetworkInterface({
  uri: '__SIMPLE_API_ENDPOINT__',
})

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
)

const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
  dataIdFromObject: o => o.id
})

ReactDOM.render((

const networkInterface = createNetworkInterface({uri: '/graphql'});
networkInterface.use([{
    applyMiddleware(req, next) {
        if (!req.options.headers) {
            req.options.headers = {};  // Create the header object if needed.
        }

        var token = localStorage.getItem('auth-token');
        if (token) {
            req.options.headers['Authorization'] = 'JWT '.concat(token);
        }
        next();
    }
}]);

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
    networkInterface,
    wsClient,
);

const client = createApolloClient({
    networkInterface: networkInterfaceWithSubscriptions,
    initialState: window.__APOLLO_STATE__,
    ssrForceFetchDelay: 100
});

let initialState = window.__INITIAL_STATE__;

let token = localStorage.getItem('auth-token');
if (token) {
    try {
        let user = jwtDecode(token);

import { ApolloProvider, ApolloClient, createNetworkInterface } from 'react-apollo';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';

// add your own project ID here (more info: https://github.com/react-native-training/apollo-subscriptions-book-club)
const projectId = '__YOUR_PROJECT_ID__'

const wsClient = new SubscriptionClient(`wss://subscriptions.graph.cool/v1/${projectId}`, {
  reconnect: true
});

const networkInterface = createNetworkInterface({
  uri: `https://api.graph.cool/simple/v1/${projectId}`
});

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
);

const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
});

import App from './app';

const ApolloApp = () => (
  
    
  
)

import App from './components/App'
import './index.css'
import ApolloClient, { createNetworkInterface } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
import { FREECOM_AUTH_TOKEN_KEY } from './constants'

// Create WebSocket client
const wsClient = new SubscriptionClient(`wss://subscriptions.graph.cool/v1/__PROJECT_ID__`, {
  reconnect: true,
})

const networkInterface = createNetworkInterface({ uri: 'https://api.graph.cool/simple/v1/__PROJECT_ID__' })

// Extend the network interface with the WebSocket
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
)

const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
  dataIdFromObject: o => o.id,
})

const freecom = {
  render,
  companyName: 'Graphcool',
  companyLogoURL: 'http://imgur.com/qPjLkW0.png',
  mainColor: 'rgba(39,175,96,1)'
}

import { ApolloProvider } from 'react-apollo';
import 'rxjs';
import { Button } from 'react-native-elements'
import gql from 'graphql-tag';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';
import ApolloClient, { createNetworkInterface } from 'apollo-client';

import store from './store';
import Router from './routes';
import { getToken } from './helpers';

const wsClient = new SubscriptionClient('ws://localhost:5000/subscriptions', { reconnect: true, });

const networkInterface = createNetworkInterface({ uri: 'http://localhost:3030/graphql' });

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient,
);

export const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
});

export default class AppContainer extends React.Component {
  render() {
    return (

})

networkInterface.use([{
  applyMiddleware(req, next) {
    if (localStorage.getItem('auth0IdToken')) {
      if (!req.options.headers) {
        req.options.headers = {}
      }
      req.options.headers.authorization =
        `Bearer ${localStorage.getItem('auth0IdToken')}`
    }
    next()
  },
}])

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
)

export const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
})

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import {
  SubscriptionClient,
  addGraphQLSubscriptions
} from 'subscriptions-transport-ws';

const wsClient = new SubscriptionClient('ws://localhost:8080/subscriptions');
const baseNetworkInterface = createNetworkInterface({
  uri: '/graphql',
});
const subscriptionNetworkInterface = addGraphQLSubscriptions(
  baseNetworkInterface,
  wsClient,
  );


export default new ApolloClient({
  networkInterface: subscriptionNetworkInterface,
  connectToDevTools: true,
});