Test and example updates.

- Test and example updates:
  - Use fake-tag for GraphQL template literals due to prettier/prettier#4360.
  - Use express instead of Koa packages.
  - Use express-graphql instead of Apollo packages.
- Example updates:
  - Stop using esm due to graphql/express-graphql#425.
  - Enabled GraphiQL and added a link to it on the homepage.

.babelrc.js

@@ -1,4 +1,6 @@
-const { engines: { node } } = require('./package.json')
+const {
+  engines: { node }
+} = require('./package.json')
 
 module.exports = {
   comments: false,

changelog.md

@@ -6,6 +6,13 @@
 * Pinned `@babel` dev dependencies to match new AVA requirements.
 * Capitalized the fetch options `Accept` header for display consistency in tools such as the Chrome network inspector and to better support case-sensitive systems, even though HTTP headers are supposed to be case-insensitive.
 * Readme example link goes to the example project directory instead of the readme file.
+* Test and example updates:
+  * Use [`fake-tag`](https://npm.im/fake-tag) for GraphQL template literals due to [prettier/prettier#4360](https://github.com/prettier/prettier/issues/4360).
+  * Use [`express`](https://npm.im/express) instead of Koa packages.
+  * Use [`express-graphql`](https://npm.im/express-graphql) instead of Apollo packages.
+* Example updates:
+  * Stop using [`esm`](https://npm.im/esm) due to [graphql/express-graphql#425](https://github.com/graphql/express-graphql/issues/425).
+  * Enabled GraphiQL and added a link to it on the homepage.
 
 ## 1.0.0-alpha.5
 

example/components/create-timer.js

@@ -1,20 +1,19 @@
 import { Query } from 'graphql-react'
+import gql from 'fake-tag'
 import Loader from './loader'
 import { timeFetchOptionsOverride } from '../api-fetch-options'
 
 const CreateTimer = () => (
   <Query
     resetOnLoad
     fetchOptionsOverride={timeFetchOptionsOverride}
-    query={
-      /* GraphQL */ `
-        mutation createTimer {
-          createTimer {
-            id
-          }
+    query={gql`
+      mutation createTimer {
+        createTimer {
+          id
         }
-      `
-    }
+      }
+    `}
   >
     {({ loading, data, load }) => (
       <section>

example/components/example-graphql-error.js

@@ -1,4 +1,5 @@
 import { Query } from 'graphql-react'
+import gql from 'fake-tag'
 import { timeFetchOptionsOverride } from '../api-fetch-options'
 import Loader from './loader'
 import FetchError from './fetch-error'
@@ -11,13 +12,11 @@ const ExampleGraphQLError = () => (
     loadOnMount
     loadOnReset
     fetchOptionsOverride={timeFetchOptionsOverride}
-    query={
-      /* GraphQL */ `
-        {
-          exampleError
-        }
-      `
-    }
+    query={gql`
+      {
+        exampleError
+      }
+    `}
   >
     {({ loading, fetchError, httpError, parseError, graphQLErrors }) => (
       <article>

example/components/pokemon.js

@@ -1,4 +1,5 @@
 import { Query } from 'graphql-react'
+import gql from 'fake-tag'
 import { pokemonFetchOptionsOverride } from '../api-fetch-options'
 import Loader from './loader'
 import FetchError from './fetch-error'
@@ -12,17 +13,15 @@ const Pokemon = ({ name }) => (
     loadOnReset
     variables={{ name }}
     fetchOptionsOverride={pokemonFetchOptionsOverride}
-    query={
-      /* GraphQL */ `
-        query pokemon($name: String!) {
-          pokemon(name: $name) {
-            number
-            classification
-            image
-          }
+    query={gql`
+      query pokemon($name: String!) {
+        pokemon(name: $name) {
+          number
+          classification
+          image
         }
-      `
-    }
+      }
+    `}
   >
     {({ loading, fetchError, httpError, parseError, graphQLErrors, data }) => (
       <article>

example/components/timers.js

@@ -1,4 +1,5 @@
 import { Query } from 'graphql-react'
+import gql from 'fake-tag'
 import { timeFetchOptionsOverride } from '../api-fetch-options'
 import Loader from './loader'
 import FetchError from './fetch-error'
@@ -10,16 +11,14 @@ const Timer = ({ id, milliseconds }) => (
   <Query
     fetchOptionsOverride={timeFetchOptionsOverride}
     variables={{ id }}
-    query={
-      /* GraphQL */ `
-        query timer($id: ID!) {
-          timer(timerId: $id) {
-            id
-            milliseconds
-          }
+    query={gql`
+      query timer($id: ID!) {
+        timer(timerId: $id) {
+          id
+          milliseconds
         }
-      `
-    }
+      }
+    `}
   >
     {({
       load,
@@ -53,16 +52,14 @@ const Timers = () => (
     loadOnMount
     loadOnReset
     fetchOptionsOverride={timeFetchOptionsOverride}
-    query={
-      /* GraphQL */ `
-        {
-          timers {
-            id
-            milliseconds
-          }
+    query={gql`
+      {
+        timers {
+          id
+          milliseconds
         }
-      `
-    }
+      }
+    `}
   >
     {({ loading, fetchError, httpError, parseError, graphQLErrors, data }) => (
       <section>

example/package.json

@@ -2,17 +2,14 @@
   "name": "graphql-react-example",
   "private": true,
   "dependencies": {
-    "apollo-server-koa": "^1.3.6",
     "babel-plugin-transform-inline-environment-variables": "^0.4.0",
     "cross-fetch": "^2.1.1",
     "dotenv-cli": "^1.4.0",
-    "esm": "^3.0.28",
+    "express": "^4.16.3",
+    "express-graphql": "^0.6.12",
+    "fake-tag": "^1.0.0",
     "graphql": "^0.13.2",
     "graphql-react": "^1.0.0-alpha.5",
-    "graphql-tools": "^3.0.0",
-    "koa": "^2.5.1",
-    "koa-bodyparser": "^4.2.0",
-    "koa-router": "^7.4.0",
     "next": "^6.0.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2"
@@ -22,7 +19,7 @@
   },
   "scripts": {
     "build": "dotenv next build",
-    "start": "dotenv node -- -r esm server",
+    "start": "dotenv node server",
     "deploy": "now"
   },
   "babel": {

example/pages/index.js

@@ -24,11 +24,16 @@ export default provider(
         <a href="https://github.com/jaydenseric/graphql-react">graphql-react</a>{' '}
         npm package.
       </p>
-      <p>
-        <a href="https://github.com/jaydenseric/graphql-react/tree/master/example">
-          See the source code on Github
-        </a>.
-      </p>
+      <ul>
+        <li>
+          <a href="/graphql">Explore the API with GraphiQL.</a>
+        </li>
+        <li>
+          <a href="https://github.com/jaydenseric/graphql-react/tree/master/example">
+            See the source code on Github.
+          </a>
+        </li>
+      </ul>
     </header>
     <section>
       <h2>Mutations</h2>

example/server.js

@@ -0,0 +1,65 @@
+const express = require('express')
+const graphqlHTTP = require('express-graphql')
+const { buildSchema } = require('graphql')
+const gql = require('fake-tag')
+const next = require('next')
+
+const schema = buildSchema(gql`
+  type Query {
+    timer(timerId: ID!): Timer!
+    timers: [Timer]!
+    exampleError: Boolean
+  }
+
+  type Mutation {
+    createTimer: Timer!
+  }
+
+  type Timer {
+    id: ID!
+    milliseconds: Int!
+  }
+`)
+
+const timers = {}
+
+class Timer {
+  constructor() {
+    this.startDate = new Date()
+    this.id = this.startDate.getTime()
+  }
+
+  milliseconds() {
+    return new Date() - this.startDate
+  }
+}
+
+const rootValue = {
+  createTimer() {
+    const timer = new Timer()
+    return (timers[timer.id] = timer)
+  },
+  timer: ({ timerId }) => timers[timerId],
+  timers: () => Object.values(timers),
+  exampleError() {
+    throw new Error(
+      'This example error was thrown in the “exampleError” query resolver.'
+    )
+  }
+}
+
+const nextApp = next({ dev: process.env.NODE_ENV === 'development' })
+const nextRequestHandler = nextApp.getRequestHandler()
+
+nextApp.prepare().then(() =>
+  express()
+    .use('/graphql', graphqlHTTP({ schema, rootValue, graphiql: true }))
+    .get('*', nextRequestHandler)
+    .listen(process.env.PORT, error => {
+      if (error) throw error
+      // eslint-disable-next-line no-console
+      console.info(
+        `Serving localhost:${process.env.PORT} for ${process.env.NODE_ENV}.`
+      )
+    })
+)

package.json

@@ -50,8 +50,6 @@
     "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.44",
     "@babel/preset-env": "7.0.0-beta.44",
     "@babel/preset-react": "7.0.0-beta.44",
-    "apollo-server-koa": "^1.3.6",
-    "apollo-upload-server": "^5.0.0",
     "ava": "^1.0.0-beta.4",
     "babel-eslint": "^8.2.3",
     "babel-plugin-transform-replace-object-assign": "^2.0.0-beta.0",
@@ -62,13 +60,12 @@
     "eslint-plugin-ava": "^4.5.1",
     "eslint-plugin-prettier": "^2.5.0",
     "eslint-plugin-react": "^7.7.0",
+    "express": "^4.16.3",
+    "express-graphql": "^0.6.12",
+    "fake-tag": "^1.0.0",
     "get-port": "^3.2.0",
     "graphql": "^0.13.2",
-    "graphql-tools": "^3.0.0",
     "husky": "^0.14.3",
-    "koa": "^2.5.1",
-    "koa-bodyparser": "^4.2.0",
-    "koa-router": "^7.4.0",
     "lint-staged": "^7.0.5",
     "npm-run-all": "^4.1.2",
     "prettier": "^1.12.1",

src/preload.mjs

@@ -101,9 +101,9 @@ export function preload(element) {
               )
             )
           else recurse(instance.render(), legacyContext)
-        } else
-          // The element is a functional component…
-          recurse(element.type(props), legacyContext)
+        }
+        // The element is a functional component…
+        else recurse(element.type(props), legacyContext)
       } else if (
         // The element is a context provider or DOM element and…
         element.props &&