React-Query 셋팅 및 정리

셋팅

기본적으로 app.js등 전체를 감싸 줄 수 있는 곳에 리액트 쿼리를 감싸준다.

const queryClient = new QueryClient()
를 선언하여 리액트 쿼리에 여러 조건을 넣을 수 있다. 이는 알아서 잘 잘 잘 넣도록하자! 회사마다 규격이 다르기 때문!

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import { RecoilRoot } from "recoil";

function App() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        // suspense: true,
        refetchOnWindowFocus: false,
        retry: 0,
        onSettled: (data, error) => {
          if (error) {
            message.error(error.errorMsg);
          }
        },
      },
      mutations: {
        onSettled: (data, error) => {
          if (error) {
            message.error(error.errorMsg);
          }
        },
      },
    },
  });
  return (
      <QueryClientProvider client={queryClient}>
              <Route path="/" element={<CalndarInfo />} />
      </QueryClientProvider>
  );

파일은 api 폴더에 연결 방식을 정의하며
service파일에서 인덱스를 임포트 하는 식으로 한다.

axiosInstance.js

import axios from "axios";

const axiosInstance = axios.create({
  headers: {
    Accept: "application/json",
    Authorization: "",
  },
});

axiosInstance.interceptors.response.use(
  (response) => ({ ...response.data }),
  (error) => {
    return Promise.reject({ ...error.response.data });
  }
);

export const callApi = async ({ url, method, data, params }) => {
  return await axiosInstance({
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
    },
    url,
    method,
    data,
    params,
  });
};

export const formApi = async ({ url, method, data, params }) => {
  return await axiosInstance({
    headers: {
      "Content-Type": "multipart/form-data",
    },
    url,
    method,
    data,
  });
};

index.js

export * from "@/common/axios/axiosInstances";

calendar.js

import { callApi } from "../../api/axiosInstance";

export const onLoadData = async () => {
  return await callApi({
    url: "/api/v1/calendar/testselect",
    method: "GET",
    data: { param: {} },
  });
};

export const submit = async (data) => {
  return await callApi({
    url: "/api/v1/calendar/testinputdate",
    method: "POST",
    data: { param: data },
  });
};

USEQUERY

처음 시작하자마자 가져오는 쿼리문

const 안에 중괄호에는 여러가지가 들어갈 수 있다 이는 리액트 쿼리 공식문서를 통해 확인 가능하다
그 중
data : 받아져 오는 값
refetch : 다시 받아오는 값으로 이를 규격에 맞게 선언하여준다.
useQuery() 소괄호 안에는 쿼리문을 연동시켜준다.

//연동할 쿼리문
import { onLoadData } from "../service/portal/calendar";
//처음 랜더링 시 모든 정보를 가져오는 리액트 쿼리
const { data: dataOnLoadData, refetch: refetchOnLoadData } = useQuery(
    "onLoadData",
    onLoadData
  );

---

USEMUTATION

useMutation을 통해서 쿼리문을 가져오며 업데이트 할 data와 mutate 성공시 들어오는 bool타입 값인 isSuccess를 선언(이는 나중에 조건문에 사용할 예정)한다.

 const {
    data: dataSubmit,
    mutate: mutateSubmit,
    isSuccess: isSuccessSubmit,
  } = useMutation("submit", submit);

submit 버튼을 누르면 실행하게되는 onSubmit에는 input창에서 가져올 useState값인 userId와 userMemo calData값들을 가져와 JSON양식인 key value를 지정하여 입력하여 mutate해준다. (이러면 값이 전송됨!)

  const onSubmit = () => {
    mutateSubmit({
      user_id: userId,
      todo_memo: userMemo,
      todo_date: calDate,
    });
  };

useEffect를 통해서 data와 isSuccessSubmit 그리고 앞에 선언한 useQuery에 있던 refetch를 배열에 넣어주며 인식하고

isSuccessSubmit && dataSubmit 모두 있다면(datasubmit은 param값으로 내가 입력한 값들이 들어간다.) refetch를 실행하여 데이터를 다시 불러와 수동으로 최신화를 시켜준다

 useEffect(() => {
    if (isSuccessSubmit && dataSubmit) {
      console.debug("## submit refetch => ", dataSubmit);
      refetchOnLoadData();
    }
  }, [isSuccessSubmit, dataSubmit, refetchOnLoadData]);

---

전체 코드

const InputDataModal = (props) => {
  //부모로 받을 props값
  const { close, refetchOnLoadData } = props;
  //날짜를 저장할 context
  const context = useContext(UserContext);
  const { calDate } = context;
  //유저의 정보와 값을 담을 useState
  const [userId, setUserId] = useState();
  const [userMemo, setUserMemo] = useState();

  const onChageUserId = (e) => {
    setUserId(e.target.value);
  };
  const onChageMemo = (e) => {
    setUserMemo(e.target.value);
  };

  const {
    data: dataSubmit,
    mutate: mutateSubmit,
    isSuccess: isSuccessSubmit,
  } = useMutation("submit", submit);
  

  const onSubmit = () => {
    mutateSubmit({
      user_id: userId,
      todo_memo: userMemo,
      todo_date: calDate,
    });
  };

  useEffect(() => {
    if (isSuccessSubmit && dataSubmit) {
      console.debug("## submit refetch => ", dataSubmit);
      refetchOnLoadData();
    }
  }, [isSuccessSubmit, dataSubmit, refetchOnLoadData]);

나만 알아보면 돼~