[React] mutate, mutateAsync 차이

 

 

💡 mutate, mutateAsync 차이점에 대해 알아보자.

 

mutate

mutate 를 기다리고 실행 될 동작이 없다!

const onSubmitHandler = (e: FormEvent) => {
    e.preventDefault();
    newTodoMudation.mutate(
      { title, contents },
      {
        onSuccess: () => {
          setTitle('');
          setContents('');

          queryClient.invalidateQueries({
            queryKey: ['todos'],
          });
        },
        onError: () => {
          alert('POST Todo Error');
        },
      }
    );
  };

 

mutateAsyng

async/await 문을 썼고, mutateAsync를 기다리고 실행 될 동작이 있다!

async/await 문을 썼지만, mutate 를 쓴다면 경고문이 뜬다.

const onSubmitHandler = async (e: FormEvent) => {
    e.preventDefault();
    await newTodoMudation.mutateAsync(
      { title, contents },
      {
        onSuccess: () => {
          setTitle('');
          setContents('');

          queryClient.invalidateQueries({
            queryKey: ['todos'],
          });
        },
        onError: () => {
          alert('POST Todo Error');
        },
      }
    );
  };