react-query 목록 추가 (POST) 및 수정 (PUT) 테스트

목록 추가 (POST) 및 수정 (PUT) 테스트

(참고한 페이지 : https://tanstack.com/query/v4/docs/react/examples/react/optimistic-updates-typescript)

 

import styles from './styles.module.scss';
import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

export default function Study() {
	const queryClient = useQueryClient();
	
	interface AddList {
	  id: number;
	  name: string;
	  country?: string;
	}
	
	const [addCompanyName, setAddCompanyName] = useState<string>('');
	const [addCountryName, setAddCountryName] = useState<string>('');
	const [companyList, setCompanyList] = useState<[]>([]);
	async function getCompanyList() {
	  const { data } = await axios.get(`http://localhost:5000/company`);
	  return data;
	}
	const {
	  data: dataCompanyList,
	  isLoading: companyLoading,
	  isError: companyError,
	  isSuccess: companySuccess,
	} = useQuery({
	  queryKey: ['companyList', companyList],
	  queryFn: () => getCompanyList(),
	});
	
	// post
	const addList = useMutation({
	  mutationFn: () =>
	    axios.post<AddList>('http://localhost:5000/company', {
	      id: dataCompanyList ? dataCompanyList.length + 1 : 0,
	      name: addCompanyName,
	      country: addCountryName,
	    }),
	  // Always refetch after error or success:
	  onSettled: () => {
		// 목록 재호출 (get)
	    queryClient.invalidateQueries({ queryKey: ['companyList'] });
	  },
	});
	
	// put
	const modifyList = useMutation({
	  mutationFn: (number: number) =>
	    axios.put<AddList>('http://localhost:5000/company/' + (number + 1), {
	      id: number,
	      name: addCompanyName,
	      country: addCountryName,
	    }),
		onMutate: () => {
			//mutation 함수가 실행되기 전에 실행되고 mutation 함수가 받을 동일한 변수가 전달된다.
			//optimistic update 사용 시 유용한 함수이다.
		},
		onSuccess: () => {
			//mutation 이 성공하고 결과를 전달할 때 실행된다.
		},
		onError: () => {
			//mutation 이 error 를 만났을 때 실행된다.
		},
	  onSettled: () => {
        //mutation 이 성공해서 성공한 데이터 또는 error가 전달될 때 실행된다. 
        //(성공하든 실패하든 결과가 전달된다)
        // 목록 재호출 (get)
	    queryClient.invalidateQueries({ queryKey: ['companyList'] });
	  },
	});
	
	if (companyLoading) {
	  return <p>회사 목록 로딩중</p>;
	}
	if (companyError) {
	  return <p>회사 목록 에러 발생</p>;
	}

	return (
    <div className={styles.study}>
      <div>
        <div>
          <input
            type="text"
            onChange={event => setAddCompanyName(event.target.value)}
          />
          <input
            type="text"
            onChange={event => setAddCountryName(event.target.value)}
          />
          <button type="button" onClick={() => addList.mutate()}>
            회사 추가
          </button>
          <button type="button" onClick={() => modifyList.mutate(1)}>
            2번 회사 수정
          </button>
          <div>
            <ul>
              {dataCompanyList.map(company => {
                return (
                  <li key={company.id}>
                    {company.name} - {company.country}
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}