Feature: Allow switching between batched and non-batched transport based on request

Based on this conversation: https://apollographql.slack.com/archives/C11QBB84R/p1495471281173263

It would be great to have a new NetworkInterface type that uses a batch transport by default but allows you to force a single request if you don’t want it to batch. This is useful since it’s possible for automatic batching to hold up an entire page because fast important queries are batched with slow unimportant ones, which end up blocking all requests on the slowest query

A possible implementation / design would be a new HTTPHybridNetworkInterface (or a better name if people have one) that would wrap a HTTPFetchNetworkInterface and a HTTPBatchNetworkInterface and route requests to one or the other based on a property of the request

[gauravmk]

https://github.com/apollographql/core-docs/pull/300 there you go

[gauravmk]

Yep, that’s exactly what I ended up doing and it works for us.

For other folks who want to do something similar, we’re basically doing this:

/* @flow */
import {
  createBatchingNetworkInterface,
  createNetworkInterface,
  HTTPBatchedNetworkInterface,
  HTTPFetchNetworkInterface,
  Request,
} from 'apollo-client';

export class HTTPHybridNetworkInterface {
  batchedInterface: HTTPBatchedNetworkInterface;
  networkInterface: HTTPFetchNetworkInterface;

  constructor(opts: Object) {
    this.batchedInterface = createBatchingNetworkInterface(opts);
    this.networkInterface = createNetworkInterface(opts);
  }

  query(request: Request) {
    if (request.variables && request.variables.__disableBatch) {
      return this.networkInterface.query(request);
    } else {
      return this.batchedInterface.query(request);
    }
  }

  use(middlewares: Array<*>) {
    this.networkInterface.use(middlewares);
    this.batchedInterface.use(middlewares);
    return this;
  }

  useAfter(afterwares: Array<*>) {
    this.networkInterface.useAfter(afterwares);
    this.batchedInterface.useAfter(afterwares);
    return this;
  }
}

export function createHybridNetworkInterface(opts: Object) {
  return new HTTPHybridNetworkInterface(opts);
}