(번역) #12: Mastering Mutations in React Query

(번역) #12: Mastering Mutations in React Query | highjoon-dev

// mutable-array-push

const myArray = [1];
myArray.push(2);

console.log(myArray); // [1, 2]

// imperative-mutate

function AddComment({ id }) {
  // 아직 아무것도 실행하지 않을 것입니다.
  const addComment = useMutation({
    mutationFn: (newComment) => axios.post(`/posts/${id}/comments`, newComment),
  });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        // ✅ mutation은 폼이 제출되면 실행됩니다.
        addComment.mutate(new FormData(event.currentTarget).get("comment"));
      }}
    >
      <textarea name="comment" />
      <button type="submit">Comment</button>
    </form>
  );
}

// invalidation-from-mutation

const useAddComment = (id) => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (newComment) => axios.post(`/posts/${id}/comments`, newComment),
    onSuccess: () => {
      // ✅ 블로그 포스트의 댓글을 다시 불러옵니다.
      queryClient.invalidateQueries({
        queryKey: ["posts", id, "comments"],
      });
    },
  });
};

// update-from-mutation-response

const useUpdateTitle = (id) => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (newTitle) =>
      axios
        .patch(`/posts/${id}`, { title: newTitle })
        .then((response) => response.data),
    // 💡 변형 (mutation)의 응답이 onSucess로 전달됩니다.
    onSuccess: (newPost) => {
      // ✅ 상세보가 화면을 직접 업데이트 합니다.
      queryClient.setQueryData(["posts", id], newPost);
    },
  });
};

// awaited-promises

{
  // 🎉 쿼리 무효화가 끝날 때 까지 대기할 것입니다.
  onSuccess: () => {
    return queryClient.invalidateQueries({
      queryKey: ["posts", id, "comments"],
    });
  };
}
{
  // 🚀 실행하고 끝입니다. - 대기하지 않을 것입니다.
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["posts", id, "comments"],
    });
  };
}

// accessing-mutation-data

const onSubmit = () => {
  // ✅ onSuccess를 통해 응답에 접근합니다.
  myMutation.mutate(someData, {
    onSuccess: (data) => history.push(data.url),
  });
};

const onSubmit = async () => {
  // 🚨 작동하지만, 에러 처리가 없습니다.
  const data = await myMutation.mutateAsync(someData);
  history.push(data.url);
};

const onSubmit = async () => {
  // 😕 문제는 없는 방법이지만 장황합니다.
  try {
    const data = await myMutation.mutateAsync(someData);
    history.push(data.url);
  } catch (error) {
    // 아무것도 하지 않습니다.
  }
};

// multiple-variables

// 🚨 잘못된 문법이며 동작하지 않을 것입니다.
const mutation = useMutation({
  mutationFn: (title, body) => updateTodo(title, body),
});
mutation.mutate("hello", "world");

// ✅ 다수의 변수를 사용하려면 객체를 사용하세요.
const mutation = useMutation({
  mutationFn: ({ title, body }) => updateTodo(title, body),
});
mutation.mutate({ title: "hello", body: "world" });

// separate-concerns

const useUpdateTodo = () =>
  useMutation({
    mutationFn: updateTodo,
    // ✅ 항상 할 일 목록을 무효화 합니다.
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["todos", "list"],
      });
    },
  });

// 컴포넌트 내부

const updateTodo = useUpdateTodo();
updateTodo.mutate(
  { title: "newTitle" },
  // ✅ 변형 (mutation)이 끝났을 때 우리가 여전히
  // 상세 페이지에 위치해있을 때에만 리다이렉트 할 것입니다.
  { onSuccess: () => history.push("/todos") },
);

(번역) #12: Mastering Mutations in React Query

본문

변형(mutations)이 뭘까요? (What are mutations?)

useQuery 와의 차이점 (Differences to useQuery)

변형(mutation)을 쿼리와 연결하기 (Tying mutations to queries)

무효화 (Invalidation)

직접 업데이트 (Direct updates)

낙관적 업데이트 (Optimistic updates)

예시 (Example)

흔한 갓챠 (Common Gotchas)

대기중인 프로미스 (awaited Promises)

Mutate 또는 MutateAsync (Mutate or MutateAsync)

변형은 변수에 대해 하나의 인자만 받습니다 (Mutations only take one argument for variables)

일부 콜백은 실행되지 않을 수 있습니다 (Some callbacks might not fire)