useQuery returning 404 when no data received from axios request

[joshtheflame]

I just started learning react.js and using reactQuery. I am using useQuery to fetch all data and rendering on my page which works fine when there is data in the database but with no rows in table and no data returned from the API call its showing 404. Please advise what am I doing wrong?

Console when there is a record in database:

Console when there are no records in database:

My code is like this of API module:

import axios from "axios";

//Initialize AXIOS instance
const Tasks_Api = axios.create({
  baseURL: "http://localhost:3333",
});

//Fetch all tasks via AXIOS from backend
export const getTasks = async () => {
  const response = await Tasks_Api.get("api/tasks/");
  return response.data;
};

Tasks.jsx of react.js

import { useContext, useEffect, useState } from "react";
import Task from "./Task";
import { useQuery } from "react-query";
import { getTasks } from "../api/Tasks_Api";
import { DataContext, DataProvider } from "../context/DataContext";

const Tasks = ({ task }) => {
  const { mystate, setState } = useContext(DataContext);

  const {
    status,
    isError,
    error,
    isFetching,
    data: mydata = [],
  } = useQuery("TasksData", getTasks);

  useEffect(() => {
    if (isError) {
      return <h2>{error.message}</h2>;
    }
    if (status === "success") {
      setState(...mystate, mydata);
    }
  }, [status, mydata]);

  return (
    <>
      {mystate.length < 1
        ? "No tasks available"
        : mystate.map((item, index) => <Task key={item.id} task={item} />)}
    </>
  );
};

export default Tasks;

Error message on console when table has no rows and api returning no values

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
response
: 
{data: {…}, status: 404, statusText: 'Not Found', headers: AxiosHeaders, config: {…}, …}
stack
: 
"AxiosError: Request failed with status code 404\n    at settle (http://localhost:3000/node_modules/.vite/deps/axios.js?v=257535e8:1185:12)\n    at XMLHttpRequest.onloadend (http://localhost:3000/node_modules/.vite/deps/axios.js?v=257535e8:1409:7)"
[[Prototype]]

[TkDodo]

Your useEffect is wrong. You can't return JSX from an effect and expect it to be rendered on the screen. You probably don't need useEffect

[joshtheflame]

I have removed it already as I was just trying different stuff but after removal "if (isError) { return

{error.message}

; } I am getting the following so is it ok to get such messages on console?

[TkDodo]

the console logging is expected in dev mode because react-query logs failed requests to the console.

[joshtheflame]

Thank you for your patience with a guy like me who is new to react world and trying hard to learn. Appreciate your guidance and support.