feat: start react query

5.react/7.react-query/src/App.js

@@ -1,8 +1,11 @@
+import Todo from "./Todo";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">nihao</header>
+      <header className="App-header">to do list</header>
+      <hr />
+      <Todo></Todo>
     </div>
   );
 }

5.react/7.react-query/src/Todo.js

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+async function fetchTodos() {
+  try {
+    return axios.get("/todos");
+  } catch (error) {
+    throw new Error(error);
+  }
+}
+function Todo() {
+  const { isError, isLoading, error, data } = useQuery({
+    queryKey: ["todos"],
+    queryFn: fetchTodos,
+  });
+
+  if (isLoading) return <p>Loading...</p>;
+  if (isError) return <p>{error.message}</p>;
+
+  return (
+    <section className="main">
+      <ul className="todo-list">
+        {data.map((todo) => (
+          <li key={todo.id} className={todo.completed ? "completed" : ""}>
+            {todo.title}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default Todo;