♻️ spaces

apollo/queries/articles/articles.js

@@ -7,6 +7,6 @@ const ARTICLES_QUERY = gql`
             title
         }
     }
-`;
+`
 
 export default ARTICLES_QUERY

components/Query/query.js

@@ -2,14 +2,16 @@ import { useQuery } from '@apollo/react-hooks'
 
 const Query = ({ children, query, id }) => {
   const { data, loading, error } = useQuery(query, {
-        variables: {id}
+    variables: { id }
   })
 
-    if (loading) return (
+  if (loading) {
+    return (
       <div className="uk-container">
         <p>loading...</p>
       </div>
     )
+  }
   if (error) return <p>Error: {JSON.stringify(error)}</p>
   return children({ data })
 }

lib/apollo.js

@@ -6,9 +6,9 @@ import fetch from 'isomorphic-unfetch'
 
 const GRAPHQL_URL = process.env.BACKEND_URL || 'http://localhost:3000/api/graphql'
 
-  let apolloClient = null
+let apolloClient = null
 
-  /**
+/**
    * Creates and provides the apolloContext
    * to a next.js PageTree. Use it by wrapping
    * your PageComponent via HOC pattern.
@@ -16,7 +16,7 @@ const GRAPHQL_URL = process.env.BACKEND_URL || 'http://localhost:3000/api/graphq
    * @param {Object} [config]
    * @param {Boolean} [config.ssr=true]
    */
-  export function withApollo (PageComponent, { ssr = true } = {}) {
+export function withApollo (PageComponent, { ssr = true } = {}) {
   const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => {
     const client = useMemo(
       () => apolloClient || initApolloClient(apolloState),
@@ -89,14 +89,14 @@ const GRAPHQL_URL = process.env.BACKEND_URL || 'http://localhost:3000/api/graphq
   }
 
   return WithApollo
-  }
+}
 
-  /**
+/**
    * Always creates a new apollo client on the server
    * Creates or reuses apollo client in the browser.
    * @param  {Object} initialState
    */
-  function initApolloClient (initialState) {
+function initApolloClient (initialState) {
   // Make sure to create a new client for every server-side request so that data
   // isn't shared between connections (which would be bad)
   if (typeof window === 'undefined') {
@@ -109,13 +109,13 @@ const GRAPHQL_URL = process.env.BACKEND_URL || 'http://localhost:3000/api/graphq
   }
 
   return apolloClient
-  }
+}
 
-  /**
+/**
    * Creates and configures the ApolloClient
    * @param  {Object} [initialState={}]
    */
-  function createApolloClient (initialState = {}) {
+function createApolloClient (initialState = {}) {
   // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient
   const isBrowser = typeof window !== 'undefined'
   return new ApolloClient({
@@ -129,4 +129,4 @@ const GRAPHQL_URL = process.env.BACKEND_URL || 'http://localhost:3000/api/graphq
     }),
     cache: new InMemoryCache().restore(initialState)
   })
-  }
+}

package.json

@@ -21,5 +21,15 @@
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "react": "16.13.0",
     "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "eslint": "^6.8.0",
+    "eslint-config-node": "^4.0.0",
+    "eslint-config-standard-jsx": "^8.1.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-standard": "^4.0.1"
   }
 }

pages/_app.js

@@ -1,5 +1,5 @@
 import '../assets/css/global.scss'
 
-export default function Application({ Component, pageProps }) {
+export default function Application ({ Component, pageProps }) {
   return <Component {...pageProps} />
 }

pages/_document.js

@@ -1,7 +1,7 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 class CustomDocument extends Document {
-    render() {
+  render () {
     return (
       <Html lang='en'>
         <Head />

pages/api/graphql.js

@@ -1,11 +1,11 @@
 import { gql, ApolloServer } from 'apollo-server-micro'
 
 const Articles = [
-    {id: 1, title: 'Article 1'},
-    {id: 2, title: 'Article 2'},
-    {id: 3, title: 'Article 3'},
-    {id: 4, title: 'Article 4'},
-    {id: 5, title: 'Article 5'}
+  { id: 1, title: 'Article 1' },
+  { id: 2, title: 'Article 2' },
+  { id: 3, title: 'Article 3' },
+  { id: 4, title: 'Article 4' },
+  { id: 5, title: 'Article 5' }
 ]
 
 const typeDefs = gql`
@@ -17,27 +17,16 @@ const typeDefs = gql`
         id: ID
         title: String
     }
-`;
+`
 
 const resolvers = {
   Query: {
     articles: (_parent, _args, _context) => Articles
   }
-};
-
-const apolloServer = new ApolloServer({
-    typeDefs,
-    resolvers
-});
-
-const handler = apolloServer.createHandler({
-    path: "/api/graphql"
-});
-
-export const config = {
-    api: {
-        bodyParser: false
-    }
 }
 
+const apolloServer = new ApolloServer({ typeDefs, resolvers })
+const handler = apolloServer.createHandler({ path: '/api/graphql' })
+
+export const config = { api: { bodyParser: false } }
 export default handler

pages/articles.js

@@ -1,9 +1,8 @@
 import Layout from '../components/Layout/Layout'
 import SEO from '../components/SEO/SEO'
 import Query from '../components/Query/query'
-import ARTICLES_QUERY from '../apollo/queries/articles/articles';
-import { withApollo } from '../lib/apollo';
-
+import ARTICLES_QUERY from '../apollo/queries/articles/articles'
+import { withApollo } from '../lib/apollo'
 
 const Articles = () => {
   return (
@@ -30,7 +29,6 @@ const Articles = () => {
       </Layout>
     </>
   )
-  
 }
 
 export default withApollo(Articles)