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.