continuing-cyan

Disable suspense for a specific query

I noticed in v5 there is no option anymore on useQuery to do { suspense: false }. What's the recommended approach now to disable the suspense behavior for a specific query? What's the expected behavior if I set suspense: true globally on the query client? Would the useQuery hooks use the Suspense boundary or that's ignored for them since there is now a useSuspenseQuery hook? The overlap is a bit confusing for me. Thank you

8 Replies

genetic-orange•3y ago

If you want suspense, useSuspenseQuery. If you don't want suspense, useQuery You can't set suspense:true globally anymore

continuing-cyanOP•3y ago

In that case what does this suspense option do under defaultOptions? Isn't this setting it globally? This is on v5.4.3

genetic-orange•3y ago

look, we've changed the api with v5. internally, we still rely on the flag, but we might change that in the future for a better suspense integration with react. TypeScript types don't have this flag. The docs don't show this flag. If you keep using it, you're relying on an implementation detail that can change at any time.

continuing-cyanOP•3y ago

Sorry I didn't know that we're not supposed to use this option anymore. It's how it was done it v4 and I left it unchanged and TS didn't show any error so I supposed it's correct.

genetic-orange•3y ago

you're right, I made a mistake and left the suspense: boolean types in for the defaultOptions 😮 would you like to make a PR to remove them ? ah it's because they use observer options and there we still need it; damn, I need to think this thorugh. Thanks for pointing me in the right direction

continuing-cyanOP•3y ago

No worries, thank you for investigating

other-emerald•3y ago

@TkDodo 🔮 What's the motivation behind splitting into two different hooks? I understand the types are better, but this is quite a heavy technical limitation. In my app I rely heavily on suspense: true being a global default and then explicitly passing suspense: false to some queries. E.g. I have have components being rendered in different contexts. When a component renders withing the main body of the page, it uses suspense. But when a component renders conditionally as part of a form, it doesn't use suspense, so I pass that suspense prop to it. This split is quite breaking and it can't be worked around by creating two versions of helper hooks (which I'd be okay with) This feels like the change is made as a sacrifice to typescript and not for the benefit of users

genetic-orange•3y ago

What's the motivation behind splitting into two different hooks?

suspense is more an architectural change rather than a flag that you turn on and off. It's not just a "global loading spinner". We made this change to a) reflect that, b) have better types and c) to allow a better integration with react in the future. For example, react plans to come up with a suspense cache api that can be implemented by libraries, and we can do that better if we have a dedicated API. For your problem: The idea is to, instead of splitting things up in custom hooks, you split them up in queryOptions and use the hook you want wherever you need to:

const todoOptions = {
  queryKey: ['todos'],
  queryFn: fetchTodos
}

function MyComponent() {
  const { data } = useSuspenseQuery(todoOptions)
}

function MyOtherComponent() {
  const { data, isLoading } = useQuery(todoOptions)
}

const todoOptions = {
  queryKey: ['todos'],
  queryFn: fetchTodos
}

function MyComponent() {
  const { data } = useSuspenseQuery(todoOptions)
}

function MyOtherComponent() {
  const { data, isLoading } = useQuery(todoOptions)
}

and yes, you can still make custom hooks abstractions about that. Why do you say that this isn't possible?

Gaming

Programming

Disable suspense for a specific query

Did you find this page helpful?