The Guild LogoThe Guild Monogram

Search docs

Search icon

Products by The Guild

Products

Hive logoHive blurred logo

Hive

Schema Registry for your GraphQL Workflows

Docs

Get Started

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.