react-query 모듈화 - Custom Hooks

문제점

• useQuery나 useMutate, useQueryClient 등 react-query에서 자주 쓰이는 훅을 모듈화 시킬 때, 아래처럼 컴포넌트나 Custom Hooks 밖에서 export 시키면 오류가 발생한다!!

import { useMutation, useQuery, useQueryClient } from "react-query";
import api from "../utils/api";

export const queryClient = useQueryClient();

export const { data, isSuccess } = useQuery(["my_board"], () =>
  api.get("/api/board")
);
export const { mutate } = useMutation(
  (board_id) => api.delete(`/api/board/${board_id}`),
  {
    onSuccess: () => {
      queryClient.invalidateQueries("board_list");
    },
  }
);

• React Hook "useQuery" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
• React Hook "useQueryClient" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
• React Hook "useMutation" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
• 위와 같은 오류가 발생하는데 리액트를 사용할때 React Hooks들을 컴포넌트나 커스텀 훅 밖에서 사용하면 오류가 발생한다고 알려주는 에러다. 
• 당연한 에러지만 순간 useQuery, useMutation과 같은 훅도 리액트 훅이라는 것을 간과했다 ;;

그래서 react-query의 훅들을 모듈화하고 싶으면 커스텀 훅으로 작성해서 리턴하자!!

import { useMutation, useQuery, useQueryClient } from "react-query";
import api from "../utils/api";
import axios from "axios";

const useBoardQuery = () => {
  const queryClient = useQueryClient();

  const { data: getBoard, isSuccess: getBoardIsSuccess } = useQuery(
    ["board_list"],
    () => axios.get("/api/board/")
  );

  const { mutate: deleteBoardMutation } = useMutation(
    (board_id) => api.delete(`/api/board/${board_id}`),
    {
      onSuccess: () => {
        queryClient.invalidateQueries("board_list");
      },
    }
  );
  return { getBoard, getBoardIsSuccess, deleteBoardMutation };
};