feat: finish react query

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

@@ -0,0 +1,36 @@
+import { useQueries } from "@tanstack/react-query";
+import axios from "axios";
+import React from "react";
+
+async function fetchTodos() {
+  return axios.get("/todos");
+}
+async function fetchPosts() {
+  return axios.get("/posts");
+}
+
+function Parralle() {
+  const result = useQueries({
+    queries: [
+      { queryKey: ["anotherTodos"], queryFn: fetchTodos },
+      {
+        queryKey: ["anotherPosts"],
+        queryFn: fetchPosts,
+      },
+    ],
+  });
+
+  return (
+    <div>
+      <pre>
+        {JSON.stringify(
+          result.map((v) => v.data),
+          null,
+          2
+        )}
+      </pre>
+    </div>
+  );
+}
+
+export default Parralle;

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

@@ -4,6 +4,7 @@ import { useState } from "react";
 import "./todo.css";
 import Footer from "./Footer";
 import { useTodos } from "./hooks/useTodos";
+import Parallel from "./Parallel";
 
 function addTodo(todo) {
   console.log(todo);
@@ -78,6 +79,7 @@ function Todo() {
         ))}
       </ul>
       <Footer />
+      <Parallel></Parallel>
     </section>
   );
 }