[프론트엔드 인턴쉽] 내역 계속 등록 시 리스트에 바로 반영시키기

서버 요청 api

// 내역 추가
export const PostHistory = async (newHistory: History) => {
  try {
    const { data } = await axiosApi.post("/history", newHistory);
    return data;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

---

타입

리스트는 리스트 타입을 사용하고

등록은 등록타입을 사용하는데

뮤테이트로 갱신하는 건 리스트니까 리스트 타입을 받아야 한다

export type HistoryList = {
  id: number;
  name: string;
  price: number;
  phone_number: string;
  description: string;
};

export type SearchKeyWord = {
  keyWord: string;
};

export type History = {
  name: string;
  price?: number | null;
  description?: string;
};

export type HistoryPostModalProps = {
  onSuccess: (data: HistoryList) => void;
};

---

리스트 뮤테이트, 리스트 변경 시 다시 가져온다

  const { mutate: historyPostMutate } = useSetMutation(getHistoryLists, [
    QUERY_KEY.historyList,
  ]);

 

내역 등록 컴포넌트에 프롭으로 뮤테이트 실행 함수를 프롭으로 전달

          {isHistoryModal && (
            <HistoryPostModal
              onSuccess={(data: HistoryList) => {
                historyPostMutate(data);
              }}
            />
          )}

 

내역 등록 컴포넌트는 프롭으로 뮤테이트 실행 함수를 프롭으로 받는다

const HistoryPostModal = ({ onSuccess }: HistoryPostModalProps) => {}

 

내역 등록 성공 시 뮤테이트 실행 함수에  인자로 새로 등록된 데이터를 전달  onSuccess(response);

  const onHistoryPostSubmitHandler: SubmitHandler<History> = async (data) => {
    console.log("폼 제출 데이터", data);

    const newHistory = data;

    try {
      const response = await PostHistory(newHistory);
      console.log("data", response);
      onSuccess(response);

      reset();
    } catch (error) {
      console.log("실패", error);
    }

    reset();
    setAmount(null);
    setRelations("");
  };

 

---

정리

1. 내역 리스트에서 historyPostMutate를 통해 데이터 추가 후 최신 데이터를 가져온다
2. 내역 추가 시 갱신되어야 하므로 내역 추가 컴포넌트에 onSuccess를 props로 전달한다
3. 새로운 내역 등록이 성공하면 onSuccess에 인자로 새로 등록한 데이터를 넘겨줌으로 내역 리스트는 해당 데이터를 추가하여 리스트를 갱신시킨다