TIL #48 | React Query 컴포넌트 분리하기

1) 필요한 비동기 함수 구현하기

src > api > todos.js

• 사용할 데이터를 CRUD 할 수 있게 해주는 비동기 함수를 구현하여 export 한다.

import axios from "axios";

const SERVER_URI = "http://localhost:4000";

const getTodos = async () => {
  const response = await axios.get(`${SERVER_URI}/todos`);
  return response.data;
};

const addTodo = async (newTodo) => {
  await axios.post(`${SERVER_URI}/todos`, newTodo);
};

const removeTodo = async (id) => {
  await axios.delete(`${SERVER_URI}/todos/${id}`);
};

const switchTodo = async (payload) => {
  await axios.patch(`${SERVER_URI}/todos/${payload.id}`, {
    isDone: payload.isDone,
  });
};

export { getTodos, addTodo, removeTodo, switchTodo };

2) useQuery Hook 구현하기

src > query > useTodosQuery.js

방법 1)

• useTodosQuery의 반환값으로 구현하여 사용하기

import { useMutation } from "react-query";
import { addTodo, removeTodo, switchTodo } from "../api/todos";

const useTodosQuery = () => {
  const addMutation = useMutation(addTodo);

  const removeMutation = useMutation(removeTodo);

  const switchMutation = useMutation(switchTodo);

  return { addMutation, removeMutation, switchMutation };
};

export default useTodosQuery;

방법 2)

• useMutation()을 실행하는 함수를 생성하여 export 하여 사용하기

import { useMutation } from "react-query";
import { addTodo, removeTodo, switchTodo } from "../api/todos";


export const useAddMutation = () => useMutation(addTodo);

export const useRemoveMutation = () => useMutation(removeTodo);

export const useSwitchMutation = () => useMutation(switchTodo);

3) queryKey 객체로 구현하기

src > query > keys.constant.js

• 키 값을 객체로 저장해놓으면 나중에 수정할 때 수월해질 수 있다.

export const KEY_QUERY = {
  TODOS: "todos",
};

---

useQuery 더 간단하게 사용해보기

• 구현해놓은 QueryFn과 QueryKey 값을 import하여 간단하게 useQuery 코드를 작성하였다.

import { getTodos } from "../../../api/todos";

import { KEY_QUERY } from "../../../query/keys.onstant";

...

  const { isLoading, isError, data: todos } = useQuery(KEY_QUERY.TODOS, getTodos);

• 구현해놓은 useQuery hook을 가져와 useMutation를 사용하였다.

  const { addMutation } = useTodosQuery();

  const { mutate: addMutate } = addMutation;

• 더 간단하게는 아래와 같이 작성해도 된다.

cosnt { addMutaion: {mutate: addMutate} } = useTodosQuery();

• 생성한 mutate를 사용할 때 onSuccess와 같은 옵션을 추가해주면 된다. 이때 queryClient.invalidateQueries 사용할 수 있다.
• 앞서 구현해놓은 쿼리키도 사용해주었다.

    addMutate(newTodo, {
      onSuccess: (data) => {
        console.log("data", data);
        queryClient.invalidateQueries(KEY_QUERY.TODOS);
      },

이와 같이 컴포넌트를 분리하여 사용해주면 재사용성이 높아지고 가독성도 좋아진다는 장점이 있었다. useQuery를 사용할 때 구현할 함수가 많아진다면 꼭 분리해서 사용하는 것이 좋을 것 같다.