Skip to main content

React Suspense Features

Focus#

The focus of gqless is to embrace React Suspense & React Concurrent Mode, and that's why most of it's functions/hooks are Suspense ready, but we understand that it's not always the best solution, and it may not be for everyone.

That's why it's usage will always be opt-in via defaults, and you will always be able to turn on/off Suspense in a per function/hook basis.

const {
// ...
} = useQuery({
suspense: false,
// ...
});
// ...
const Component = graphql(
() => {
//...
},
{
suspense: true,
// ...
}
);

Non-Suspense usage#

Most of the hooks/functions offer some way of using it flawlessly without Suspense usage in mind, often with isLoading states returned.

But in the main design of gqless, using useQuery and/or graphql HOC it's a little bit different.

First of all, We suggest NOT using the graphql HOC for Non-Suspense usage, instead, do useQuery, mainly because it returns an extra reserved $state object, in which you can check easily if the data you requested is being fetched for the first time:

function Example() {
const { helloWorld, $state } = useQuery({
suspense: false,
});
if ($state.isLoading) return <p>Loading...</p>;
return <p>{helloWorld}</p>;
}

Suspense in SSR#

Meanwhile we support Server-Side Rendering, React still today doesn't support Suspense in SSR, that's why we use react-ssr-prepass for our SSR helpers, but while you are using it, you might encounter something like this:

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 Sam Denty