FE/React & RN
react-query (2)
Chars4785
2022. 6. 22. 16:47
react-query option
라이브러리 및 공식 문서 뜯어 버리기
Queries ( 쿼리 )
Mutations ( 변이 )
function App() {
const mutation = useMutation(newTodo => axios.post('/todos', newTodo))
return (
<div>
{mutation.isLoading ? (
'Adding todo...'
) : (
<>
{mutation.isError ? (
<div>An error occurred: {mutation.error.message}</div>
) : null}
{mutation.isSuccess ? <div>Todo added!</div> : null}
<button
onClick={() => {
mutation.mutate({ id: new Date(), title: 'Do Laundry' })
}}
>
Create Todo
</button>
</>
)}
</div>
)
}
- useQuery와는 다르게 create, update, delete 하며 server state에 사이드 이펙트를 일으키는 경우에 사용한다.
- useMutation으로 mutation 객체를 정의하고, mutate 메서드를 사용하면 요청 함수를 호출해 요청이 보내진다. 이게 query랑 muataion이 나눠져있는 이유인 것 같다. ⇒ 이벤트 핸들러 함수, 혹은 조건부로 useQuery를 호출하면 최상위에서 호출해야한다는 훅의 규칙에 위배되기 때문에 성가시다.
- useMutation이 반환하는 객체 프로퍼티로 제공되는 상태값은 useQuery와 동일하다.
- mutation.reset : 현재의 error와 data를 모두 지울 수 있음
- 두번째 인자로 콜백 객체를 넘겨줘서 라이프사이클 인터셉트 로직을 짤 수도 있다.
useMutation(addTodo, {
onMutate: variables => {
// 뮤테이션 시작
// onMutate가 리턴하는 객체는 이하 생명주기에서 context 파라미터로 참조가 가능하다.
return { id: 1 }
},
onError: (error, variables, context) => {
// 에러가 났음
console.log(`rolling back optimistic update with id ${context.id}`)
},
onSuccess: (data, variables, context) => {
// 성공
},
onSettled: (data, error, variables, context) => {
// 성공이든 에러든 어쨌든 끝났을 때
},
})
- useQuery를 사용할때처럼 실패시 retry가 디폴트는 아니지만, retry 옵션을 줄 수는 있다.
Query Invalidation ( 쿼리 무효화 )
참고
https://velog.io/@jkl1545/React-Query
https://kyounghwan01.github.io/blog/React/react-query/basic/#usemutation