2.9.1

2.9.1 - 2017-10-17
-----------------------------------------------

## Config
* Adds `.addBeforeMiddleware()`, for adding Koa middleware that runs
before Apollo/Redux instantiation
* Adds `.disableTiming()` to optionally remove the `Response-Time`
header / timing middleware

## Server
* Renames `ctx.apollo` to `ctx.apollo.client`. Now, setting
`ctx.apollo.options` in before middleware will merge those settings
into Apollo client creation
* Adds logic to check for the presence of `ctx.apollo.client` and
`ctx.store` before using default Apollo/Redux init. This allows
overrides in before middleware for completely custom instantiation

Author: leebenson

CHANGELOG.md

@@ -1,3 +1,14 @@
+2.9.1 - 2017-10-17
+-----------------------------------------------
+
+## Config
+* Adds `.addBeforeMiddleware()`, for adding Koa middleware that runs before Apollo/Redux instantiation
+* Adds `.disableTiming()` to optionally remove the `Response-Time` header / timing middleware
+
+## Server
+* Renames `ctx.apollo` to `ctx.apollo.client`. Now, setting `ctx.apollo.options` in before middleware will merge those settings into Apollo client creation
+* Adds logic to check for the presence of `ctx.apollo.client` and `ctx.store` before using default Apollo/Redux init. This allows overrides in before middleware for completely custom instantiation
+
 2.9.0 - 2017-10-17
 -----------------------------------------------
 

kit/config.js

@@ -86,12 +86,19 @@ if (SERVER) {
       // Create a set for routes -- to retrieve based on insertion order
       this.routes = new Set();
 
+      // Custom middleware
+      this.beforeMiddleware = new Set();
+      this.middleware = new Set();
+
       // Koa application function. But default, this is null
       this.koaAppFunc = null;
 
       // Flag for setting whether plain HTTP should be disabled
       this.enableHTTP = true;
 
+      // Flag for enabling the `Response-Time` Koa middleware timer
+      this.enableTiming = true;
+
       // Flag for enabling Koa Helmet HTTP hardening. True, by default.
       this.enableKoaHelmet = true;
       this.koaHelmetOptions = null;
@@ -103,9 +110,6 @@ if (SERVER) {
       // in userland, this would instead hold an object of options
       this.sslOptions = null;
 
-      // Custom middleware -- again, based on insertion order
-      this.middleware = new Set();
-
       // GraphQL schema (if we're using an internal server)
       this.graphQLSchema = null;
 
@@ -153,6 +157,11 @@ if (SERVER) {
       this.enableHTTP = false;
     }
 
+    // Disable timing the request. This will remove the `Response-Time` header
+    disableTiming() {
+      this.enableTiming = false;
+    }
+
     // Disable the optional `koa-bodyparser`, to prevent POST data being sent to
     // each request.  By default, body parsing is enabled.
     disableBodyParser() {
@@ -192,7 +201,12 @@ if (SERVER) {
       this.errorHandler = func;
     }
 
-    // Add custom middleware.  This should be an async func, for use with Koa
+    // Add custom middleware.  This should be an async func, for use with Koa.
+    // There are two entry points - 'before' and 'after'
+    addBeforeMiddleware(middlewareFunc) {
+      this.beforeMiddleware.add(middlewareFunc);
+    }
+
     addMiddleware(middlewareFunc) {
       this.middleware.add(middlewareFunc);
     }

kit/entry/server.js

@@ -2,11 +2,7 @@
 
 // Server entry point, for Webpack.  This will spawn a Koa web server
 // and listen for HTTP requests.  Clients will get a return render of React
-// or the file they have requested
-//
-// Note:  No HTTP optimisation is performed here (gzip, http/2, etc).  Node.js
-// will nearly always be slower than Nginx or an equivalent, dedicated proxy,
-// so it's usually better to leave that stuff to a faster upstream provider
+// or the file they have requested.
 
 // ----------------------
 // IMPORTS
@@ -163,7 +159,7 @@ export function createReactHandler(css = [], scripts = [], chunkManifest = {}) {
     // store it in our empty `route` object
     const components = (
       <StaticRouter location={ctx.request.url} context={routeContext}>
-        <ApolloProvider store={ctx.store} client={ctx.apollo}>
+        <ApolloProvider store={ctx.store} client={ctx.apollo.client}>
           <App />
         </ApolloProvider>
       </StaticRouter>
@@ -269,37 +265,56 @@ const app = new Koa()
         ctx.body = 'There was an error. Please try again later.';
       }
     }
-  })
+  });
 
