Using React Suspense#

How to enable it#

One of the goals of GQty is to embrace React Suspense & Concurrent Mode, however these features are still in development by the React team.

Until these features become widespread enough, you will need to opt-in for Suspense support via configuration. This can be done directly in hook, or via the defaults of the client.

// Enabling support with hooks
const query = useQuery({ suspense: true });

// Enabling support with HoC
const Component = graphql(() => <div />, { suspense: true });

Usage without Suspense#

All hooks return a $state object, when suspense support is not enabled.

function Example() {
  const query = useQuery({ suspense: false });

  if (query.$state.isLoading) return <p>Loading...</p>;

  return <p>{helloWorld}</p>;
}

Suspense & SSR#

React doesn't yet support suspense whilst rendering on the server, so react-ssr-prepass is used in our SSR functions:

React Error with Suspense in SSR

And for that, reason we suggest using a slighty modified Suspense component:

import { Suspense as ReactSuspense, SuspenseProps } from 'react';

export const Suspense =
  typeof window !== 'undefined'
    ? ReactSuspense
    : function SuspenseSSR({ children }: SuspenseProps) {
        return <>{children}</>;
      };

And everything should work as you might expect.