Enhanced version of `useReadQuery` in Apollo Client for better DX with Suspense

use-read-query-deferred.ts

import { useDeferredValue } from "react";
import { useSpinDelay } from "spin-delay";
import {
  useReadQuery as useApolloReadQuery,
  type QueryRef,
} from "@apollo/client/react";

/**
 * Enhanced version of Apollo's `useReadQuery` hook to stop the hook from
 * suspending when `queryRef` changes and instead return a `isSuspending`
 * flag that can be used to shown an inline loading indicator.
 */
export function useReadQueryDeferred<TData>(queryRef: QueryRef<TData>) {
  const deferredQueryRef = useDeferredValue(queryRef);
  const result = useApolloReadQuery(deferredQueryRef);

  /**
   * Add smart delay to prevent spinner flickering when variables change,
   * and tell when the query is suspending so that we can show an inline
   * loading indicator.
   *
   * Note: expose both `isSuspending` and `isSuspendingDelayed` flags
   * so that the caller can choose whether to use the delay or not.
   */
  const isSuspending = deferredQueryRef !== queryRef;
  const isSuspendingDelayed = useSpinDelay(deferredQueryRef !== queryRef);

  return { ...result, isSuspending, isSuspendingDelayed };
}