Skip to main content

Using React Suspense

How to enable it#

One of the goals of GQless 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.

Last updated on by github-actions[bot]