Vue Academy · 강의

데이터 변경을 위한 useMutation

useMutation(MUTATION), mutate(), 캐시 업데이트 전략과 낙관적 응답을 익힙니다.

데이터 변경을 위한 useMutation은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

변형 작업으로 데이터 변경하기

쿼리는 데이터를 읽고, 변형 작업은 데이터를 생성, 수정, 삭제합니다. useMutation 컴포저블은 GraphQL 변형 작업을 실행하며, 준비가 되었을 때 호출할 수 있는 mutate 함수를 제공합니다.

useMutation 기본 사용법

변형 작업 문서를 전달합니다. useQuery와 달리 즉시 실행되지 않으며, 이벤트가 발생했을 때 호출하는 mutate 함수를 반환합니다.

import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { mutate } = useMutation(gql(
  'mutation { addPost { id } }'
))

뮤테이션 실행

폼 제출과 같은 이벤트 처리기에서 mutate()를 호출합니다. 그러면 결과와 함께 완료되는 Promise가 반환됩니다.

async function submit() {
  await mutate()
}

변수 전달

mutate에 변수 객체를 전달합니다. 뮤테이션 문서에서는 $ 구문으로 변수를 선언합니다.

const { mutate } = useMutation(gql(
  'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
  return mutate({ title })
}

로딩 및 오류

useMutation은 loading 및 error ref도 반환하므로 제출 버튼을 비활성화하고 실패를 표시할 수 있습니다.

<template>
  <button :disabled="loading" @click="submit">Save</button>
  <p v-if="error">{{ error.message }}</p>
</template>

성공에 반응하기

뮤테이션이 성공하면 onDone 훅이 실행됩니다. 폼을 초기화하거나 토스트를 표시하거나 다른 화면으로 이동할 수 있습니다.

const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
  console.log('Created', res.data.addPost.id)
})

캐시 업데이트

뮤테이션이 끝난 후에는 Apollo 캐시가 최신 상태가 아닐 수 있습니다. update 함수로 캐시를 직접 수정하면 다시 가져오지 않아도 UI에 변경 사항이 반영됩니다.

useMutation(ADD_POST, {
  update(cache, { data }) {
    const existing = cache.readQuery({ query: GET_POSTS })
    cache.writeQuery({
      query: GET_POSTS,
      data: { posts: [...existing.posts, data.addPost] }
    })
  }
})

update가 다시 가져오기보다 나은 이유

캐시 update를 사용하면 네트워크를 한 번 더 왕복하지 않아도 됩니다. 모든 useQuery가 읽는 캐시에 새 항목을 기록하므로 즉시 표시됩니다.

대신 쿼리 다시 가져오기

캐시를 직접 수정하는 작업이 번거롭다면 뮤테이션이 완료된 후 refetchQueries를 사용해 특정 쿼리를 다시 실행합니다.

useMutation(ADD_POST, {
  refetchQueries: [{ query: GET_POSTS }]
})

낙관적 응답

optimisticResponse를 사용하면 서버가 응답하기 전에 성공을 가정하고 UI를 업데이트합니다. 요청이 실패하면 Apollo가 변경 사항을 자동으로 되돌립니다.

mutate(
  { title: 'New' },
  {
    optimisticResponse: {
      addPost: { __typename: 'Post', id: 'temp', title: 'New' }
    }
  }
)

낙관적 UI가 중요한 이유

낙관적 업데이트를 사용하면 앱이 즉각 반응하는 것처럼 느껴집니다. 사용자는 자신의 동작이 바로 적용된 것을 볼 수 있습니다. update와 함께 사용하면 실제 서버 데이터가 도착했을 때 임시 항목이 실제 데이터로 교체됩니다.

빠른 확인

뮤테이션에 대한 지식을 확인해 보세요.

복습

다음과 같은 뮤테이션을 배웠습니다.

useMutation은 이벤트가 발생했을 때 호출하는 mutate 함수를 반환합니다.
mutate()에 변수를 전달하고 loading/error 및 onDone을 사용합니다.
update 함수는 뮤테이션 후 캐시를 수정하므로 다시 가져오지 않아도 됩니다.
optimisticResponse는 자동으로 되돌릴 수 있는 방식으로 UI를 즉시 업데이트합니다.

자주 묻는 질문

“데이터 변경을 위한 useMutation” 강의는 무료인가요?

네 — “데이터 변경을 위한 useMutation” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“데이터 변경을 위한 useMutation”에서 뭘 배우나요?

useMutation(MUTATION), mutate(), 캐시 업데이트 전략과 낙관적 응답을 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“데이터 변경을 위한 useMutation” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기