FIX: Fallback page loading

src/js/_components/_apollo.js

@@ -13,9 +13,9 @@ import { onError } from '@apollo/client/link/error';
 const NAME = '_appolo';
 
 const API_META = document.querySelector('meta[name="api_url"]');
-const API_URL = API_META
-  ? API_META.getAttribute('content')
-  : `${window.location.protocol  }//${  window.location.host  }/graphql`;
+const API_URL = API_META ?
+    API_META.getAttribute('content') :
+    `${window.location.protocol  }//${  window.location.host  }/graphql`;
 
 const authMiddleware = new ApolloLink((operation, forward) => {
     // add the authorization to the headers
@@ -38,16 +38,18 @@ const link = from([
     }),
     onError(({ operation, response, graphQLErrors, networkError, forward }) => {
         if (operation.operationName === 'IgnoreErrorsQuery') {
+            console.error(`${NAME}: IgnoreErrorsQuery`);
             response.errors = null;
             return;
         }
 
-    if (graphQLErrors)
+        if (graphQLErrors) {
             graphQLErrors.forEach(({ message, locations, path }) =>
                 console.error(
                     `${NAME}: [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
                 ),
             );
+        }
 
         if (networkError) {
             /*let msg = '';
@@ -62,11 +64,11 @@ const link = from([
                 msg = 'Something went wrong.';
                 break;
             }*/
-
             console.error(`${NAME}: [Network error] ${networkError.statusCode}`);
-
-      window.dispatchEvent(new Event(Events.OFFLINE));
         }
+
+        console.error(`${NAME}: [APOLLO_ERROR]`);
+        window.dispatchEvent(new Event(Events.APOLLO_ERROR));
     }),
     new ApolloLink((operation, forward) => {
         return forward(operation).map((data) => {

src/js/_components/_main.links.js

@@ -14,6 +14,7 @@ const MainUILinks = ((W) => {
     const BODY = D.body;
 
     class MainUILinks {
+        window
         static init() {
             const ui = this;
             ui.GraphPage = null;
@@ -140,6 +141,7 @@ const MainUILinks = ((W) => {
 
             const link = el.getAttribute('href') || el.getAttribute('data-href');
 
+
             ui.GraphPage.state.current = el;
 
             ui.GraphPage.load(link)
@@ -148,6 +150,8 @@ const MainUILinks = ((W) => {
                     el.classList.remove('loading');
                     el.classList.add('active');
 
+                    D.loading_apollo_link = null;
+
                     if (ui.GraphPage.state.Link) {
                         window.history.pushState({
                                 page: JSON.stringify(ui.GraphPage.state),
@@ -166,12 +170,15 @@ const MainUILinks = ((W) => {
                     console.groupEnd(`${NAME}: load on click`);
                 })
                 .catch((e) => {
+                    console.error(`${NAME}: loading error`);
                     console.log(e);
 
                     BODY.classList.remove('ajax-loading');
                     el.classList.remove('loading');
                     el.classList.add('error', `response-${e.status}`);
                     /*switch (e.status) {
+                        case 500:
+                            break;
                         case 404:
                             el.classList.add('not-found');
                             break;
@@ -184,6 +191,11 @@ const MainUILinks = ((W) => {
 
                     window.dispatchEvent(new Event(Events.AJAX));
                     console.groupEnd(`${NAME}: load on click`);
+
+                    console.log(`${NAME}: reloading page ${link}`);
+
+                    // fallback loading
+                    W.location.href = link;
                 });
         }
     }
@@ -195,6 +207,15 @@ const MainUILinks = ((W) => {
     W.addEventListener(`${Events.AJAX}`, () => {
         MainUILinks.loaded();
     });
+
+    // fallback
+    /*W.addEventListener(`${Events.APOLLO_ERROR}`, (e) => {
+        console.error(`${NAME}: [APOLLO_ERROR] loading failure, reloading the page`);
+        //W.dispatchEvent(new Event(Events.OFFLINE));
+        if (D.loading_apollo_link) {
+            W.location.href = D.loading_apollo_link;
+        }
+    });*/
 })(window);
 
 export default MainUILinks;

src/js/_components/_page.jsx

@@ -89,8 +89,7 @@ class Page extends Component {
                         Object.assign(ui.empty_state, {
                             Title: 'Offline',
                             CSSClass: 'graphql__status-523',
-							Summary:
-								"You're Offline. The page is not available now.",
+                            Summary: "You're Offline. The page is not available now.",
                             loading: false,
                         }),
                     );
@@ -119,6 +118,9 @@ class Page extends Component {
                             console.log(`${ui.name}: not found`);
                             reject({ status: 404 });
                         }
+                    })
+                    .catch((error) => {
+                        reject({ status: 500, error: error });
                     });
             }
         });
@@ -152,7 +154,7 @@ class Page extends Component {
             Summary: page.Summary,
             Link: page.Link,
             HTML: page.HTML,
-			Elements: [],//page.Elements.edges,
+            Elements: [], //page.Elements.edges,
             loading: false,
         });
 
@@ -178,10 +180,10 @@ class Page extends Component {
         );
 
         let html = '';
-		if(ui.state.HTML) {
+        if (ui.state.HTML) {
             console.log(`${ui.name}: HTML only`);
             html = ui.state.HTML;
-		}else if (ui.state.Elements.length) {
+        } else if (ui.state.Elements.length) {
             console.log(`${ui.name}: render`);
             ui.state.Elements.map((el) => {
                 html += el.node.Render;
@@ -191,7 +193,7 @@ class Page extends Component {
             html = `<div class="summary">${ui.state.Summary}</div>`;
         }
 
-		if(ui.state.loading){
+        if (ui.state.loading) {
             const spinner = D.getElementById('PageLoading');
             html = `<div class="loading">Loading ...</div>`;
         }

src/js/_events.js

@@ -3,6 +3,7 @@
  */
 
 export default {
+    APOLLO_ERROR: 'apollo-error',
     AJAX: 'ajax-load',
     AJAXMAIN: 'ajax-main-load',
     MAININIT: 'main-init',