Setup query batching.

app/helpers/init-apollo-client.js

@@ -1,7 +1,7 @@
-import { ApolloClient } from 'react-apollo'
-import { createApolloFetchUpload } from 'apollo-fetch-upload'
-import { print } from 'graphql/language/printer'
 import 'isomorphic-fetch'
+import { ApolloClient } from 'react-apollo'
+import BatchHttpLink from 'apollo-link-batch-http'
+import { createApolloFetchUpload } from 'apollo-fetch-upload'
 
 // Used in the browser to share a single Apollo Client instance between
 // decorated components.
@@ -12,19 +12,16 @@ let apolloClient = null
  * @param {Object} [initialState] - Apollo client Redux store initial state.
  * @returns {Object} Apollo Client instance.
  */
-function createApolloClient(initialState) {
-  const apolloFetchUpload = createApolloFetchUpload({
-    uri: process.env.API_URI
-  })
-
-  return new ApolloClient({
+const createApolloClient = initialState =>
+  new ApolloClient({
     initialState,
     ssrMode: !process.browser,
-    networkInterface: {
-      query: req => apolloFetchUpload({ ...req, query: print(req.query) })
-    }
+    networkInterface: new BatchHttpLink({
+      fetch: createApolloFetchUpload({
+        uri: process.env.API_URI
+      })
+    })
   })
-}
 
 /**
  * Gets or creates the Apollo Client instance.

app/package-lock.json

@@ -132,6 +132,14 @@
         "whatwg-fetch": "2.0.3"
       }
     },
+    "apollo-fetch": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/apollo-fetch/-/apollo-fetch-0.6.0.tgz",
+      "integrity": "sha1-qumyjBF680SwkeyLpNGlqgR03F0=",
+      "requires": {
+        "isomorphic-fetch": "2.2.1"
+      }
+    },
     "apollo-fetch-upload": {
       "version": "1.0.0",
       "requires": {
@@ -3627,6 +3635,27 @@
         }
       }
     },
+    "apollo-link-batch": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/apollo-link-batch/-/apollo-link-batch-0.1.0.tgz",
+      "integrity": "sha1-fG7zK4wW720qn1EHkcoidkIoNJ0=",
+      "requires": {
+        "apollo-fetch": "0.6.0",
+        "apollo-link-core": "0.5.0",
+        "graphql": "0.10.5"
+      }
+    },
+    "apollo-link-batch-http": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/apollo-link-batch-http/-/apollo-link-batch-http-0.1.0.tgz",
+      "integrity": "sha1-c8M0V2R/AjDtR9zPMzJ98bun/DY=",
+      "requires": {
+        "apollo-fetch": "0.6.0",
+        "apollo-link-batch": "0.1.0",
+        "apollo-link-core": "0.5.0",
+        "graphql": "0.10.5"
+      }
+    },
     "apollo-link-core": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/apollo-link-core/-/apollo-link-core-0.5.0.tgz",

app/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "dependencies": {
     "apollo-fetch-upload": "^1.0.0",
+    "apollo-link-batch-http": "^0.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.1.1",
-    "graphql": "^0.10.5",
     "next": "^3.0.3",
     "react": "^15.6.1",
     "react-apollo": "^1.4.11",