autoFetch:false ignored for useMoralisQuery

Moralis General
#1

Hi all,
I am doing some more involved query caching in my app and as a result, I gave a very close look at each individual query made through a React App.

I found that the following code from the documentation :

import { useMoralisQuery } from "react-moralis";

export default function App() {
  const { fetch } = useMoralisQuery(
    "Monster",
    (query) => query.equalTo("ownerName", "Aegon"),
    [],
    { autoFetch: false }
  );

  const basicQuery = async () => {
    const results = await fetch();
    alert("Successfully retrieved " + results.length + " monsters.");
    // Do something with the returned Moralis.Object values
    for (let i = 0; i < results.length; i++) {
      const object = results[i];
      alert(object.id + " - " + object.get("ownerName"));
    }
  };

  return <button onClick={basicQuery}>Call The Code</button>;
}

Essentially ignore the autoFetch: false and does perform an auto fetch upon mounting. The other hooks (useMoralisCloudFunction) I tested in Moralis works correctly (with regard to this option).

I resorted NOT to use useMoralisQuery as a result and making my own direct call to Moralis.Query as this makes extra API calling that defeats the purpose of caching.

Just sharing with the team to get this fixed. Lost an afternoon on this.

Jerome

#2

It doesn’t. You can verify that by checking simply

const { fetch, data } = useMoralisQuery(
    "Monster",
    (query) => query.equalTo("ownerName", "Aegon"),
    [],
    { autoFetch: false }
  );

  useEffect(() => {
    console.log(data);
  }, [data]);

You might need to do some checks on data before rendering something.

#3

Did you check the network tab of your browser? this is where I see an API call.

#4

Yes I checked and no monster call in the networks.Here’s a look