Properly handle all offline and invisible states

aleksis/core/assets/app/apollo.js

@@ -4,7 +4,6 @@
 
 import { ApolloClient, HttpLink, from } from "@/apollo-boost";
 
-import { onError } from "@/apollo-link-error";
 import { RetryLink } from "@/apollo-link-retry";
 import { persistCache, LocalStorageWrapper } from "@/apollo3-cache-persist";
 import { InMemoryCache } from "@/apollo-cache-inmemory";
@@ -97,15 +96,6 @@ function getGraphqlURL() {
 const links = [
   // Automatically retry failed queries
   new RetryLink(),
-  // Add custom error handlers
-  onError(({ graphQLErrors, networkError }) => {
-    // Add a snackbar on all errors returned by the GraphQL endpoint
-    if (graphQLErrors) addErrorSnackbarItem("graphql.snackbar_error_message");
-    // Set app offline globally on network errors
-    //  This will cause the offline logic to kick in, starting a ping check or
-    //  similar recovery strategies depending on the app/navigator state
-    if (networkError) app.offline = true;
-  }),
   // Finally, the HTTP link to the real backend (Django)
   new HttpLink({
     uri: getGraphqlURL(),
@@ -122,6 +112,30 @@ const apolloClient = new ApolloClient({
 
 const apolloOpts = {
   defaultClient: apolloClient,
+  defaultOptions: {
+    $query: {
+      skip: (vm, queryKey) => {
+        // We only want to run this query when background activity is on and we are not reported offline
+        return !vm.$root.backgroundActive || vm.$root.offline;
+      },
+      error: ({ graphQLErrors, networkError }, vm, key, type, options) => {
+        if (graphQLErrors) {
+          // Add a snackbar on all errors returned by the GraphQL endpoint
+          console.error("A GraphQL query failed on the server");
+          addErrorSnackbarItem("graphql.snackbar_error_message");
+        }
+        if (networkError) {
+          // Set app offline globally on network errors
+          //  This will cause the offline logic to kick in, starting a ping check or
+          //  similar recovery strategies depending on the app/navigator state
+          console.error(
+            "Network error during GraphQL query, setting offline state"
+          );
+          vm.$root.offline = true;
+        }
+      },
+    },
+  },
 };
 
 export default apolloOpts;

aleksis/core/assets/components/app/ping.graphql

-{
-  ping
+query Pinf($payload: String) {
+  ping(payload: $payload)
 }

aleksis/core/assets/index.js

@@ -46,6 +46,7 @@ const app = new Vue({
     showCacheAlert: false,
     contentLoading: false,
     offline: false,
+    backgroundActive: true,
   }),
   router,
   i18n,

aleksis/core/assets/mixins/offline.js

@@ -23,63 +23,48 @@ const offlineMixin = {
   },
   mounted() {
     window.addEventListener("online", (e) => {
-      console.debug("Navigator changed status to online.");
-      if (!document.hidden) this.toggleGlobalQueries(false, true);
+      console.info("Navigator changed status to online.");
+      this.checkOfflineState();
     });
     window.addEventListener("offline", (e) => {
-      console.debug("Navigator changed status to offline.");
-      this.toggleGlobalQueries(false, false);
+      console.info("Navigator changed status to offline.");
+      this.checkOfflineState();
     });
     document.addEventListener("visibilitychange", () => {
-      if (document.visibilityState === "hidden") {
-        console.debug("Visibility changed status to hidden.");
-        this.toggleGlobalQueries(false, false);
-      } else if (navigator.online) {
-        console.debug(
-          "Visibility changed status to visible. Navigator status is online."
-        );
-        this.toggleGlobalQueries(false, true);
-      }
+      console.info("Visibility changed status to", document.visibilityState);
+      this.checkOfflineState();
     });
   },
   methods: {
-    toggleGlobalQueries(enable, pingPolling) {
-      console.debug("Toggling global queries: " + (enable ? "on" : "off"));
-      if (enable) {
-        this.$apollo.queries.whoAmI.startPolling(10000);
-        this.$apollo.queries.messages.startPolling(1000);
-      } else {
-        this.$apollo.queries.whoAmI.stopPolling();
-        this.$apollo.queries.messages.stopPolling();
-      }
-      if (pingPolling) {
-        console.debug("Starting ping polling.");
-        this.$apollo.queries.ping.observer.resetLastResults();
-        this.ping = null;
-        this.$apollo.queries.ping.startPolling(1000);
+    checkOfflineState() {
+      if (navigator.onLine && document.visibilityState === "visible") {
+        console.info("Resuming background activity");
+        this.$root.backgroundActive = true;
       } else {
-        this.$apollo.queries.ping.stopPolling();
+        console.info("Pausing background activity");
+        this.$root.backgroundActive = false;
       }
     },
   },
   apollo: {
     ping: {
       query: gqlPing,
+      variables: () => {
+        return {
+          payload: Date.now().toString(),
+        };
+      },
+      pollInterval: 1000,
+      skip: (component, query) => {
+        // We only want to run this query when background activity is on and we are reported offline
+        return !(component.$root.backgroundActive && component.$root.offline);
+      },
     },
   },
   watch: {
-    ping: function (ping) {
-      if (ping === "pong") {
-        console.debug("Pong was received. Resuming regular queries.");
-        this.toggleGlobalQueries(true, false);
-        this.$root.offline = false;
-      }
-    },
-    "$root.offline": function (offline) {
-      if (navigator.onLine && !document.hidden) {
-        console.debug("Queries failed, but navigator is online.");
-        this.toggleGlobalQueries(false, true);
-      }
+    ping(payload) {
+      console.info("Pong received, clearing offline state");
+      this.$root.offline = false;
     },
   },
 };

aleksis/core/schema/__init__.py

@@ -27,7 +27,7 @@ from .user import UserType
 
 
 class Query(graphene.ObjectType):
-    ping = graphene.String(default_value="pong")
+    ping = graphene.String(payload=graphene.String())
 
     notifications = graphene.List(NotificationType)
 
@@ -53,6 +53,9 @@ class Query(graphene.ObjectType):
 
     custom_menu_by_name = graphene.Field(CustomMenuType, name=graphene.String())
 
+    def resolve_ping(root, info, payload) -> str:
+        return payload
+
     def resolve_notifications(root, info, **kwargs):
         return Notification.objects.filter(
             Q(