[7/15 TIL]리액트 쿼리 훅 인자값 넘겨주기

useMutation을 사용할 때 인자를 넘겨주는 방법을 찾아보느라 헤맸다. 리액트 연습 주차에 리액트 쿼리로 id 값을 보내는데 실패했다. 이번에도 같은 문제에 봉착. 처음에는 리덕스 청크로 우회하려했는데 기획도 엎어지고(엎어지기만 하고~) 해야할 일이 오리무중이 되어버린 기분에 집중이 안됐다. 수정요청이 안되는데 청크로 바꾸다가 리액트 쿼리로 다시 바꾸고 반복하면서 정리가 안된다.

결국 이렇게 헤매는 나를 본 친한 크루 분이 챗GPT 유료 버전을 사용해서 useMutation을 사용해 인자 값을 넘겨주는 방법을 물어봐 주셨다.

이렇게 쓰면 params 값을 받아서 넘겨줄 수 있다.

useMutation 인자값 넘겨주기

productUpdateContainer.jsx

const queryClient = useQueryClient();
const mutation = useMutation((formData) => updateTradingItem(id, formData), {
        onSuccess: () => {
            queryClient.invalidateQueries('tradingItem');
        },
    });

tradingItem.js

const updateTradingItem = async (id, formData) => {
    try {
        const config = {
            headers: {
                'Content-Type': 'multipart/form-data',
            },
        };
        await axios.put(`${process.env.REACT_APP_SERVER_URL}/items/${id}`, formData, config);
        alert('상품등록에 성공했습니다');
    } catch (error) {
        alert('상품등록에 실패했습니다.');
    }
};

useQuery 인자값 넘겨주기

이건 params 값을 보내 요청하는 방법을 헤맸다. 요청을 보냈을 때 어떤 값이 안 읽히는지 확인하는 과정이 어려웠다.

const { data } = useQuery('items', () => getTradingItems(currentPage));

const getTradingItems = async (currentPage) => {
    try {
        const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}/items`, {
            params: { page: currentPage },
        });
        return response.data;
    } catch (error) {
      //
    }
};