Get Started

Using React Suspense#

How to enable it#

One of the goals of GQty is to embrace the React features Suspense & Concurrent Mode.

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.