더북(TheBook)

screens/WriteScreen.tsx

(...)
import {modifyArticle, writeArticle} from '../api/articles';

type WriteScreenRouteProp = RouteProp<RootStackParamList, 'Write'>;

function WriteScreen() {
  (...)
  const {mutate: modify} = useMutation(modifyArticle, {
    onSuccess: (article) => {
      // 게시글 목록 수정
      queryClient.setQueryData<InfiniteData<Article[]>>('articles', (data) => {
        // data의 타입이 undefined가 아님을 명시하기 위하여 추가한 코드
        // modify의 경우엔 data가 무조건 유효하기 때문에 실제로 실행될 일 없음
        if (!data) {
          return {pageParams: [], pages: []};
        }

        return {
          pageParams: data!.pageParams,
          pages: data!.pages.map((page) =>
            // 우리가 수정할 항목이 있는 페이지를 찾고
            page.find((a) => a.id === params.articleId) 
              // 해당 페이지에서 id가 일치하는 항목을 교체
              ? page.map((a) => (a.id === params.articleId ? article : a)) 
              : page,
          ),
        };
      });
      // 게시글 수정
      queryClient.setQueryData(['article', params.articleId], article);
      navigation.goBack();
    },
  });

  const navigation = useNavigation<RootStackNavigationProp>();
  const onSubmit = useCallback(() => {
    if (params.articleId) {
      modify({id: params.articleId, title, body});
    } else {
      write({title, body});
    }
  }, [write, modify, title, body, params.articleId]);

  (...)

코드를 다 작성했으면 제대로 수정이 되는지 확인해보세요.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.