Focus aware query polling

CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file. This projec
 
 -   Add scope support for redirects (`@comet/cms-api` and `@comet/cms-admin`)
 
+### @comet/admin
+
+#### Changes
+
+-   Add `useFocusAwarePolling` hook that can be used in combination with `useQuery` and only fetches when the current browser tab is focused
+
 ## 3.0.0
 
 _Oct 17, 2022_

packages/admin/admin/src/apollo/useFocusAwarePolling.ts

@@ -0,0 +1,56 @@
+import { ObservableQuery, OperationVariables, QueryHookOptions } from "@apollo/client";
+import { useEffect } from "react";
+
+type FocusAwarePollingHookOptions<TData = any, TVariables = OperationVariables> = Pick<
+    ObservableQuery<TData, TVariables>,
+    "refetch" | "startPolling" | "stopPolling"
+> &
+    Pick<QueryHookOptions<TData, TVariables>, "pollInterval" | "skip">;
+
+function useFocusAwarePolling<TData = any, TVariables = OperationVariables>({
+    pollInterval,
+    skip,
+    refetch,
+    startPolling,
+    stopPolling,
+}: FocusAwarePollingHookOptions<TData, TVariables>): void {
+    useEffect(() => {
+        if (pollInterval === undefined || skip) {
+            stopPolling();
+            return;
+        }
+
+        const handleFocus = () => {
+            refetch();
+
+            startPolling(pollInterval);
+        };
+
+        const handleBlur = () => {
+            stopPolling();
+        };
+
+        window.addEventListener("focus", handleFocus);
+        window.addEventListener("blur", handleBlur);
+
+        let timeoutId: number | undefined;
+
+        if (document.hasFocus()) {
+            // Timeout to prevent duplicate initial requests as useQuery fetches as well
+            timeoutId = window.setTimeout(() => {
+                startPolling(pollInterval);
+            }, pollInterval);
+        }
+
+        return () => {
+            window.removeEventListener("focus", handleFocus);
+            window.removeEventListener("blur", handleBlur);
+
+            if (timeoutId !== undefined) {
+                window.clearTimeout(timeoutId);
+            }
+        };
+    }, [pollInterval, skip, refetch, startPolling, stopPolling]);
+}
+
+export { useFocusAwarePolling };

packages/admin/admin/src/index.ts

@@ -1,3 +1,4 @@
+export { useFocusAwarePolling } from "./apollo/useFocusAwarePolling";
 export { AppHeader, AppHeaderClassKey } from "./appHeader/AppHeader";
 export { AppHeaderButton, AppHeaderButtonProps } from "./appHeader/button/AppHeaderButton";
 export { AppHeaderButtonClassKey } from "./appHeader/button/AppHeaderButton.styles";

packages/admin/cms-admin/src/builds/BuildEntry.tsx

@@ -1,5 +1,5 @@
 import { gql, useQuery } from "@apollo/client";
-import { LocalErrorScopeApolloContext } from "@comet/admin";
+import { LocalErrorScopeApolloContext, useFocusAwarePolling } from "@comet/admin";
 import { SsgRunning, SsgStandby } from "@comet/admin-icons";
 import { List, ListItem, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
@@ -104,13 +104,20 @@ const BuildStatusPopperContent: React.FunctionComponent<{ data: GQLBuildStatusQu
 };
 
 export function BuildEntry(): React.ReactElement {
-    const { data, error } = useQuery<GQLBuildStatusQuery>(buildStatusQuery, {
-        pollInterval: process.env.NODE_ENV === "production" ? 10000 : undefined,
+    const { data, error, refetch, startPolling, stopPolling } = useQuery<GQLBuildStatusQuery>(buildStatusQuery, {
         skip: process.env.NODE_ENV === "development",
         fetchPolicy: "network-only",
         context: LocalErrorScopeApolloContext,
     });
 
+    useFocusAwarePolling({
+        pollInterval: process.env.NODE_ENV === "production" ? 10000 : undefined,
+        skip: process.env.NODE_ENV === "development",
+        refetch,
+        startPolling,
+        stopPolling,
+    });
+
     const running = data?.builds[0]?.status === "active" || data?.builds[0]?.status === "pending";
 
     return (

packages/admin/cms-admin/src/pages/pageTreeSelect/PageTreeSelectDialog.tsx

@@ -1,5 +1,5 @@
 import { gql, useQuery } from "@apollo/client";
-import { Toolbar, ToolbarActions, ToolbarFillSpace } from "@comet/admin";
+import { Toolbar, ToolbarActions, ToolbarFillSpace, useFocusAwarePolling } from "@comet/admin";
 import { ArrowRight, Close, Delete } from "@comet/admin-icons";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, MenuItem, Select } from "@mui/material";
 import { styled } from "@mui/material/styles";
@@ -82,13 +82,20 @@ export default function PageTreeSelectDialog({ value, onChange, open, onClose, d
     const classes = useStyles();
 
     // Fetch data
-    const { data } = useQuery<GQLPagesQuery, GQLPagesQueryVariables>(pagesQuery, {
+    const { data, refetch, startPolling, stopPolling } = useQuery<GQLPagesQuery, GQLPagesQueryVariables>(pagesQuery, {
         variables: {
             contentScope: scope,
             category,
         },
+        skip: !open,
+    });
+
+    useFocusAwarePolling({
         pollInterval: process.env.NODE_ENV === "development" ? undefined : 10000,
         skip: !open,
+        refetch,
+        startPolling,
+        stopPolling,
     });
 
     // Exclude all archived pages from selectables, except if the selected page itself is archived

packages/admin/cms-admin/src/pages/pagesPage/PagesPage.tsx

@@ -1,5 +1,16 @@
 import { useQuery } from "@apollo/client";
-import { MainContent, messages, Stack, StackPage, StackSwitch, Toolbar, ToolbarActions, useEditDialog, useStoredState } from "@comet/admin";
+import {
+    MainContent,
+    messages,
+    Stack,
+    StackPage,
+    StackSwitch,
+    Toolbar,
+    ToolbarActions,
+    useEditDialog,
+    useFocusAwarePolling,
+    useStoredState,
+} from "@comet/admin";
 import { Add } from "@comet/admin-icons";
 import { Box, Button, CircularProgress, FormControlLabel, Paper, Switch } from "@mui/material";
 import withStyles from "@mui/styles/withStyles";
@@ -53,12 +64,18 @@ export function PagesPage({
         };
     }, [setRedirectPathAfterChange, path]);
 
-    const { loading, data } = useQuery<GQLPagesQuery, GQLPagesQueryVariables>(pagesQuery, {
+    const { loading, data, refetch, startPolling, stopPolling } = useQuery<GQLPagesQuery, GQLPagesQueryVariables>(pagesQuery, {
         variables: {
             contentScope: scope,
             category,
         },
+    });
+
+    useFocusAwarePolling({
         pollInterval: process.env.NODE_ENV === "development" ? undefined : 10000,
+        refetch,
+        startPolling,
+        stopPolling,
     });
 
     const [EditDialog, editDialogSelection, editDialogApi] = useEditDialog();