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

if (_.some(response.errors, { message: 'Unauthorized' })) {
          isUnauthorized = true;
        }
      }
    });

    if (isUnauthorized) {
      store.dispatch(logout());
    }

    next();
  },
}]);

// Create WebSocket client
export const wsClient = new SubscriptionClient(`ws://${URL}/subscriptions`, {
  reconnect: true,
  connectionParams() {
    // get the authentication token from local storage if it exists
    return { jwt: store.getState().auth.jwt };
  },
  lazy: true,
});

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

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

const makeWsLink = function (uri, headers, query, errorCb) {
  return new WebSocketLink(new SubscriptionClient(
    uri,
    {
      reconnect: true,
      connectionParams: {
        headers,
      },
      connectionCallback: error => {
        if (error) {
          if (!errorCb) {
            console.error(error);
            return;
          }
          errorCb(
            error,
            'subscription',
            query

export default function getNetworkInterface (headers = {}) {
  return addGraphQLSubscriptions(
    new createNetworkInterface({ //eslint-disable-line
      uri: '/api/v1/graph/ql',
      opts: {
        credentials: 'same-origin',
        headers
      }
    }),
    new SubscriptionClient(websocketURL, {
      reconnect: true
    })
  )
}

import { ApolloClient, createNetworkInterface } from 'apollo-client';
import { addGraphQLSubscriptions, SubscriptionClient } from 'subscriptions-transport-ws';
import { environment } from '../../../environments/environment';
import { AuthorizationMiddleware } from '../../shared/services/authorization-middleware';

const networkInterface = createNetworkInterface({
  uri: environment.server + '/graphql'
});

networkInterface.use([new AuthorizationMiddleware()]);

const wsClient = new SubscriptionClient(environment.subscriptionServer + '/subscriptions', {
  reconnect: true,
  connectionParams: {}
});

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
);

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

export function getApolloClient(): ApolloClient {
  return apolloClient;
}

let apiLink = queryLink;
  if (apiUrl && (__TEST__ || typeof navigator !== 'undefined')) {
    const finalConnectionParams = {};
    if (connectionParams) {
      for (const connectionParam of connectionParams) {
        Object.assign(finalConnectionParams, (connectionParam as any)());
      }
    }

    const wsUri = apiUrl.replace(/^http/, 'ws');

    const globalVar = typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : {};
    const webSocketImpl = (globalVar as any).WebSocket || (globalVar as any).MozWebSocket;

    const wsClient = new SubscriptionClient(
      wsUri,
      {
        reconnect: true,
        connectionParams: finalConnectionParams
      },
      webSocketImpl
    );

    wsClient.use([
      {
        applyMiddleware(operationOptions, next) {
          Object.assign(operationOptions, finalConnectionParams);
          next();
        }
      }
    ]);

subscribe(query: GQL, variables?: object): Stream> {
    if (!this.subscriptionClient) {
      const url = new URL(this.url);
      this.subscriptionClient = new SubscriptionClient(`ws://${url.host}/subscriptions`, {reconnect: true, lazy: true});
    }

    return from(this.subscriptionClient!.request(
      {query: (isGQL(query)) ? query.loc.source.body : query, variables}
    )) as Stream>;
  }

constructor(...args) {
    super(...args);

    this._subscriptionClient = new SubscriptionClient(
      `ws://${global.location.host}/graphql`,
      { reconnect: true },
    );
  }

import TodoApp from './containers/Todo/TodoApp'
import RemoteTodoApp from './containers/RemoteTodo/RemoteTodoApp'
import PubSubTodoApp from './containers/PubSubTodo/PubSubTodoApp'
import AuthCallback from './containers/Signin/AuthCallback'
import NotFound from './components/NotFound'
import configureStore from './redux/store'
import createApolloClient from './apollo/create-apollo-client'
import getNetworkInterface from './apollo/transport'
import { signinResume, signout } from './ducks/auth'
import config from './config.json'

import './index.css'

const debugPubSub = createDebug('example:pubsub')

const wsClient = new SubscriptionClient(config.wsURL, {
  reconnect: true,
  connectionParams: {
    authToken: localStorage.getItem('accessToken'),
    reconnect: false
  }
})

const webClient = new WebClient()

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  getNetworkInterface(config.graphqlURL),
  wsClient
)

networkInterfaceWithSubscriptions.use([
  {

makeSubscriptionClient() {
    const client = new SubscriptionClient(this.wsUrl, {reconnect: true});
    SUB_EVENTS.map((e) => client.on(e, () => this.socketStatus = e));
    return client;
  }

import ApolloClient, { createNetworkInterface, IntrospectionFragmentMatcher } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';
import { API_URL, WS_API_URL } from '@config';
import Auth from '@services/auth';

const wsClient = new SubscriptionClient(WS_API_URL, {
  reconnect: true,
  lazy: true,
});

wsClient.use([{
  async applyMiddleware(req, next) {
    wsClient.connectionParams.authToken = await Auth.getToken();
    next();
  },
}]);

wsClient.connectionCallback = (err) => {
  if (err && err.message === 'Auth failed') {
    wsClient.close(false, false);
  }
};