How to use the apollo-client.createBatchingNetworkInterface function in apollo-client

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router';
import { CodeSplitProvider, rehydrateState } from 'code-split-component';
import ReactHotLoader from 'universally/src/client/components/ReactHotLoader';
import DemoApp from '@app';
import { parse, stringify } from './query-string';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client';
import { createRenderer } from 'fela';
import { Provider } from 'react-fela';

// Get the DOM Element that will host our React application.
const container = document.querySelector('#app');

const networkInterface = createBatchingNetworkInterface({
  uri: process.env.GRAPHQL_URL || '/graphql',
  batchInterval: 5,
  opts: {
    credentials: 'same-origin',
  },
});

const client = new ApolloClient({
  networkInterface,
  dataIdFromObject: o => o.id,
  ssrForceFetchDelay: 100,
  initialState: window.__APP_STATE__ ? { apollo: { data: window.__APP_STATE__ } } : null,
});

const renderer = createRenderer();
const mountNode = document.getElementById('css-markup');

urls: ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'],
  },
});

const MOUNT_POINT = document.getElementById('app');
// Load the JWT if it exists.
// Get token will return null if it does not exist
const token = getToken();

// Does the user's browser support the HTML5 history API?
// If the user's browser doesn't support the HTML5 history API then we
// will force full page refreshes on each page change.
const supportsHistory = 'pushState' in window.history;

// Apollo network interface
const networkInterface = createBatchingNetworkInterface({
  opts: {
    credentials: 'include',
  },
  batchInterval: 10,
  uri: 'http://localhost:8080/api/v1/graphql',
});
networkInterface.use([
  {
    applyBatchMiddleware(req, next) {
      // If headers dont exist for some reason
      // create them.
      if (!req.options.headers) {
        req.options.headers = {};
      }

      // Add our auth token to the headers

const configureApolloClient = (
  apiUri: string,
  apiVersion: string,
  queryMap: Object,
  introspectionData: Object,
) => {
  const isProduction = __PRODUCTION__;
  const hasApiVersion = !!apiVersion;

  // Use xdebug in development.
  const requestUri = `${apiUri}?XDEBUG_SESSION_START=PHPSTORM`;

  // Use batched queries in production.
  const networkInterface = isProduction
    ? createBatchingNetworkInterface({
      uri: requestUri,
      batchInterval: 100,
    })
    : createNetworkInterface({
      uri: requestUri,
    });

  // Use persisted queries and GET requests in production.
  const finalNetworkInterface =
    isProduction && hasApiVersion
      ? addGetRequests(
          addPersistedQueries(apiVersion, queryMap, networkInterface),
        )
      : networkInterface;

  const apolloClient = new ApolloClient({

const configureApolloClient = (
  apiUri: string,
  apiVersion: string,
  queryMap: Object,
  introspectionData: Object,
) => {
  const isProduction = __PRODUCTION__ || true;
  const hasApiVersion = !!apiVersion;

  // Use xdebug in development.
  const requestUri = `${apiUri}?XDEBUG_SESSION_START=PHPSTORM`;

  // Use batched queries in production.
  const networkInterface = isProduction
    ? createBatchingNetworkInterface({
      uri: requestUri,
      batchInterval: 100,
    })
    : createNetworkInterface({
      uri: requestUri,
    });

  // Use persisted queries and GET requests in production.
  const finalNetworkInterface =
    isProduction && hasApiVersion
      ? addGetRequests(
          addPersistedQueries(apiVersion, queryMap, networkInterface),
        )
      : networkInterface;

  const apolloClient = new ApolloClient({

export default userConfig => {
  const config = { ...defaultConfig, ...userConfig };

  const { defaultHeadAttributes } = config;
  const AppContainer = getDefault(require('@@AppContainer'));
  // click helper required for Material-UI
  injectTapEventPlugin();

  // Does the user's browser support the HTML5 history API?
  // If the user's browser doesn't support the HTML5 history API then we
  // will force full page refreshes on each page change.
  const supportsHistory = 'pushState' in window.history;
  // Apollo network interface
  const networkInterface = createBatchingNetworkInterface({
    opts: {
      credentials: 'same-origin',
    },
    batchInterval: 20,
    uri: '/api/v1/graphql',
  });
  networkInterface.use([
    {
      applyBatchMiddleware(req, next) {
        // If headers dont exist for some reason
        // create them.
        if (!req.options.headers) {
          req.options.headers = {};
        }

        // Add our auth token to the headers

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

// const USE_QUERY_BATCHING = true;
const USE_QUERY_BATCHING = false;

const opts = {
  credentials: "include"
} as any;

const networkInterface = USE_QUERY_BATCHING
  ? createBatchingNetworkInterface({
      uri: process.env.GRAPHQL_ENDPOINT,
      opts,
      batchInterval: 10, // in milliseconds
      batchMax: 10
    })
  : createNetworkInterface({
      uri: process.env.GRAPHQL_ENDPOINT,
      opts
    });

const client = new ApolloClient({
  networkInterface
});

export default client;

async function ssrMiddleware(req: $Request, res: $Response) {
  if (typeof res.locals.nonce !== 'string') {
    throw new Error('A "nonce" value is missing from the response.');
  }

  global.navigator = { userAgent: req.headers['user-agent'] };
  const networkInterface = createBatchingNetworkInterface({
    uri: process.env.GRAPHQL_URL,
    opts: {
      credentials: 'same-origin',
      headers: req.headers,
    },
    batchInterval: 20,
  });
  const preloadedState = {};
  // Create a new server Apollo client for this request
  const client = createApolloClient(networkInterface);
  const history = createHistory();
  const store = configureStore(client, preloadedState, history);
  const sheet = new ServerStyleSheet();
  const { styleManager, theme } = createStyleManager();
  // Create context for React Router
  const routerContext = {};

import { ApolloClient } from 'react-apollo'
import { createBatchingNetworkInterface } from 'apollo-client'
import { Map, List, fromJS } from 'immutable'

const reduxRootSelector = (state) => state.get('apollo')
const networkInterface = createBatchingNetworkInterface({
  uri: '/admin/hub/graphql',
  batchInterval: 100,
  opts: {
    credentials: 'same-origin'
  }
})

const stripTypename = (obj) => {
  if (Map.isMap(obj)) {
    return obj.remove('__typename').map(stripTypename)
  } else if (List.isList(obj)) {
    return obj.map(stripTypename)
  } else {
    return obj
  }
}

import ApolloClient, { createBatchingNetworkInterface } from 'apollo-client'

const batchingNetworkInterface = createBatchingNetworkInterface({
  uri: '/graphql',
  batchInterval: 10,
  opts: {
    credentials: 'same-origin'
  }
})

const apolloClient = new ApolloClient({
  networkInterface: batchingNetworkInterface,
  queryDeduplication: true
})

export default apolloClient

const ws = require('ws')
const { ApolloClient, createBatchingNetworkInterface } = require('apollo-client')
const { SubscriptionClient, addGraphQLSubscriptions } = require('subscriptions-transport-ws')

const headers = {
  Authorization: [
    'Bearer',
    process.env.AUTH_TOKEN
  ].join(' ')
}

module.exports = new ApolloClient({
  queryDeduplication: true,
  networkInterface: addGraphQLSubscriptions(
    createBatchingNetworkInterface({
      uri: process.env.GRAPHQL_HTTP_ENDPOINT,
      opts: {
        headers
      }
    }),
    new SubscriptionClient(process.env.GRAPHQL_WS_ENDPOINT, {
      reconnect: true,
      timeout: 30000,
      connectionParams: headers
    }, ws)
  )
})