How to use the react-apollo.createNetworkInterface function in react-apollo

import { ApolloClient, createNetworkInterface, } from "react-apollo";

// ------------------------------

const networkInterface = createNetworkInterface({
	uri: "https://graphql.cosmicjs.com/v1",
});

networkInterface.use([
	{
		applyMiddleware(req, next) {
			console.log({ req, });

			next();
		},
	},
]);

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

export default function initApollo(headers, initialState = {}) {
  // Make sure to create a new client for every server-side request so that data
  // isn't shared between connections (which would be bad)
  if (!process.browser) {
    return create(headers, initialState);
  }

  // Reuse client on the client-side
  if (!apolloClient) {
    const wsClient = new SubscriptionClient(subscriptionUri, {
      reconnect: true
    });
    const networkInterface = createNetworkInterface({
      uri
    });

    networkInterface.use([{
      applyMiddleware(req, next) {
        if (!req.options.headers) {
          req.options.headers = {};
        }
        console.log('middleware called! 2');
        // if (apolloClient) {
        //   req.options.headers['x-token'] = localStorage.getItem('token');
        //   req.options.headers['x-refresh-token'] = localStorage.getItem('refreshToken');
        // }

        next();
      }

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import CreatePost from './components/CreatePost'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import 'tachyons'
import { ApolloClient, ApolloProvider, createNetworkInterface } from 'react-apollo'


const networkInterface = createNetworkInterface({ uri: '__SIMPLE_API_ENDPOINT__' })

networkInterface.use([{
  applyMiddleware (req, next) {
    if (!req.options.headers) {
      req.options.headers = {}
    }

    // get the authentication token from local storage if it exists
    if (localStorage.getItem('graphcoolToken')) {
      req.options.headers.authorization = `Bearer ${localStorage.getItem('graphcoolToken')}`
    }
    next()
  },
}])

const client = new ApolloClient({ networkInterface })

function getNetworkInterface() {
  const networkInterface = createNetworkInterface({
    uri: `https://api.graph.cool/simple/v1/${GRAPHCOOL_PROJECT_ID}`,
    opts: {
      credentials: 'same-origin',
      // Pass headers here if your graphql server requires them
    },
  });

  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

function _initClient(headers, initialState) {
  const networkInterface = createNetworkInterface({
    uri: 'http://localhost:4000/graphql',
    opts: {
      credentials: 'same-origin'
      // Pass headers here if your graphql server requires them
    }
  });

  networkInterface.use([{
    applyMiddleware(req, next) {
      if (!req.options.headers) {
        req.options.headers = {};  // Create the header object if needed.
      }
      // get the authentication token from local storage if it exists
      req.options.headers.authorization = cookie.load('token') || null;
      next();
    }

import 'antd/dist/antd.css';
import 'font-awesome/css/font-awesome.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Journal from './pages/journal/Journal';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { ApolloProvider, ApolloClient, createNetworkInterface } from 'react-apollo';
const networkInterface = createNetworkInterface({
    uri: 'http://localhost:4000/graphql'
});
const client = new ApolloClient({ networkInterface });
ReactDOM.render(React.createElement(ApolloProvider, { client: client },
    React.createElement(Router, null,
        React.createElement("div", null,
            React.createElement(Route, { exact: true, path: "/", render: () => React.createElement("div", null, "welcome") }),
            React.createElement(Route, { exact: true, path: "/journal/:journalId", render: ({ match }) => React.createElement(Journal, { id: match.params.journalId, section: 'reviewers' }) }),
            React.createElement(Route, { exact: true, path: "/journal/:journalId/accepted", render: ({ match }) => React.createElement(Journal, { id: match.params.journalId, section: 'accepted' }) })))), document.getElementById('root'));

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import {
  ApolloClient,
  createNetworkInterface,
  ApolloProvider,
} from 'react-apollo';
import App from './App';
import './index.css';

const client = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: '/graphql',
  }),
});

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

import * as React from 'react';
import { ApolloClient, ApolloProvider, createNetworkInterface } from 'react-apollo';
import { makeExecutableSchema } from 'graphql-tools';
import { typeDefs } from '../typeDefs';
import { ApplicationInsightsQueryTester } from '../components/ApplicationInsightsQueryTester';

makeExecutableSchema({ typeDefs });

const networkInterface = createNetworkInterface({ uri: 'http://localhost:4000/apollo' });
const client = new ApolloClient({ networkInterface: networkInterface });

class Dashboard extends React.Component {
  render() {
    return (
      
        <div>
          
        </div>
      
    );
  }
}

export default Dashboard;

import {
  ApolloProvider,
  createNetworkInterface,
  ApolloClient,
} from 'react-apollo';
import {
  SubscriptionClient,
  addGraphQLSubscriptions,
} from 'subscriptions-transport-ws';
import { AppLoading } from 'expo';
import { getUser, loadUserAsync } from 'react-native-authentication-helpers';

import HackerNews from './components/HackerNews';
import Graphcool from './constants/Graphcool';

const networkInterface = createNetworkInterface({
  uri: Graphcool.simpleEndpoint,
});

networkInterface.use([
  {
    applyMiddleware(req, next) {
      if (!req.options.headers) {
        req.options.headers = {};
      }
      const user = getUser();
      req.options.headers.authorization = user ? `Bearer ${user.token}` : null;
      next();
    },
  },
]);