How to stop whole tree suspension on relay pagination fetching?

[RIP21]

I use a Graphcache with suspense: true with a relay pagination setup, and it works fine, but when I click on "load more" I want data to be loaded in the background showing a neat small loader below the list, I don't want the closest suspense boundary to activate.

Setting context: { suspense: false } on a query causes an infinite loop for some weird reason. So, it's likely not supported or not well tested.

The worst-case scenario would be to use the client directly with toPromise() thingy, but having a mechanism to bail out of suspense for some of the queries would be nice.

Or, dunno, useTransition maybe? Any ideas are highly appreciated :)

[RIP21]

Yeah, the key is to use useTransition and wrap setAfter in startTransition.
So something along these lines.

Surprised it works just as per React docs lol :D
https://react.dev/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition

const [isPending, startTransition] = useTransition()
const [after, setAfter] = useState<string | null>(null)
const [...] = useQuery({..., variables: { after, ...}})

// ... other code and layout
<button disable={isPending} onClick={() => {
  startTransition(() => {
    setAfter(pageInfo.endCursor)
  })
}}>Load more</button>