[Beta] Disabled query has `isLoading: true` property

[maxsbelt]

Describe the bug

In react-query@beta version has strange behaviour. By default query that has enabled: false option has isLoading: true property (see code sandbox for details). In stable release react-query@^3 is has isLoading: false. I didn't find any notes about this update in change logs so it seems like a bug.

Your minimal, reproducible example

https://codesandbox.io/s/eager-bell-epuvfi?file=/src/App.js

Steps to reproduce

Define simple query with enabled: false option

Expected behavior

Query should have isLoading: false

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Any

react-query version

4.0.0-beta.7

TypeScript version

Not relevant

Additional context

No response

[TkDodo]

https://react-query-beta.tanstack.com/guides/migrating-to-react-query-4#the-idle-state-has-been-removed

[maxsbelt]

@TkDodo in such case I think it makes sense to mention in the migration guide that query.isLoading state was updated from false to true for disabled queries, WDYT? I didn't find any note about this change.

[TkDodo]

The migration guide mentions that the idle state was replaced with isLoading: true and fetchStatus: idle. If your query was in idle state on v3, it will be in loading state on v4. My guess is that's what's happening to you, but not every disabled query will be in loading state, just like not every disabled query was in idle state. If you have data and then disable the query, it will still be in success state.

[olan-go2]

This is messed up. If the enabled = false, isLoading should be in false as well

[kimFrost]

This caught me off guard as well.

This page gives a bit of info on the subject
https://tanstack.com/query/v4/docs/guides/queries#fetchstatus

[houssemamiri-logient]

How to deal with disabled false if we have a loading page that work if isloading is true and the loader is showing

[edemaz]

This is really messed up. On big repo that relies heavily on isLoading state, it is a nightmare upgrading to v4.

[atreya2011]

This totally caught me off guard too! I am leaving a link to this in my repo for my future self 😂 It feels counter-intuitive to leave loading to true when the query is disabled.

[epicmau5time]

So what to do in this case? If I have a query that is disabled, am I to just use isFetching? There is not really as use for isLoading now that it will always show a spinner on components that do not meet a url param criteria (for my use case).

Is param in url? fetch, if it is not always be enabled = false. Due to this change the spinner is always going even if it does not need to be.

[caweidmann]

What I ended up doing as quick and dirty workaround is the following:

const enabled = false
const { isLoading: isLoad } = useQuery(['some-key'], someMethod, { enabled })
const isLoading = isLoad && enabled

[epicmau5time]

I did something slightly different

const useWrapper = ()=> {
    const query = useQuery(['key'], fetchFunction)
    
    return {
        ...query,
        isLoading: query.isLoading && query.fetchStatus !== "idle"
    }
}

[houssemamiri-logient]

for me it works testing on this
fetchStatus === 'fetching' && status === 'loading'

[changyeamoon]

this makes sense.

this makes even more sense

What's the reason not to go with this approach? @tannerlinsley @TkDodo

[mattisaa]

It is true that isLoading = query.isLoading && query.fetchStatus === 'fetching' or isLoading = query.isLoading && query.fetchStatus !== 'idle' would solve the problem, but this feels like a very backwards check. It also adds more complexity to the code.

It makes the migration from v3 to v4 a bit worse :/