useMutation으로 변형 처리하기

환영합니다

useMutation 기본

import { useMutation } from '@tanstack/react-query';

const { mutate, isLoading, isError } = useMutation({
  mutationFn: (newPost) => fetch('/api/posts', {
    method: 'POST',
    body: JSON.stringify(newPost),
  }).then(r => r.json()),
});

mutate 호출하기

<button onClick={() => mutate({ title: 'New Post' })}>
  Create Post
</button>

콜백: onSuccess, onError, onSettled

useMutation({
  mutationFn: createPost,
  onSuccess: (data) => {
    console.log('Created:', data);
    navigate('/posts/' + data.id);
  },
  onError: (error) => {
    toast.error(error.message);
  },
})

변형 작업 후 쿼리 무효화하기

import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

const { mutate } = useMutation({
  mutationFn: createPost,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
});

await 구문을 위한 mutateAsync

const { mutateAsync } = useMutation({ mutationFn: createPost });

async function handleSubmit() {
  try {
    const post = await mutateAsync({ title: 'Draft' });
    navigate('/posts/' + post.id);
  } catch (err) {
    setError(err.message);
  }
}

변형 작업 중 제출 비활성화하기

const { mutate, isPending } = useMutation({ mutationFn: saveItem });

<button onClick={() => mutate(item)} disabled={isPending}>
  {isPending ? 'Saving...' : 'Save'}
</button>

onMutate를 사용한 낙관적 업데이트

useMutation({
  mutationFn: likePost,
  onMutate: async (id) => {
    await queryClient.cancelQueries({ queryKey: ['posts'] });
    const prev = queryClient.getQueryData(['posts']);
    queryClient.setQueryData(['posts'], old => old.map(p =>
      p.id === id ? { ...p, likes: p.likes + 1 } : p));
    return { prev };
  },
  onError: (err, id, ctx) => queryClient.setQueryData(['posts'], ctx.prev),
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['posts'] }),
})

변형 상태 초기화

const { mutate, isError, reset } = useMutation({ /* ... */ });

{isError && (
  <>
    <p>Error!</p>
    <button onClick={reset}>Try Again</button>
  </>
)}

여러 변형 작업을 병렬로 실행하기

await Promise.all([
  mutateAsync({ id: 1, title: 'First' }),
  mutateAsync({ id: 2, title: 'Second' }),
]);

빠른 확인

복습

다음 내용