[axios] post API custom hook으로 만들기

프로그램에서 '앱 생성'이라는 똑같은 기능을 3군데에서 사용해야 했다.

해당 api 호출하는 부분을 커스텀 훅으로 만들어 재사용 가능하도록 했다. 

 

 

useCreateApp.ts

import { useToast } from '@chakra-ui/react'
import { AxiosError, AxiosResponse } from 'axios'
import { request } from 'axios-client'
import Router from 'next/router'
import { useState } from 'react'

type AppCreateType = {
  id: string
}

export const useCreateApp = () => {
  const [loading, setLoading] = useState(false)
  const toast = useToast()

  const mutation = async () => {
    try {
      setLoading(true)
      const result = await request.post<undefined, AxiosResponse<AppCreateType>>('/apps/')
      Router.push(`/apps/${result.data.id}/edit`)
    } catch (err) {
      if (err instanceof AxiosError) {
        toast({ title: `${err}`, status: 'error', duration: 2000, isClosable: true })
      }
    } finally {
      setLoading(false)
    }
  }

  return { loading, mutation }
}

export default useCreateApp

 

// 위에서 만든 mutation을 불러와서 사용하는 파일

const XXX = () => {
	const { mutation } = useCreateApp()

	return (<Box w="full" onClick={mutation}>앱 만들기</Box>)
}