React-query is returning data as undefined and isLoading is always true

Question

on react native in a random scenario react-query get stuck in loading state where isLoading is always true and the data is undefined.

I checked the cache using the flipper-react-query-native plugin, I found that the data is saved in the cache but it's not returned.

can anyone help me?

ScreenShot :

Reinforce

can you add screenshot? – Biosphere

N MZ I've added the screenshot, by the way, the API call is also successful and we get the response – Reinforce

Answer 1

I scratched my head for a long time on this one. This may be the solution for you! This resolved things on my end. I realized after testing out any promise, they'd never resolve. That's when I found this github issue.

https://github.com/facebook/react-native/issues/31558#issuecomment-878342213

Aegisthus

Actually, I fixed the issue by fixing the implementation of my code, I was passing the mutate function as route params which caused this problem. I found out that passing non-serializable variables in route params will create some problems in react native app. – Reinforce

Ah, yep. That'll do it. Glad you were able to solve the problem! – Aegisthus

Answer 2

You can use this approch in your code:

  const { isLoading, data, isFetching } = useQuery(...)
  const loading = isLoading && isFetching;

Now you can obtain the current loading state by performing this action.

Whirlwind