SWR mutate 사용하기

새로운 데이터를 생성한 후, 그 데이터를 사용자에게 refetch 해주고 싶었다.

//커스텀훅으로 만들어뒀던 useSWR(...)에서 mutate를 꺼내옴
const { mutate } = useCollectionList({ size: 9999, classroom_id: classroomId })

...
  
  //post API 요청 보내고 응답 받는 부분
   try {
        const response = await request().post('/classrooms/add', body)
        if (response.status === 201) {
        
        //await를 붙여주어야 한다(중요). 안그러면 navigate로 이동 후 무한돌돌이...
          await mutate()
          navigate(-1)
        }
      } catch (error) {
        throw error
      }
      
      ...

 

하지만 만약 커스텀훅에서 mutation을 꺼내올 수 없는 경우에는, 전역변수 mutate를 사용하도록 한다.

(사용법이 약간 다름)

 

//글로벌 mutate
const { mutate } = useSWRConfig()

	//api 호출부
      try {
        const response = await request().post('/classrooms/add', body)
        if (response.status === 201) {
        
        //첫번째 인자는 key값,
        //두번째인자는 보낼데이터(없으면 undefined 넣어주고, 만약 어떤 array 값을 넣어주면 그걸 사용자에게 보여준다)
        //세번째인자의 오브젝트값이 중요!
          await mutate('/classrooms', undefined, { revalidate: true })
          navigate(-1)
        }
      } catch (error) {
        throw error
      }