Lint fixes.

app/components/multiple-uploader.js

@@ -1,26 +1,28 @@
-import {graphql, gql} from 'react-apollo'
+import { graphql, gql } from 'react-apollo'
 import uploadsQuery from '../queries/uploads'
 
-const MultipleUploader = ({mutate}) => {
+const MultipleUploader = ({ mutate }) => {
-  const handleChange = ({target}) => {
+  const handleChange = ({ target }) => {
     if (target.validity.valid) {
       mutate({
         variables: {
           files: target.files
         },
-        refetchQueries: [{
+        refetchQueries: [
-          query: uploadsQuery
+          {
-        }]
+            query: uploadsQuery
+          }
+        ]
       })
     }
   }
 
-  return <input type='file' multiple required onChange={handleChange} />
+  return <input type="file" multiple required onChange={handleChange} />
 }
 
 export default graphql(gql`
-  mutation multipleUpload ($files: [Upload!]!) {
+  mutation multipleUpload($files: [Upload!]!) {
-    multipleUpload (files: $files) {
+    multipleUpload(files: $files) {
       id
       name
       type

app/components/section.js

@@ -1,6 +1,8 @@
-export default ({heading, children}) => (
+const Section = ({ heading, children }) =>
   <section>
-    <h2>{heading}</h2>
+    <h2>
+      {heading}
+    </h2>
     {children}
     <style jsx>{`
       section {
@@ -8,4 +10,5 @@ export default ({heading, children}) => (
       }
     `}</style>
   </section>
-)
+
+export default Section

app/components/single-uploader.js

@@ -1,26 +1,28 @@
-import {graphql, gql} from 'react-apollo'
+import { graphql, gql } from 'react-apollo'
 import uploadsQuery from '../queries/uploads'
 
-const SingleUploader = ({mutate}) => {
+const SingleUploader = ({ mutate }) => {
-  const handleChange = ({target}) => {
+  const handleChange = ({ target }) => {
     if (target.validity.valid) {
       mutate({
         variables: {
           file: target.files[0]
         },
-        refetchQueries: [{
+        refetchQueries: [
-          query: uploadsQuery
+          {
-        }]
+            query: uploadsQuery
+          }
+        ]
       })
     }
   }
 
-  return <input type='file' required onChange={handleChange} />
+  return <input type="file" required onChange={handleChange} />
 }
 
 export default graphql(gql`
-  mutation singleUpload ($file: Upload!) {
+  mutation singleUpload($file: Upload!) {
-    singleUpload (file: $file) {
+    singleUpload(file: $file) {
       id
       name
       type

app/components/upload-list.js

@@ -1,7 +1,7 @@
-import {graphql} from 'react-apollo'
+import { graphql } from 'react-apollo'
 import uploadsQuery from '../queries/uploads'
 
-const UploadList = ({data: {uploads}}) => {
+const UploadList = ({ data: { uploads } }) => {
   return (
     <div>
       <table>
@@ -14,14 +14,22 @@ const UploadList = ({data: {uploads}}) => {
           </tr>
         </thead>
         <tbody>
-          {uploads.map(({id, name, type, size, path}) => (
+          {uploads.map(({ id, name, type, size, path }) =>
             <tr key={id}>
-              <td>{name}</td>
+              <td>
-              <td>{type}</td>
+                {name}
-              <td>{size}</td>
+              </td>
-              <td>{path}</td>
+              <td>
+                {type}
+              </td>
+              <td>
+                {size}
+              </td>
+              <td>
+                {path}
+              </td>
             </tr>
-          ))}
+          )}
         </tbody>
       </table>
       <style jsx>{`

app/helpers/with-data.js

@@ -1,16 +1,12 @@
 import 'isomorphic-fetch'
 import React from 'react'
-import {
+import { ApolloClient, ApolloProvider, getDataFromTree } from 'react-apollo'
-  ApolloClient,
+import { createNetworkInterface } from 'apollo-upload-client'
-  ApolloProvider,
-  getDataFromTree
-} from 'react-apollo'
-import {createNetworkInterface} from 'apollo-upload-client'
 
 const ssrMode = !process.browser
 let apolloClient = null
 
-function initClient (headers, initialState) {
+function initClient(headers, initialState) {
   return new ApolloClient({
     initialState,
     ssrMode,
@@ -20,15 +16,15 @@ function initClient (headers, initialState) {
   })
 }
 
-function getClient (headers, initialState = {}) {
+function getClient(headers, initialState = {}) {
   if (ssrMode) return initClient(headers, initialState)
   if (!apolloClient) apolloClient = initClient(headers, initialState)
   return apolloClient
 }
 
-export default Component => (
+export default Component =>
   class extends React.Component {
-    static async getInitialProps (ctx) {
+    static async getInitialProps(ctx) {
       const headers = ctx.req ? ctx.req.headers : {}
       const client = getClient(headers)
 
@@ -37,7 +33,9 @@ export default Component => (
           query: ctx.query,
           pathname: ctx.pathname
         },
-        ...await (Component.getInitialProps ? Component.getInitialProps(ctx) : {})
+        ...(await (Component.getInitialProps
+          ? Component.getInitialProps(ctx)
+          : {}))
       }
 
       if (ssrMode) {
@@ -60,12 +58,12 @@ export default Component => (
       }
     }
 
-    constructor (props) {
+    constructor(props) {
       super(props)
       this.client = getClient(this.props.headers, this.props.initialState)
     }
 
-    render () {
+    render() {
       return (
         <ApolloProvider client={this.client}>
           <Component {...this.props} />
@@ -73,4 +71,3 @@ export default Component => (
       )
     }
   }
-)

app/next.config.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/unambiguous */
+
 module.exports = {
   webpack: config => {
     // See https://github.com/webpack/webpack/issues/5135

app/package.json

@@ -12,10 +12,16 @@
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",
-    "standard": "^10.0.2"
+    "eslint": "^4.1.1",
+    "eslint-config-standard-jsx": "^4.0.2",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.1.0",
+    "eslint-plugin-prettier": "^2.1.2",
+    "eslint-plugin-react": "^7.1.0",
+    "prettier": "^1.5.2"
   },
   "scripts": {
-    "lint": "standard",
+    "lint": "eslint .",
     "dev": "zoo next",
     "build": "zoo next build",
     "start": "zoo next start"
@@ -32,10 +38,45 @@
       "transform-inline-environment-variables"
     ]
   },
-  "standard": {
+  "eslintConfig": {
     "parser": "babel-eslint",
-    "ignore": [
+    "parserOptions": {
-      ".next/**"
+      "sourceType": "module",
-    ]
+      "ecmaVersion": 2017,
+      "ecmaFeatures": {
+        "experimentalObjectRestSpread": true,
+        "jsx": true
+      }
+    },
+    "env": {
+      "es6": true,
+      "node": true,
+      "browser": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:import/recommended",
+      "plugin:node/recommended",
+      "plugin:react/recommended"
+    ],
+    "plugins": [
+      "import",
+      "node",
+      "react",
+      "prettier"
+    ],
+    "rules": {
+      "node/no-missing-require": "off",
+      "node/no-unsupported-features": "off",
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "prettier/prettier": [
+        "error",
+        {
+          "semi": false,
+          "singleQuote": true
+        }
+      ]
+    }
   }
 }

app/pages/index.js

@@ -5,30 +5,33 @@ import SingleUploader from '../components/single-uploader'
 import MultipleUploader from '../components/multiple-uploader'
 import UploadList from '../components/upload-list'
 
-export default withData(props => (
+const HomePage = () =>
   <div>
     <Head>
       <title>Apollo upload examples</title>
       <style>{`
-        html {
+      html {
-          font-family: sans-serif;
+        font-family: sans-serif;
-        }
+      }
-        body {
+      body {
-          margin: 2em;
+        margin: 2em;
-        }
+      }
-      `}</style>
+    `}</style>
     </Head>
     <h1>Apollo upload examples</h1>
-    <Section heading='Single file upload'>
+    <Section heading="Single file upload">
       <p>Select an file to upload and view the response in the console.</p>
       <SingleUploader />
     </Section>
-    <Section heading='Multiple file upload'>
+    <Section heading="Multiple file upload">
-      <p>Select multiple files to upload and view the response in the console.</p>
+      <p>
+        Select multiple files to upload and view the response in the console.
+      </p>
       <MultipleUploader />
     </Section>
-    <Section heading='Uploaded files'>
+    <Section heading="Uploaded files">
       <UploadList />
     </Section>
   </div>
-))
+
+export default withData(HomePage)

app/queries/uploads.js

@@ -1,4 +1,4 @@
-import {gql} from 'react-apollo'
+import { gql } from 'react-apollo'
 
 export default gql`
   query uploads {