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:

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.