i am facing issue with the react-query Devtools

Question

I am new to react-query, I am trying to fetch data from the post method on initial load, it works but react-query dev tools don't show my call. can anyone tell me what the issue is? am I doing wrong something

const [snapshotData, setSnapShotData] = useState([]);

  const snapshotFunc = useCallback(async () => {
    const data = {
      L3: null,
      L4: null,
    };
    await axios
      .post("/dashboard/snapshot/", data)
      .then((res) => setSnapShotData(res.data));
  }, []);

  const {  isError, mutate } = useMutation(snapshotFunc, {
    retry: 3
  });
  

  useEffect(() => {
    mutate();
  }, [mutate]);

Answer 1

The devtools only show queries, not mutations, as mutations are generally triggered imperatively.

What I'd like to point out is that you likely don't need the snapshotData local state, because react-query will return the state as the result of the mutation in the data field. Also, you don't have to wrap mutation functions in useCallback . But it is important that you return the result of the mutation:

const snapshotFunc = () => {
  const data = {
    L3: null,
    L4: null,
  };
  return axios.post("/dashboard/snapshot/", data)
};

const { data, isError, mutate } = useMutation(snapshotFunc, {
  retry: 3
});
  

useEffect(() => {
  mutate();
}, [mutate]);