diff --git a/5.react/7.react-query/src/Parallel.js b/5.react/7.react-query/src/Parallel.js new file mode 100644 index 0000000..95a5095 --- /dev/null +++ b/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 ( +
+
+        {JSON.stringify(
+          result.map((v) => v.data),
+          null,
+          2
+        )}
+      
+
+ ); +} + +export default Parralle; diff --git a/5.react/7.react-query/src/Todo.js b/5.react/7.react-query/src/Todo.js index 8013fd6..e71bf0e 100644 --- a/5.react/7.react-query/src/Todo.js +++ b/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() { ))}