Updated dependencies and configs.

- Updated dependencies.
- Using a Next.js plugin for bundle analysis.
- Updated ESLint config.
- Removed npm from package engines.
- Using cross-fetch in place of isomorphic-unfetch.

api/package.json

@@ -2,19 +2,18 @@
   "name": "apollo-upload-examples-api",
   "private": true,
   "engines": {
-    "node": ">=8.6",
+    "node": ">=8.6"
-    "npm": ">=5.4"
   },
   "dependencies": {
-    "apollo-server-koa": "^1.3.2",
+    "apollo-server-koa": "^1.3.6",
     "apollo-upload-server": "^5.0.0",
     "dotenv": "^5.0.1",
-    "graphql": "^0.13.1",
+    "graphql": "^0.13.2",
-    "graphql-tools": "^2.21.0",
+    "graphql-tools": "^2.24.0",
     "kcors": "^2.2.1",
     "koa": "^2.5.0",
     "koa-bodyparser": "^4.2.0",
-    "koa-compress": "^2.0.0",
+    "koa-compress": "^3.0.0",
     "koa-router": "^7.4.0",
     "lowdb": "^1.0.0",
     "mkdirp": "^0.5.1",
@@ -22,26 +21,22 @@
     "shortid": "^2.2.8"
   },
   "devDependencies": {
-    "eslint": "^4.18.2",
+    "eslint": "^4.19.1",
-    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-prettier": "^2.6.0",
-    "nodemon": "^1.17.1",
+    "nodemon": "^1.17.3",
-    "prettier": "^1.11.1"
+    "prettier": "^1.12.1"
   },
   "scripts": {
-    "lint": "eslint . --ext mjs",
+    "lint": "eslint . --ext mjs --fix && prettier '**/*.{json,md}' --write",
-    "fix": "npm run lint -- --fix && prettier --write '**/*.md'",
     "dev": "nodemon --ext mjs",
-    "start": "node --experimental-modules --require dotenv/config server.mjs"
+    "start": "node --experimental-modules -r dotenv/config server.mjs"
   },
   "eslintConfig": {
     "parserOptions": {
       "sourceType": "module",
-      "ecmaVersion": 2017,
+      "ecmaVersion": 2018
-      "ecmaFeatures": {
-        "experimentalObjectRestSpread": true
-      }
     },
     "env": {
       "es6": true,
@@ -58,6 +53,11 @@
       "prettier"
     ],
     "rules": {
+      "require-await": "error",
+      "no-return-await": "error",
+      "arrow-body-style": "error",
+      "prefer-destructuring": "error",
+      "prefer-arrow-callback": "error",
       "curly": [
         "error",
         "multi"

api/readme.md

@@ -8,10 +8,10 @@ An example GraphQL API using:
 
 ## Setup
 
-1. Install the latest [Node.js](https://nodejs.org) and [npm](https://npmjs.com).
+1.  Install the latest [Node.js](https://nodejs.org) and [npm](https://npmjs.com).
-2. Duplicate `.env.example` as `.env` and configure.
+2.  Duplicate `.env.example` as `.env` and configure.
-3. Run `npm install` in the `api` directory with Terminal.
+3.  Run `npm install` in the `api` directory with Terminal.
-4. Run `npm run dev` for development, or `npm run start` for production.
+4.  Run `npm run dev` for development, or `npm run start` for production.
 
 Ensure your editor supports:
 

app/.env.example

@@ -1,4 +1,4 @@
-NODE_ENV=development
+NODE_ENV='development'
 PORT=3000
-API_URI=http://localhost:3001/graphql
+API_URI='http://localhost:3001/graphql'
-ANALYZE=false
+BUNDLE_ANALYZE=false

app/components/upload-file.js

@@ -3,7 +3,12 @@ import gql from 'graphql-tag'
 import uploadsQuery from '../queries/uploads'
 
 const UploadFile = ({ mutate }) => {
-  const handleChange = ({ target: { validity, files: [file] } }) =>
+  const handleChange = ({
+    target: {
+      validity,
+      files: [file]
+    }
+  }) =>
     validity.valid &&
     mutate({
       variables: { file },

app/next.config.js

@@ -1,11 +1,18 @@
 /* eslint-disable import/unambiguous */
 
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+const withBundleAnalyzer = require('@zeit/next-bundle-analyzer')
 
-module.exports = {
+module.exports = withBundleAnalyzer({
-  webpack: config => {
+  analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
-    if (process.env.ANALYZE === 'true')
+  analyzeBrowser: ['browser', 'both'].includes(process.env.BUNDLE_ANALYZE),
-      config.plugins.push(new BundleAnalyzerPlugin())
+  bundleAnalyzerConfig: {
-    return config
+    server: {
+      analyzerMode: 'static',
+      reportFilename: 'bundle-analysis-server.html'
+    },
+    browser: {
+      analyzerMode: 'static',
+      reportFilename: 'bundle-analysis-browser.html'
+    }
   }
-}
+})

app/package.json

@@ -2,59 +2,47 @@
   "name": "apollo-upload-examples-app",
   "private": true,
   "engines": {
-    "node": ">=8.6",
+    "node": ">=8.6"
-    "npm": ">=5.4"
   },
   "dependencies": {
-    "apollo-cache-inmemory": "^1.1.10",
+    "@zeit/next-bundle-analyzer": "^0.1.1",
-    "apollo-client": "^2.2.6",
+    "apollo-cache-inmemory": "^1.1.12",
-    "apollo-link": "^1.2.1",
+    "apollo-client": "^2.2.8",
+    "apollo-link": "^1.2.2",
     "apollo-upload-client": "^8.0.0",
     "babel-plugin-graphql-tag": "^1.5.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.3.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.0",
+    "cross-fetch": "^2.1.0",
     "dotenv-cli": "^1.4.0",
-    "graphql": "^0.13.1",
+    "graphql": "^0.13.2",
-    "graphql-tag": "^2.8.0",
+    "graphql-tag": "^2.9.1",
-    "isomorphic-unfetch": "^2.0.0",
+    "next": "^6.0.0-canary.6",
-    "next": "^5.0.0",
+    "react": "^16.3.2",
-    "react": "^16.2.0",
+    "react-apollo": "^2.1.3",
-    "react-apollo": "^2.0.4",
+    "react-display-name": "^0.2.4",
-    "react-display-name": "^0.2.3",
+    "react-dom": "^16.3.2"
-    "react-dom": "^16.2.0",
-    "webpack-bundle-analyzer": "^2.11.1"
   },
   "devDependencies": {
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.3",
-    "eslint": "^4.18.2",
+    "eslint": "^4.19.1",
-    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.7.0",
-    "prettier": "^1.11.1"
+    "prettier": "^1.12.1"
   },
   "scripts": {
-    "lint": "eslint .",
+    "lint": "eslint . --fix && prettier '**/*.{json,md}' --write",
-    "fix": "npm run lint -- --fix && prettier --write '**/*.md'",
     "dev": "dotenv next",
     "build": "dotenv next build",
     "start": "dotenv next start"
   },
-  "babel": {
-    "presets": [
-      "next/babel"
-    ],
-    "plugins": [
-      "transform-inline-environment-variables",
-      "graphql-tag"
-    ]
-  },
   "eslintConfig": {
     "parser": "babel-eslint",
     "parserOptions": {
       "sourceType": "module",
-      "ecmaVersion": 2017,
+      "ecmaVersion": 2018,
       "ecmaFeatures": {
-        "experimentalObjectRestSpread": true,
         "jsx": true
       }
     },
@@ -76,6 +64,11 @@
       "prettier"
     ],
     "rules": {
+      "require-await": "error",
+      "no-return-await": "error",
+      "arrow-body-style": "error",
+      "prefer-destructuring": "error",
+      "prefer-arrow-callback": "error",
       "curly": [
         "error",
         "multi"
@@ -90,5 +83,14 @@
     "proseWrap": "never",
     "singleQuote": true,
     "semi": false
+  },
+  "babel": {
+    "presets": [
+      "next/babel"
+    ],
+    "plugins": [
+      "transform-inline-environment-variables",
+      "graphql-tag"
+    ]
   }
 }

app/providers/with-data.js

@@ -1,4 +1,4 @@
-import 'isomorphic-unfetch'
+import 'cross-fetch/polyfill'
 import { Component } from 'react'
 import { ApolloClient } from 'apollo-client'
 import { InMemoryCache } from 'apollo-cache-inmemory'
@@ -93,7 +93,7 @@ export default ComposedComponent =>
         initialProps.initialState = apolloClient.cache.extract()
       }
 
-      // Return the final page component inital props
+      // Return the final page component initial props
       return initialProps
     }
 

app/readme.md

@@ -8,10 +8,10 @@ An example SSR web app using:
 
 ## Setup
 
-1. Install the latest [Node.js](https://nodejs.org) and [npm](https://npmjs.com).
+1.  Install the latest [Node.js](https://nodejs.org) and [npm](https://npmjs.com).
-2. Duplicate `.env.example` as `.env` and configure.
+2.  Duplicate `.env.example` as `.env` and configure.
-3. Run `npm install` in the `app` directory with Terminal.
+3.  Run `npm install` in the `app` directory with Terminal.
-4. Run `npm run dev` for development, or `npm run build && npm start` for production.
+4.  Run `npm run dev` for development, or `npm run build && npm start` for production.
 
 Ensure your editor supports: