Use React.Suspense for Apollo Client React hooks

App.tsx

import { gql, useQuery } from '@apollo/client';
import React, { ReactElement, useEffect, useMemo, useRef } from 'react';


const ME_QUERY = gql`
  query Me {
    me {
      firstName
    }
  }
`;

function App() {
  return (
    <React.Suspense fallback={<p>loading...</p>}>
      <Dashboard/>
    </React.Suspense>
  );
}

function Dashboard() {
  const { data, loading } = useQuery(ME_QUERY);

  if (loading) {
    return <Suspender/>;
  }

  return (
    <div>
      <h1>Hello {data?.me?.firstName}</h1>
    </div>
  );
}

function Suspender(): ReactElement {
  const resolve = useRef<() => void>();
  const promise = useMemo(() => new Promise<void>((res) => {
    resolve.current = res;
  }), []);

  useEffect(() => {
    return () => {
      resolve.current?.();
    };
  });

  throw promise;
}

In React v18 they cancel all effects if the tree is suspended, and Apollo triggers the query through effect. Following implementation of Suspender worked out for us:

import { useRef, useMemo, useState, useLayoutEffect } from 'react'

// The solution is copied from here with a small adjustment
// https://github.com/apollographql/apollo-feature-requests/issues/162#issuecomment-962696368
const Suspender = () => {
  const [isRenderedOnce, setIsRenderedOnce] = useState(false)
  const resolveRef = useRef<() => void>()
  const promise = useMemo(
    () =>
      new Promise<void>(resolve => {
        resolveRef.current = resolve
      }),
    []
  )

  useLayoutEffect(() => {
    setIsRenderedOnce(true)

    return () => {
      resolveRef.current?.()
    }
  }, [])

  if (isRenderedOnce) {
    throw promise
  }

  // React 18 doesn't run effects for suspended components.
  // We need to render at least once so that Apollo
  // will trigger a fetch request (which happens inside the effect).
  return null
}

export default Suspender