Refresh Next.js server/static props on DatoCMS update

use-datocms-listener.js

import { useEffect, useRef, useState } from 'react';
import { subscribeToQuery } from 'datocms-listen';
import { useRouter } from 'next/router';

import { reporter } from '../utils';
/*
  references for this technique of using router.replace

    - https://www.joshwcomeau.com/nextjs/refreshing-server-side-props/
      - https://twitter.com/flybayer/status/1333081016995622914
    - https://medium.com/wearewebera/updating-the-properties-of-the-getstaticprops-method-in-next-js-79a17b7801e1

  questions

    - how can I return something useful from this, so I know if we are in a "loading" state?
    - how can I prevent an additional run when the page first mounts?
*/
export function useDatoListeners(...queries) {
  const router = useRouter();
  const unsubsRef = useRef(queries);
  const [isUpdating, setIsUpdating] = useState(false);
  // const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    const { info, table } = reporter();
    if (router.isPreview) {
      // setTimeout(() => setIsLoading(false), 1000);
      unsubsRef.current = unsubsRef.current.map((query) =>
        subscribeToQuery({
          ...query,
          // preview: router.isPreview,
          // token: process.env.DATOCMS_TOKEN,
          onChannelError({ code, message, response }) {
            table({ code, message, response });
            window.location.reload(true); // retry the connection !
          },
          onUpdate() {
            if (isUpdating) return;
            info('datocms update received');
            // shallow: false causes getStaticProps to run; scroll: false maintains position
            router.replace(router.asPath, router.asPath, { shallow: false, scroll: false });
            setTimeout(() => setIsUpdating(false), 1000);
          },
        }),
      );
      return () => Promise.all(unsubsRef.current).then((unsubs) => unsubs.forEach((unsub) => unsub()));
    }
  }, []);
  return isUpdating;
}