feat: useMutation post

5.react/7.react-query/json/db.json

@@ -1,34 +1,50 @@
 {
-    "todos": [
-        {
-            "id": 1,
-            "title":"吃饭",
-            "completed":true,
-            "editing":false
-
-        },
-        {
-            "id": 2,
-            "title":"睡觉",
-            "completed":false,
-            "editing":false
-
-        },
-        {
-            "id": 3,
-            "title":"打豆豆",
-            "completed":false,
-            "editing":false
-        }
-    ],
-   "posts": [
-       {
-        "id" : 1,
-        "title" : "hello react query"
-       },
-       {
-        "id" : 2,
-        "title" : "hello react query 2"
-       }
-   ]
+  "todos": [
+    {
+      "id": "1",
+      "title": "吃饭",
+      "completed": true,
+      "editing": false
+    },
+    {
+      "id": "2",
+      "title": "睡觉",
+      "completed": false,
+      "editing": false
+    },
+    {
+      "id": "3",
+      "title": "打豆豆",
+      "completed": false,
+      "editing": false
+    },
+    {
+      "id": "a77a",
+      "title": "dsafads",
+      "completed": false,
+      "editing": false
+    },
+    {
+      "id": "9790",
+      "title": "afsafsfd",
+      "completed": false,
+      "editing": false
+    },
+    {
+      "id": "7e08",
+      "title": "你好",
+      "completed": false,
+      "editing": false
+    }
+  ],
+  "posts": [
+    {
+      "id": "1",
+      "title": "hello react query"
+    },
+    {
+      "id": "2",
+      "title": "hello react query 2"
+    }
+  ]
 }

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

@@ -1,3 +1,4 @@
+import FetchTodoById from "./FetchTodoById";
 import Todo from "./Todo";
 
 function App() {
@@ -6,6 +7,8 @@ function App() {
       <header className="App-header">to do list</header>
       <hr />
       <Todo></Todo>
+      <hr />
+      <FetchTodoById></FetchTodoById>
     </div>
   );
 }

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

@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import React from "react";
+
+function getTodoById({ queryKey }) {
+  return axios.get("/todos/" + queryKey[1]);
+}
+
+export default function FetchTodoById() {
+  const { data } = useQuery({
+    queryKey: ["todosId", 2],
+    queryFn: getTodoById,
+  });
+  return (
+    <div>
+      <pre>{JSON.stringify(data)}</pre>
+    </div>
+  );
+}

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

@@ -1,27 +1,67 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
+import { useState } from "react";
 async function fetchTodos() {
   try {
     return axios.get("/todos");
   } catch (error) {
     throw new Error(error);
   }
 }
+function addTodo(todo) {
+  console.log(todo);
+
+  try {
+    axios.post("/todos", todo);
+  } catch (error) {
+    console.log(error);
+  }
+}
+
 function Todo() {
+  const [isLoad, setLoad] = useState(false);
+  const [title, setTitle] = useState("");
+  const queryClient = useQueryClient()
   const { isError, isLoading, error, data } = useQuery({
     queryKey: ["todos"],
     queryFn: fetchTodos,
+    refetchOnWindowFocus: true,
+    enabled: isLoad,
+    staleTime: 5000,
+  });
+  const { mutate } = useMutation({
+    mutationFn: addTodo,
+    onSuccess: () => {
+      setTitle("");
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
   });
 
   if (isLoading) return <p>Loading...</p>;
   if (isError) return <p>{error.message}</p>;
 
   return (
     <section className="main">
+      <button onClick={() => setLoad(true)}>请求状态</button>
+      <input
+        placeholder="请输入"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        onKeyUp={(e) => {
+          if (e.code === "Enter") {
+            mutate({ title, completed: false, editing: false });
+          }
+        }}
+      ></input>
       <ul className="todo-list">
-        {data.map((todo) => (
-          <li key={todo.id} className={todo.completed ? "completed" : ""}>
-            {todo.title}
+        {data?.map((todo) => (
+          <li key={todo.id}>
+            <div className="view">
+              <input className="toggle" type="checkbox" />
+              <label>{todo.title}</label>
+              <button className="destroy"></button>
+            </div>
+            <input className="edit" />
           </li>
         ))}
       </ul>