왜 댓글을 작성했는데 새로고침을 하기 전까지 업데이트가 되지 않는걸까?

1번째 시도

결과:실패

onMutate 옵션을 사용하여 mutate 함수가 호출된 직후에 새로운 데이터를 다시 가져오도록 해보았다
실제로는 onMutate 옵션을 사용하는 것으로만으로는 댓글을 작성하자마자 즉시 업데이트되지는 않습니다. onMutate 옵션은 mutate 함수가 호출된 직후에 실행되는 콜백 함수이지만, useQuery 훅이 리턴하는 data는 axios.get 요청을 기반으로 한 데이터로 초기화됌

   const { data: cardData, isLoading, isError, refetch } = useQuery(
        ['card', id],
        () => axios.get(`http://52.79.242.223/api/posts/${id}`).then((res) => res.data),
        {
            staleTime: 10000, // 10초 동안 만료된 데이터를 보여줌
            onMutate: () => {
                // 댓글 작성 시 새로운 데이터를 가져오도록 mutate 함수 호출
                refetch();
            },
        }
    );

2번째 시도

결과:성공

onMutate 옵션은 주로 mutate 함수가 성공적으로 호출되었을 때 데이터를 업데이트하는 등의 사후 작업을 수행할 때 사용됩니다. 따라서 댓글을 작성하자마자 즉시 업데이트를 보고 싶다면, 아래와 같이 onMutate 옵션을 사용하는 것이 아닌, 댓글 작성 성공 후에 refetch 함수를 호출하여 새로운 데이터를 가져오도록 해야 합니다:

    // 댓글 작성 성공 후 호출되는 함수
    const handleCommentSubmit = async (e) => {
        e.preventDefault();
        try {
            // 댓글 작성 요청
            const accessToken = getCookie("accessToken");
            console.log(accessToken);
            await axios.post(
                `http://52.79.242.223/api/comments`,
                {
                    postId: id,
                    content: commentText
                },
                {
                    headers: {
                        Accept: "*/*",
                        Authorization: `${accessToken}`,
                    },
                }
            );

            // 댓글 작성 후 새로운 데이터를 가져오도록 refetch 함수 호출
            refetch();

            // 댓글 작성 후 폼 초기화
            setCommentText('');
        } catch (error) {
            console.log('댓글 작성 실패', error);
        }
    };