+if (config.enableTiming) {
   // It's useful to see how long a request takes to respond.  Add the
   // timing to a HTTP Response header
-  .use(async (ctx, next) => {
+  app.use(async (ctx, next) => {
     const start = ms.now();
     await next();
     const end = ms.parse(ms.since(start));
     const total = end.microseconds + (end.milliseconds * 1e3) + (end.seconds * 1e6);
     ctx.set('Response-Time', `${total / 1e3}ms`);
-  })
+  });
+}
 
-  // Create a new Apollo client and Redux store per request.  This will be
-  // stored on the `ctx` object, making it available for the React handler or
-  // any subsequent route/middleware
-  .use(async (ctx, next) => {
-    // Create a new server Apollo client for this request
-    ctx.apollo = createClient({
+// Middleware to set the per-request environment, including the Apollo client.
+// These can be overriden/added to in userland with `config.addBeforeMiddleware()`
+app.use(async (ctx, next) => {
+  ctx.apollo = {};
+  return next();
+});
+
+// Add 'before' middleware that needs to be invoked before the per-request
+// Apollo client and Redux store has instantiated
+config.beforeMiddleware.forEach(middlewareFunc => app.use(middlewareFunc));
+
+// Create a new Apollo client and Redux store per request.  This will be
+// stored on the `ctx` object, making it available for the React handler or
+// any subsequent route/middleware
+app.use(async (ctx, next) => {
+  // Create a new server Apollo client for this request, if we don't already
+  // have one
+  if (!ctx.apollo.client) {
+    ctx.apollo.client = createClient({
       ssrMode: true,
       // Create a network request.  If we're running an internal server, this
       // will be a function that accepts the request's context, to feed through
       // to the GraphQL schema
       networkInterface: createNeworkInterface(ctx),
+      ...ctx.apollo.options,
     });
+  }
 
-    // Create a new Redux store for this request
-    ctx.store = createNewStore(ctx.apollo);
+  // Create a new Redux store for this request, if we don't have one
+  if (!ctx.store) {
+    ctx.store = createNewStore(ctx.apollo.client);
+  }
 
-    // Pass to the next middleware in the chain: React, custom middleware, etc
-    return next();
-  });
+  // Pass to the next middleware in the chain: React, custom middleware, etc
+  return next();
+});
 
 /* FORCE SSL */
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "reactql-app",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "ReactQL starter kit app",
   "license": "UNLICENSED",
   "private": true,

package.json

@@ -182,9 +182,15 @@ if (SERVER) {
   // We can set custom middleware to be processed on the server.  This gives us
   // fine-grain control over headers, requests, responses etc, and even decide
   // if we want to avoid the React handler until certain conditions
+
+  // There are two flavours of middleware -- `before` middleware, which
+  // executes in Koa before the per-request Apollo client / Redux store has
+  // been instantiated... and can be called with `confiig.addBeforeMiddleware`
+
+  // ... and 'after' middleware, which runs after per-request instantiation.
+  // Let's use the latter to add a custom header so we can see middleware in action
   config.addMiddleware(async (ctx, next) => {
-    // Let's add a custom header so we can see middleware in action
-    ctx.set('Powered-By', ctx.engine); // <-- `ctx.engine` srt above!
+    ctx.set('Powered-By', ctx.engine); // <-- `ctx.engine` from `config.getKoaApp()` above!
 
     // For the fun of it, let's demonstrate that we can fire Redux actions
     // and it'll manipulate the state on the server side!  View the SSR version

src/app.js

@@ -48,11 +48,11 @@ import { Redirect } from 'kit/lib/routing';
 // Child React components. Note:  We can either export one main React component
 // per file, or in the case of <Home>, <Page> and <WhenFound>, we can group
 // multiple components per file where it makes sense to do so
-import GraphQLMessage from 'src/components/graphql';
-import { Home, Page, WhenNotFound } from 'src/components/routes';
-import ReduxCounter from 'src/components/redux';
-import Stats from 'src/components/stats';
-import Styles from 'src/components/styles';
+import GraphQLMessage from 'components/graphql';
+import { Home, Page, WhenNotFound } from 'components/routes';
+import ReduxCounter from 'components/redux';
+import Stats from 'components/stats';
+import Styles from 'components/styles';
 
 // Styles
 import css from './main.scss';