[SOLVED] isLoading is always false on useMoralisQuery

[mikiekwoods]

Hi it seems to me the the useMoralisQuery does not work properly and always returns false.

I found this topic where CryptoBoy asks if there’s something wrong here in _useResolveAsyncCall.ts

Bug in isLoading when using useMoralisCloudFunction in react

isLoading hook only works as expected when I fetch the data for the first time. When I call the fetch function subsequently the isLoading hook is not getting updated properly. const { fetch, data, error, isLoading } = useMoralisCloudFunction( "topScores", { limit }, { autoFetch: false } );

  const isLoading =
    isFetching &&
    data == null &&
    (Array.isArray(data) ? data.length === 0 : true);

It seems to me that it should be or operators

  const isLoading =
    isFetching ||
    data == null ||    (Array.isArray(data) ? data.length === 0 : true);

Why would data be null and array?

[mikiekwoods]

Thinking about it, maybe not or operators. But I think something is wrong.

[mikiekwoods]

Is this correct? …sorry I don’t have time to test right now, but I think this shows the point…

const dataIsEmpty = ( data == null ) ? true : (Array.isArray(data)  && data.length === 0 );
const isLoading = isFetching && dataIsEmpty;

[l.a.abels]

This is my console log when initially loading the page.

Custom isLoading false
Moralis isLoading false
Moralis isFetching false
...
Custom isLoading false
Moralis isLoading false
Moralis isFetching false
...
Custom isLoading true
Moralis isLoading false
Moralis isFetching true
...
Custom isLoading true
Moralis isLoading false
Moralis isFetching true
...
Custom isLoading true
Moralis isLoading false
Moralis isFetching true
...
Custom isLoading true
Moralis isLoading false
Moralis isFetching true
...
Custom isLoading true
Moralis isLoading false
Moralis isFetching true
...
Custom isLoading true
Moralis isLoading false
Moralis isFetching true
...
Custom isLoading false
Moralis isLoading false
Moralis isFetching true
...
Custom isLoading false
Moralis isLoading false
Moralis isFetching false

[mikiekwoods]

@l.a.abels

Custom isLoading true
Moralis isLoading false
Moralis isFetching true

Thanks for testing it! Sounds like this solution works. Hopefully they will update React Moralis.

[YosephKS]

Hey use useMemo next time so it can be updated whenever the isFetching and data value is updated, otherwise it’ll stay that way. Nothing wrong will the docs

[mikiekwoods]

@YosephKS

Nothing wrong will the docs

I’m not sure what you mean if you do not explain. Why is nothing wrong? There are ways to get around the way it’s written, but this part of the code is useless as of now:

(Array.isArray(data) ? data.length === 0 : true);

[mikiekwoods]

Erno has fixed the issue on React Moralis

isLoading only works on the first fetch (solution in comments)

[YosephKS]

It will update. each time the state changes as shown in the console.log above for isFetching. However, you defined isLoading = isFetching && data == null ... which will only evaluate the value upon initial rendering.

If you would like the isLoading value to update when isFetching and data update, you need to define them with useMemo with isFetching and data as the dependencies.

const isLoading = useMemo(() =>
    isFetching &&
    data == null &&
    (Array.isArray(data) ? data.length === 0 : true)
, [isFetching, data])

Otherwise, if you defined it as so, nothing will change after first render

[mikiekwoods]

Yes, you are right, but this is not my code. This was the code in React Moralis, created by your team. However it was updated yesterday.

[YosephKS]

ohhhh I see gotcha gotcha, my bad man get the impression that you defined it yourself

Thanks for reaching out looks like it was fixed