우선 가볍게 api 만들어서 데이터를 받아오기 위해서 MSW를 사용해 봤다.
import { setupWorker } from "msw";
import { handlers } from "./handler";
export const worker = setupWorker(...handlers);
import { rest } from "msw";
const todos = [
{
id: "1",
title: "jimmy",
},
{ id: "2", title: "jimmy2" },
{ id: "3", title: "jimmy3" },
{ id: "4", title: "jimmy4" },
{ id: "5", title: "jimmy5" },
];
export const handlers = [
rest.get("http://localhost:3000/api/todos", async (req, res, ctx) => {
return res(ctx.json(todos));
}),
rest.post("http://localhost:3000/api/todo", async (req, res, ctx) => {
const { todo } = req.body;
console.log(JSON.stringify(todo));
todos.push(todo);
return res(ctx.json(todos));
}),
];
npx msw init <PUBLIC_DIR> --save
4.워커 시작
if (process.env.NODE_ENV === "development") {
const { worker } = require("./mocks/browser");
worker.start();
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
import { QueryClient, QueryClientProvider } from "react-query";
import Example from "./ReactQuery/Example";
import QuickStart from "./ReactQuery/QuickStart";
const queryClinet = new QueryClient();
function App() {
return (
<div className="App">
<QueryClientProvider client={queryClinet}>
<Example></Example>
<QuickStart></QuickStart>
</QueryClientProvider>
</div>
);
}
export default App;
2.Example.js
import React from "react";
import { useQuery } from "react-query";
export default function Example() {
return <Page></Page>;
}
const Page = () => {
const { isLoading, error, data } = useQuery("repoData", () =>
fetch("https://api.github.com/repos/tannerlinsley/react-query").then(
(res) => res.json()
)
);
if (isLoading) return "Loading...";
if (error) return "An error has occurred: " + error.message;
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>👀 {data.subscribers_count}</strong>{" "}
<strong>✨ {data.stargazers_count}</strong>{" "}
<strong>🍴 {data.forks_count}</strong>
</div>
);
};
const queryClinet = useQueryClient() 를 사용하면 app밖에서 감싸고 있는 쿼리 클라이언트를 가져올 수 있다.
mutation은 쿼리키 없이 postTodo로 요청을 보냈고 요청이 성공하면 유즈쿼리로 매핑하는 todos라는 키를 가진 값의 다 invalidate해라.
import React from "react";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { getTodos, postTodo } from "./myapi";
export default function QuickStart() {
const queryClinet = useQueryClient(); //App밖에서 감싸고 있는 쿼리 클라이언트를 가져올 수 있다.
const query = useQuery("todos", getTodos);
const mutation = useMutation(postTodo, {
onSuccess: () => {
queryClinet.invalidateQueries("todos");
},
});
if (query.isLoading) {
return "Loading...";
}
if (query.error) {
return "Error...";
}
//mutation은 쿼리키 없이 postTodo로 요청을 보냈고 요청이 성공하면 유즈쿼리로 매핑하는 todos라는 키를 가진 값의 다 invalidate해라.
return (
<div>
<ul>
{query.data.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
<button
onClick={() => {
mutation.mutate({
id: Date.now(),
title: "Learn React-Query",
});
}}
>
ADD TODO
</button>
</div>
);
}
import axios from "axios";
export const getTodos = () => {
return axios.get("/api/todos").then((res) => res.data);
};
export const postTodo = async (todo) => {
return await axios.post("/api/todo", { todo }).then((res) => res.data);
};