15.9.5 useMutation으로 게시글 작성 API 호출하기

이제 useMutation을 사용하여 게시글을 작성하는 기능을 구현합시다.

screens/WriteScreen.tsx

(...)
import {useMutation} from 'react-query';
import {writeArticle} from '../api/articles';

function WriteScreen() {
  const {top} = useSafeAreaInsets();
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const {mutate: write} = useMutation(writeArticle, {
    onSuccess: () => {
      navigation.goBack();
    },
  });

  const navigation = useNavigation<RootStackNavigationProp>();
  const onSubmit = useCallback(() => {
    write({title, body});
  }, [write, title, body]);

(...)

추후 게시글을 수정할 때도 useMutation을 사용할 것이기 때문에, mutate 함수를 write라는 이름으로 변경하여 구조 분해해줬습니다. 그리고 onSuccess를 통해 게시글 작성에 성공하면 게시글 작성 화면을 닫도록 구현했습니다.

코드를 모두 작성했으면 새 게시글 작성 화면에서 제목, 내용을 입력한 후 작성 버튼을 눌러보세요. 화면이 잘 닫히나요? 기존에 ArticlesScreen에서 보이던 데이터는 자동으로 업데이트되지 않기 때문에 새로고침을 위한 작업을 구현해줘야 합니다.