isPending true even when query is not enabled

[simrunbuttar]

Hi there!

I had a question, I'm using react-query with conditional enabling of a query.
I've confirmed that my query is not enabled, but when I have my check for isPending, I see that it is

  const query = useQuery<IType[], Error | AxiosError>({
    queryKey: ["getTypes"],
    queryFn: () => getTypesById(id),
    enabled: type === "A",
  });

I've checked that type === B when doing this, but still when doing:

if (query.isPending) {
    return  <Loading />;
  }

query.isPending is true and Loading is returned -- why would that be the case? We recently migrated from v4 to v5 so this used to be isLoading

[simrunbuttar]

Basically from the docs, if I want to ensure query.data is valid and is based on being enabled, what should be used?

[TkDodo]

please read this guide:

https://tanstack.com/query/latest/docs/framework/react/guides/queries

and this one: https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries

When enabled is false:

If the query has cached data, then the query will be initialized in the status === 'success' or isSuccess state.
If the query does not have cached data, then the query will start in the status === 'pending' and fetchStatus === 'idle' state.

pending means you have no data. If the query is not enabled, it also has no data, that's why it's pending.

[rajivchaulagain]

@TkDodo but isn't this misleading as enabled false means we donot need data right now so if we don't want anything to be fetched so why would isPending be true as isPending means query is loading but here we never hit the api so it should be like pending should be false and after enabled is true then only pending should be true basically u mean that if we use enabled than fetchStatus is idle but the pending state is true?

[TkDodo]

isPending means query is loading

that’s just not true. isPending means “we have no data yet”:

https://tanstack.com/query/latest/docs/framework/react/guides/queries#query-basics

it should be like pending should be false and after enabled is true then only pending should be true

you’re looking for the derived isLoading flag, which is: isPending && isFetching

[rajivchaulagain]

ok got it. thanks

[nitzcard]

I also think it's weird behavior, +1, as I prefer better source of truth when thinking of "request is not ready".
@TkDodo , according to your explanation it sounds like isLoading is better to use than isPending in general, but I read contradicting things on the internet, can you please explain the right case, and also here.

[rajivchaulagain]

@nitzcard I think its the about our usecase like react query has gave too many options like isFetching, isInitialLoading and isPending so, its we who should decide our use case and use it our way.