useDeferredValue doesn't work with useSuspenseQuery

[unbelivr]

Issue Description

If some of query variables are deferred values and initial data was already recieved, component should not suspend and suspense fallback should not be displayed when I change these values.

Example in React Docs

const [filter, setFilter] = useState("");
const filterDeferred = useDeferredValue(filter);
const { data } = useSuspenseQuery_experimental(FILTERED_PEOPLE, {
  variables: { name: filterDeferred }
});

At the moment, in the sandbox, when I change the filter value, the component suspends, so the list of names disappears and shows "Loading..." fallback. It should show "Filtering..." and current list instead.

Link to Reproduction

https://codesandbox.io/s/deferred-suspense-query-5g90bl

[jerelmiller]

Hey @unbelivr 👋 !

Thanks so much for the feedback! If you want to avoid re-suspending a useSuspenseQuery hook, you can set the suspensePolicy to initial in options to avoid this. See if this works better for you:

useSuspenseQuery(FILTERED_PEOPLE, {
  suspensePolicy: 'initial',
  variables: { name: filterDeferred }
});

I tried this on a fork of your codesandbox and this seems to work as you're expecting.

---

That being said, there is a good chance the semantics of how this works may change between now and the final release. As you're doing here, I'd like to lean more on React's useDeferredValue and startTransition APIs to determine how/when to show suspense boundaries for resuspended components. Ideally I'd like to drop suspensePolicy and use those mechanisms instead, but there is still some more experimentation to do before we get there.

We'll try our best to keep you updated with changes to the API as we move through the alpha process. Appreciate you trying this out!

[unbelivr]

Thanks @jerelmiller!

The only drawback I see in suspensePolicy: 'initial' is that there is no way to know that something is being loaded (e.g. loading in useQuery).

This is what I'm trying to achieve with useDeferredValue

{filter !== filterDeferred && <p>Filtering...</p>}

[jerelmiller]

@unbelivr totally agree and something I also felt was a shortcoming of the current solution. suspensePolicy gave me a decent place to start, but I think React's useTransition with the isPending flag is suited for this kind of behavior. Lots of experimentation left to do, but at least that's the vision I'd like to move toward.

[jerelmiller]

Hey @unbelivr 👋

I just merged #10672 that fixes the compatibility with useDeferredValue and useSuspenseQuery. This should go out with the next alpha release (should be by end of week).

FYI the refetch and fetchMore APIs still aren't quite compatible with startTransition, but I've captured that in a separate issue. Changing variables with useDeferredValue and startTransition works like a charm though.

Thanks again for raising this issue and for trying out the alpha! This issue brought attention to several shortcomings of my previous solution. Once I have a fix for #10676, I plan to deprecate the suspensePolicy option in favor of React's built-in APIs.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.