useQuery, useMutation

1. 설치

npm i react-query

2. 초기세팅

최상단에 QueryClientProvider으로 감싸주고, queryClient를 생성해준다.

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      //<Home />
    </QueryClientProvider>
  );
}

3. useQuery , useMutation

내가 느낀바로 useQuery , useMutation의 차이점은 데이터를 변경하냐마냐이다.
데이터를 변경하려면 useMutation을 사용한다.

useQuery: 조회
useMutation: 등록, 수정, 삭제

우선 api폴더를 따로 생성해서 axios로 불러오는 기본 구조를 만들어줬다.
lib>api>schedule.js

import { defaultAxios } from './defaultAxios';

// 일정 조회
export const getSchedule = async (id) => {
  const { data } = await defaultAxios.get(`/schedule/${id}`);
  return data;
};

// 일정 등록
export const createSchedule = async (data) => {
  await defaultAxios.post('/schedule', {
    title: data.title,
    memo: data.memo,
    startDate: data.startDate,
    endDate: data.endDate,
    category: data.category,
  });
};

// 일정 수정
export const updateSchedule = async ({ id, info }) => {
  const { data } = await defaultAxios.put(`/schedule/${id}`, {
    title: info.title,
    memo: info.memo,
    startDate: info.startDate,
    endDate: info.endDate,
    category: info.category,
  });
  return data;
};

// 일정 삭제
export const deleteSchedule = async (id) => {
  await defaultAxios.delete(`/schedule/${id}`);
};

4. useQuery

// 기본
const { data: schedules } = useQuery(['schedules'], getScheduleList);

// 뒤에 params가 붙은건 두번째인자에 써준다. 
const { data: schedule } = useQuery(['schedule', id], () =>
    getSchedule(id),
  );

5. useMutation

useMutation은 기본적으로 첫번쨰가 useMutation을 실행할 함수, 그이후는 옵션이온다.
옵션에는 'onSuccess 성공', 'onError 에러', 'onSettled 성공여부와 관계없이 실행' 등이있다.

// 등록
const createScheduleMutation = useMutation(createSchedule, {
    onSuccess: () => {
      successMessage('success', '일정이 등록되었습니다.');
      toggleOpenSchedule(false);
      toggleOpenModal(false);
    },
    onError: (error) => {
      successMessage('error', '일정을 등록할수없습니다.');
      console.error(error);
    },
  });

// 수정
  const updateScheduleMutation = useMutation(updateSchedule, {
    onSuccess: () => {
      successMessage('success', '일정이 수정되었습니다.');
      toggleOpenSchedule(false);
      toggleOpenModal(false);
      setSelectScheduleId(undefined);
    },
    onError: (error) => {
      successMessage('error', '일정을 수정할수없습니다.');
      console.error(error);
    },
  });

// 삭제
  const deleteScheduleMutation = useMutation(deleteSchedule, {
    onSuccess: () => {
      successMessage('success', '일정이 삭제되었습니다.');
    },
    onError: (error) => {
      successMessage('error', '존재하지 않는 일정입니다.');
      console.error(error);
    },
  });