screens/WriteScreen.tsx
(import {modifyArticle, writeArticle} from '../api/articles'; type WriteScreenRouteProp RouteProp<RootStackParamList, 'Write'>; function () { ( ) 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 <RootStackNavigationProp>(); const onSubmit (() => { if (params.articleId) { modify({id: params.articleId, title, body}); } else { write({title, body}); } }, [write, modify, title, body, params.articleId]); ( ))
코드를 다 작성했으면 제대로 수정이 되는지 확인해보세요.