Using urql suspense feature with React 18

[jwm0]

Hi! It looks like urql has had suspense flag for a while but I'm having issues getting it to work with latest React 18 (RC). Am I doing something wrong or it's expected not to work on R18 yet? It looks like the suspense boundary never goes away (even though the network request completes).

Reproduction:
CRA with React 18

    "react": "^18.0.0-rc.0",
    "react-dom": "^18.0.0-rc.0",

// index.ts
const client = createClient({
  url: "...",
  suspense: true,
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider value={client}>
      <App />
    </Provider>
  </React.StrictMode>
);

// App

const SuspenseTest = () => {
  const [{ data }] = useCheckoutQuery({ // hook auto-generated from @graphql/codegen
    variables: { ... },
  });

  return <span>{data.email}</span>;
};

export const App = () => {
  return (
      <p>
        <Suspense fallback={"Loading..."}>
          <SuspenseTest />
        </Suspense>
      </p>
  );
};

[JoviDeCroock]

Been able to reproduce it here

In React 18 we seem to be causing a loop here which could be caused by a promise overriding the cache-entry, will look into this later

[JoviDeCroock]

It's hard for me to tell you that in all honesty 😅 not entirely sure what the bug is you are running into... The changes from v3 to v4 are quite minimal #3114 and v2 to v3 are also quite small...

Larger migrations might be induced by the auth-exchange...

Is the same thing happening for you lot where the Suspense boundary never goes away, is this a one-off or happens everywhere?

[spikebrehm]

Just cut a branch to upgrade to v4. Simple enough that was, nice work!

I can see the page load and render fine and then error out with:

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Here's what I'm trying — doing it right? I also tried commenting out all our custom changes.

export default function Outer() {
  return (
    <Suspense fallback={<LoadingPage />}>
      <ComponentThatFetches />
    </Suspense>
  );
}

function ComponentThatFetches() {
  const [result, refetchQuery] = useSomeQuery({
    requestPolicy: 'network-only',
    context: {
      suspense: true,
    },
  });

  return (
    // ...
  );
}

our exchanges aren't doing anyth

[JoviDeCroock]

If you memoize context then it will work 😅 you can also define it outside your component.

Let me see if I can build a warning for that

[spikebrehm]

Oh my! That works! Thanks @JoviDeCroock!

I also just tried adding suspense: true to my top-level createClient() and that works as well. 👍🏼

[omniverse]

Yes @JoviDeCroock! I needed to override my client suspense setting for a specific query and memoizing context did the job. Thank you.

[adikari]

I am using urql with suspense in Next 13 and I am running into infinite loop problem.

[spikebrehm]

Do you have a top-level <Suspense> boundary?

Also check this:
#2235 (reply in thread)

[isener]

If you don't want suspense on Nextjs and only intend to make request on client-side (browser only) - construct context object memoised unless you use React 19.

  const context = useMemo(
    () => ({
      suspense: false,
    }),
    [],
  );