Moved fetch query to own function

src/Components/Api/Api.tsx

@@ -0,0 +1,7 @@
+export function GetNotes() {
+  return fetch("http://localhost:8000/api/v1/notes/").then((res) => {
+    const result = res.json();
+    console.log();
+    return result;
+  });
+}

src/Components/Notes/Notes.tsx

@@ -6,20 +6,11 @@ import Note from "../Note/Note";
 import { Button } from "@mui/material";
 import axios from "axios";
 import { useQuery } from "react-query";
+import { GetNotes } from "../Api/Api";
 
 export default function Notes() {
   const navigate = useNavigate();
-  const {
+  const { data: notes, isLoading, error } = useQuery("notes", GetNotes);
-    data: notes,
-    isLoading,
-    error,
-  } = useQuery("notes", () => {
-    return fetch("http://localhost:8000/api/v1/notes/").then((res) => {
-      const result = res.json();
-      console.log();
-      return result;
-    });
-  });
   if (error) {
     return (
       <div style={styles.note}>