너무나 오랜만에 쓰는 블로그....ㅠ.ㅠ
invalidateQueries
메소드 및 setQueryData
메소드랑 같이 사용하면 최고의 효율을 낼 수 있다 너어무 좋다optimistic update
기능도 사용자에게 정말 좋은 경험을 제공할 수 있다.import { useMutation } from "react-query";
// 더 많은 return 값들이 있다.
const { data, isLoading, mutate, mutateAsync } = useMutation(mutationFn, options);
mutate(variables, {
onError,
onSettled,
onSuccess,
});
mutationFn (variables: TVariables) => Promise<TData>
onMutate: (variables: TVariables) => Promise<TContext | void> | TContext | void
optimistic update
사용 시 유용한 함수이다.onSuccess: (data: TData, variables: TVariables, context?: TContext) => Promise<unknown> | voi
onError: (err: TError, variables: TVariables, context?: TContext) => Promise<unknown> | void
onSettled: (data: TData, error: TError, variables: TVariables, context?: TContext) => Promise<unknown> | void
mutate: (variables: TVariables, { onSuccess, onSettled, onError }) => void
❗️ 다만, 두 곳에서 추가 콜백(onSuccess, onSettled, onError)을 실행할 경우 useMutation 의 추가 콜백 -> mutate 의 추가 콜백 순서로 실행된다.
컴포넌트가 unmount 되면 추가 콜백이 실행되지 않는다 주의!!!
useMutation(addTodo, {
onSuccess: (data, variables, context) => {
// I will fire first
},
onError: (error, variables, context) => {
// I will fire first
},
onSettled: (data, error, variables, context) => {
// I will fire first
},
});
mutate(todo, {
onSuccess: (data, variables, context) => {
// I will fire second!
},
onError: (error, variables, context) => {
// I will fire second!
},
onSettled: (data, error, variables, context) => {
// I will fire second!
},
});
mutateAsync: (variables: TVariables, { onSuccess, onSettled, onError }) => Promise<TData>
>> 더 많은 option과 return 값들은 이 링크에서 <<
import { useMutation } from "react-query";
import axios from 'axios';
interface TodoType {
id: number;
todo: string;
}
const addTodo = async (newTodo: TodoType): Promise<TodoType> => {
const { data } = await axios.post<TodoType>(`/todos`, newTodo);
return data;
};
// api 요청하는 함수(addTodo) 를 작성하지 않았을 경우
const { mutate, isLoading, isError, error, isSuccess } = useMutation(newTodo => {
return axios.post<TodoType>('/todos', newTodo);
});
// api 요청하는 함수(addTodo) 를 작성했을 경우
const { mutate, isLoading, isError, error, isSuccess } = useMutation(addTodo);
export default function App() {
return (
<div>
{
isLoading ? (
'Adding todo...'
) : (
<>
{isError && <p>error: {error.message}</p>}
{isSuccess && <p>Todo added!</p>}
<button
onClick={() => {
mutate({ id: 1, todo: 'useMutation 블로그 작성하기' })
}}
>
작성 완료
</button>
</>
)
}
</div>
);
}