useQuery isLoading state stuck on true

[windward-hive]

Hi, So i have a useQuery hook which is configured to have a stale time of 5 minutes. Problem is if I manually navigate to the page by entering the url in the search bar, on the first attempt it shows the loading state and then the next time it displays my data. Sometimes not always on the second attempt, it could take 3-5 page refreshes before it displays the data. It is successfully making the network request and fetching the data and i can see the data in the devtools.
How can i resolve this?

export const usePosts = <TData = PostsResponse>(page: number) => {
  const options: UseQueryOptions<PostsResponse, AxiosError> = {
    keepPreviousData: true,
    staleTime       : 1000 * 60 * 5
  };
  return useQuery([ "posts", page ], () => fetchPosts(page), options);
};

  const { data, isLoading, isPreviousData } = usePosts(page);

  const Loading = <div>Loading...</div>;

  if (isLoading) {
    return Loading;
  }

[windward-hive]

[VikaramjitSinghGorraya]

Hi, were you able to find a solution for this? I am also facing the same issue.

[nawfalhaddi]

@TkDodo I noticed this issue is random, but what happens is the observer doesn't update the arguments after receiving the response from the API call

[eminvergil]

Hi, I have the same issue. I am using "@tanstack/react-query": "^4.0.10". Is there a solution to this problem ?

[hungtp1996nd]

So sweet, thanks for your support

[abdulfatahi]

if (isLoading && isFetching)

Thanks for this

[ibreaker14]

You can substitute if(isLoading && isFetching) with isInitialLoading. It does the same thing under the hood.

https://tanstack.com/query/v4/docs/react/guides/disabling-queries

[mathura333]

@TkDodo Is this a bug or expected behavior?
This is happening randomly

"@tanstack/react-query": "^4.16.1"

[annguyensyncly]

isLoading && isFetching : All true. fuc atom

[bogdanq]

"@tanstack/react-query": "^4.2.3" - same problem

[A-Ostrovnyy]

"@tanstack/react-query": "^4.32.0" - same problem 😢

[TkDodo]

It's likely this chromium related issue:

• useQuery not initiating network request suddenly on macOS Ventura 13.4.1 (Apple M1) until restart #5679

which we have worked around in v5. But without you showing some more information (e.g. what the fetchStatus of your query is), it's impossible to tell.

[danielR2001]

"@tanstack/react-query": "^5.36.0" - same problem 😢
Some queries are randomly stuck on 'stale' and data = null
even though the query function got a result with data.

[danielboso]

I had this problem. I discovered what I think is not a good solution, but it's working. I realized that if I set a state (I called enabled), and was set to false, on useEffect I can change to true. I have forwarded this state into the enabled config of the query

[stokedout]

Do you have an example?

[DBarbero]

Same problem with "4.0.10".

This is my workaround, hope it helps:

Declare a isMounted initialised to false
Use the useEffect hook to set it to true
Pass it to useQuery enabled option
Now isLoading should work as expected

const [isMounted, setIsMounted] = useState<boolean>(false)

const { isLoading } = useQuery({
    queryKey: ['get-x],
    queryFn: service.getX,
    enabled: isMounted,
})

useEffect(() => {
    setIsMounted(true)

    return () => {
        setIsMounted(false)
    }
}, [])