TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.76k stars 2.92k forks source link

When enabled flag is false query is still fetched #8098

Closed Ma5ha closed 2 months ago

Ma5ha commented 2 months ago

Describe the bug

When I setup my queryClient to use suspense globally like this:

const queryClient = new QueryClient({
  //@ts-ignore
  defaultOptions: { queries: { suspense: true } },
});

This flag is not present apparently at version "@tanstack/react-query": "^5.56.2" however, it does take effect. And query does throw to suspense. This is then by default wrong. But not just that, query is disabled and still fetches. Here is example.

Your minimal, reproducible example

https://codesandbox.io/p/github/Ma5ha/query-test/master

Steps to reproduce

  1. Go to example
  2. Yo will see Loading... message for few seconds then fetched data
  3. You should see empty page

Expected behavior

When I open example I should see just empty screen and not fetching indicator

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

Tanstack Query adapter

None

TanStack Query version

^5.56.2

TypeScript version

^5.5.3

Additional context

No response

DogPawHat commented 2 months ago

I'm not too familiar with this option (not a lot of documentation) but I do know that useSuspenseQuery (https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery) doesn't have the enabled option (and it doesn't support skipToken either). I think the pattern with suspense queries is not to disable the hook, it's to not render the component at all, and when you do, data is guaranteed to be defined.

I'm not a big fan of this flag in the defaultOptions now I've given it some thought, I would suggest it's removal.

Ma5ha commented 2 months ago

This was regular flag in previous versions and I have started using it in new project because of mine habit. It gave me error in terms of typescript and I just added that //ts-ignore and everything was working as I expected. Until I wanted to disable query, then I realised I have problem.

I like ability to add suspense:true as global option I don`t see any downfall of it. Could you explain why this should be removed, because they have obviously intended to do so? @DogPawHat

TkDodo commented 2 months ago

I'm not a big fan of this flag in the defaultOptions now I've given it some thought, I would suggest it's removal.

The flag has been removed, that's why ts-ignore is necessary now 😂.

I like ability to add suspense:true as global option

There is no suspense flag anymore. call useSuspenseQuery if you want suspense, and call useQuery if you don't want suspense. The flag "works" at runtime because both hooks share the same useBaseQuery hook and I'm not going to add code to warn or error about this situation because it's clearly documented that it doesn't exist, the types tell you that it doesn't exist, so it doesn't exist.