useSuspenseQuery with useDeferredValue doesn't abort, but should it?

[rostero1]

  const searchValue = React.useDeferredValue(autocompleteValue);

  const { data, isFetching } = useSuspenseQuery({
    queryKey: ['item', searchValue],
    queryFn: ({ signal }) => searchPersons(searchValue, { signal }),
    staleTime: Infinity,
  });

I noticed that my searchPersons function never has its abort signal called. Is that expected?

Also, I noticed isFetching is always false. Should loading be derived from searchValue !== autocompleteValue?

If I want searchPersons to not hit the backend when my string is empty, do I just customize the searchPersons function to return an empty array when the query is an empty string? I see there is no enabled.

Finally, is it ok to use useSuspenseQuery for key1 and then useQuery for the same key1?

demo

[TkDodo]

We notify the AbortSignal if the last observer of a query unmounts. It can very well be that with suspense and deferred value, that isn't happening. I don't enough how suspense does this under the hood.

I tried to see if the signal is called properly when not using suspense in your example, simply by doing this:

const searchValue = autocompleteValue; //React.useDeferredValue(autocompleteValue);

but then the example starts to break. Maybe you can provide an example that doesn't use 3rd party components (mui), has the query devtools enabled and maybe does a real network request so that we can see the aborted requests there? Thanks.

Also, I noticed isFetching is always false. Should loading be derived from searchValue !== autocompleteValue?

isFetching should be true. In order to get the same behaviour as isPreviousData gives you for non-suspense queries, you need to derive it by comparing searchValue and autocompleteValue.

If I want searchPersons to not hit the backend when my string is empty, do I just customize the searchPersons function to return an empty array when the query is an empty string? I see there is no enabled.

yes, or you move the query into a component further down the component tree that renders conditionally and gets the searchValue passed as prop.

Finally, is it ok to use useSuspenseQuery for key1 and then useQuery for the same key1?

yes, if you want them to work on the same cache entry.

[rostero1]

Thanks for the help.

I don't enough how suspense does this under the hood.

I don't think anyone does at the moment.

but then the example starts to break

I updated the demo to remove mui and add devtools. The result is similar, but itt's nice to have the demo simplified. It seems the issue was that the fallback to Suspense was null. Once I set this to "Loading" then it will now show Loading when you set searchValue to autoCompleteValue and don't use useDeferredValue. I thought setting it to null would help get rid of the initial flash of content with Loading.

isFetching should be true

It's still always ever false with the code change, but I also don't know anything about suspense. I remember seeing a tweet from Sebastian Markbåge saying that useDeferredValue is preferred over debounce here, which is why I wanted to try this out. I'd like to see more suspense examples in the react docs.

[TkDodo]

yeah I need to look into this isFetching thing. I guess you'll always see everything from the old query, which isn't fetching, while transitioning to the new query.

with placeholderData: keepPreviousData, we just keep data from the previous query, so isFetching is true there. But yes, this doesn't exist for suspense because useDeferredValue is the replacement. So yes I think you need to compare values to see if a "transition" is happening. Or, you switch to useTransition, which will have its own isPending flag.

[TkDodo]

ah you could also try a separate subscription to get the fetching state only with:

const isFetching = useIsFetching({ queryKey: ['item', autocompleteValue] }) > 0

just make sure to not use the deferred value here in the key :)