MSW 와 React-Query - 1

hojoon·2023년 8월 8일

리액트 리액트쿼리 프론트엔드

리액트

목록 보기

7/10

드디어 리액트 쿼리 제대로 공부해서 블로그 쓴다.

우선 가볍게 api 만들어서 데이터를 받아오기 위해서 MSW를 사용해 봤다.

MSW 세팅

npm install msw --save-dev
mkdir src/mocks (src 폴더 내에 mock폴더 생성)
browser.js, handler.js 파일 생성

browser.js

import { setupWorker } from "msw";
import { handlers } from "./handler";

export const worker = setupWorker(...handlers);

handler.js

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.워커 시작

index.js

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>
);

여기까지 MSW 세팅

React-Query

App.js

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>
  );
};

QuickStart.js

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>
  );
}

api들은 ??

myapi.js 에서 export 해줌

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);
};