loader

frontend/components/nav.js

@@ -5,7 +5,6 @@ import { withApollo } from "../utils/apollo";
 
 const Nav = () => {  
   return (
-    <div>
       <Query query={CATEGORIES_QUERY} id={null}>
         {({ data: { categories } }) => {
           return (
@@ -39,8 +38,7 @@ const Nav = () => {
           );
         }}
       </Query>
-    </div>
   );
 };
 
-export default Nav;  
+export default Nav 

frontend/components/query.js

@@ -5,7 +5,11 @@ const Query = ({ children, query, id }) => {
         variables: {id}
     })
 
-    if (loading) return <p>loading...</p>
+    if (loading) return (
+        <div className="uk-container">
+            <p>loading...</p>
+        </div>    
+    )
     if (error) return <p>Error: {JSON.stringify(error)}</p>
     return children({ data })
 }

frontend/next.config.js

@@ -4,5 +4,8 @@ const withCSS = require('@zeit/next-css')
 module.exports = withCSS({
     env: {
         API_URL: process.env.API_URL
+    },
+    devIndicators: {
+        autoPrerender: false,
     }
 })

frontend/pages/articles/[id].js

@@ -11,10 +11,11 @@ const Article = () => {
   const router = useRouter();
 
   return (
+    <Layout titlePage={`Article id: ${router.query.id}`}>
       <Query query={ARTICLE_QUERY} id={router.query.id}>
         {({ data: { article } }) => {
           return (
-            <Layout titlePage={article.title}>
+            
               <div>
                 <div
                   id="banner"
@@ -35,10 +36,11 @@ const Article = () => {
                   </div>
                 </div>
               </div>
-            </Layout>
+            
           );
         }}
       </Query>
+    </Layout>  
   );
 };
 

frontend/pages/categories/[id].js

@@ -10,10 +10,11 @@ const Category = () => {
   const router = useRouter();
 
   return (
+    <>
+    <Layout titlePage={`Category id: ${router.query.id}`}>
       <Query query={CATEGORY_ARTICLES_QUERY} id={router.query.id}>
         {({ data: { category } }) => {
           return (
-            <Layout titlePage={category.name}>
               <div>
                 <div className="uk-section">
                   <div className="uk-container uk-container-large">
@@ -22,10 +23,11 @@ const Category = () => {
                   </div>
                 </div>
               </div>
-            </Layout> 
           );
         }}
       </Query>
+    </Layout> 
+    </>
   );
 };
 

frontend/utils/apollo.js

@@ -8,20 +8,12 @@ import "../assets/css/style.css";
 
 
 import Router from 'next/router'
-Router.events.on('routeChangeStart', url => NProgress.start())
+Router.events.on('routeChangeStart', () => NProgress.start())
 Router.events.on('routeChangeComplete', () => NProgress.done())
 Router.events.on('routeChangeError', () => NProgress.done())
 
 const GRAPHQL_URL = process.env.BACKEND_URL || 'http://localhost:1337/graphql'
 
-const link = new HttpLink({
-    fetch,
-    uri: GRAPHQL_URL
-})
-
-
-
-
   let apolloClient = null
 
   /**