낙관적 업데이트로 사용자 경험을 개선해보자!

import React from 'react';

interface Props {
  options: string[];
  selectedOption: string;
  onChange: (option: string) => void;
}

const updateSelectedOptionApi = async (newOption: string) => {
  try {
    const response = await fetch('/api/updateSelectedOption', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ newOption }),
    });
    if (!response.ok) {
      throw new Error('투표 선택지 수정 오류 발생');
    }
    alert(`투표한 선택지는 : ${newOption}`);
  } catch (error) {
    console.error('API error:', error);
    alert('투표 선택지 수정 중 오류가 발생했어요');
    throw error;
  }
};

export default function VoteOptionList({ options, selectedOption, onChange }: Props) {
  const handleOptionClick = async (option: string) => {
    onChange(option); // 선택한 선택지 바로 반영

    try {
      await updateSelectedOptionApi(option); // 선택한 선택지 수정 API 요청 호출
    } catch (error) {
      console.error('투표 선택지 수정 오류:', error);
      onChange(selectedOption); // 업데이트 실패 시 선택지 원래대로 돌리기
    }
  };

  return (
    <VoteListContainer>
      {options.map((option, index) => (
        <VoteItem key={index} onClick={() => handleOptionClick(option)}>
          <OptionRadio
            type="radio"
            name="voteOption"
            value={option}
            checked={selectedOption === option}
            onChange={() => handleOptionClick(option)}
          />
          <OptionLabel>{option}</OptionLabel>
        </VoteItem>
      ))}
    </VoteListContainer>
  );
}

import React, { useState } from 'react';
import VoteOptionList from './VoteOptionList';

function App() {
  const options = ['취업하기', '창업하기', '대학원 진학하기'];
  const [selectedOption, setSelectedOption] = useState<string>(options[0]);

  const handleOptionChange = (option: string) => {
    setSelectedOption(option); // 선택한 선택지를 수정
  };

  return (
    <div>
      <h1>진로가 고민됩니다🤔🥺</h1>
      <VoteOptionList
        options={options}
        selectedOption={selectedOption}
        onChange={handleOptionChange}
      />
      <p>투표한 선택지: {selectedOption}</p>
    </div>
  );
}

export default App;

const handleOptionClick = async (option: string) => {
  onChange(option); // 선택한 선택지 바로 반영

  try {
    await updateSelectedOptionApi(option); // 선택한 선택지 수정 API 요청 호출
  } catch (error) {
    console.error('투표 선택지 수정 오류:', error);
    onChange(selectedOption); // 업데이트 실패 시 선택지 원래대로 돌리기
  }
};

import { useMutation, useQueryClient } from '@tanstack/react-query';
// 선택지 수정 API 요청에 쓰이는 fetch 메서드
export async function updateSelectedOptionApi(newOption: string): Promise<void> {
  const response = await fetch('/api/updateSelectedOption', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ newOption }),
  });

  if (!response.ok) {
    throw new Error('Failed to update selected option');
  }
}
// 선택지 수정 쿼리
export const useEditVote = (postId: string) => {
  const queryClient = useQueryClient();
  const queryKey = ['posts', postId, 'option'];

  const { mutate, isLoading, isError, error } = useMutation(
    (newOption: string) => updateSelectedOptionApi(newOption),
    {
      onMutate: async (newOption: string) => {
        // 선택지 데이터에 대한 모든 퀴리요청을 취소하여 이전 서버 데이터가 낙관적 업데이트를 덮어쓰지 않도록 함 -> refetch 취소시킴
        await queryClient.cancelQueries(queryKey);

        const prevOption = queryClient.getQueryData(queryKey); // 기존 선택지 데이터의 snapshot
        queryClient.setQueryData(queryKey, newOption); // 새로운 선택지 데이터로 낙관적 업데이트 실시

        return { prevOption }; // context를 return, context 예시에는 이전 스냅샷, 새로운 값(또는 롤백하는 함수)이 있음
      },
      onError: (error, _, context) => {
        // 캐시를 저장된 값으로 롤백
        queryClient.setQueryData(queryKey, context?.prevOption);
        window.console.log('선택지 수정에 실패했습니다. 다시 시도해주세요.', error);
      },
      onSuccess: () => {
        // 쿼리 함수의 성공하면 -> 기존 선택지 데이터 무효화
        queryClient.invalidateQueries(queryKey);
      },
    },
  );

  return { mutate, isLoading, isError, error };
};

export default function VoteOptionList({
  options,
  selectedOption,
  onChange,
}: Props) {
  const postIdExample = "1234";
  const { mutate } = useEditVote(postIdExample);

  const handleOptionClick = (option: string) => {
    onChange(option);
    mutate(option);
  };
// .. 중략

 onSuccess: () => {
      // 쿼리 함수의 성공하면 -> 기존 선택지 데이터 무효화
      queryClient.invalidateQueries(queryKey);
 },

onError: (error, _, context) => {
      // 캐시를 저장된 값으로 롤백
      queryClient.setQueryData(queryKey, context?.prevOption);
      window.console.log(
        "선택지 수정에 실패했습니다. 다시 시도해주세요.",
        error
      );
},