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]);
    
      (...)

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

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