26 Apa Itu Mutation dan Kapan Digunakan?

title: “26 Apa Itu Mutation dan Kapan Digunakan?” date: 2024-06-15 author: “Seno Pratama” tags: [Mutation, State Management, GraphQL, Engineering Best Practices]

26 Apa Itu Mutation dan Kapan Digunakan?

Jika kamu mengembangkan aplikasi modern, khususnya di ranah frontend dengan framework seperti React atau menggunakan GraphQL di backend, istilah “mutation” pasti sudah tidak asing. Namun, bagi sebagian engineer, konsep mutation seringkali masih samar; dianggap hanya ‘perubahan data’ begitu saja. Artikel ini akan mengupas tuntas: apa itu mutation, kapan digunakan, dan bagaimana praktik baik dalam penggunaannya—dilengkapi contoh kode hingga diagram alur.

Apa Itu Mutation?

Secara sederhana, mutation berarti perubahan data. Berbeda dengan query yang bersifat membaca (read-only), mutation mengacu pada operasi yang mengubah, menambah, atau menghapus data pada sistem.

Singkatnya:

• Query => “Kasih saya data ini!”
• Mutation => “Tolong ubah data ini!”

Konsep mutation sendiri banyak ditemui di pattern state management pada frontend (misal Redux, Recoil, Zustand) maupun pada API modern seperti GraphQL.

Mutation Pada State Management

Mari kita mulai dari kasus state management di aplikasi frontend.

Immutable vs Mutable

Pada paradigma reactive atau functional programming, perubahan state diharapkan immutable — artinya tidak “mengubah” nilai lama, tetapi membuat salinan baru dengan perubahan yang diinginkan.

Mutation (perubahan data secara langsung) akan seperti berikut:

// Mutable: Tidak direkomendasikan dalam React!
const user = { name: "Seno", age: 30 };
user.age = 31; 

Sedangkan immutability dilakukan seperti ini:

// Immutable: Rekomendasi di React/Redux
const user = { name: "Seno", age: 30 };
const updatedUser = { ...user, age: 31 };

Kenapa harus immutable?

• Predictability: Perubahan state lebih mudah dilacak.
• Easier Debugging: Time-travel debugging menjadi mungkin.
• Optimization: React dkk. bisa lebih cepat melakukan comparison antar state.

Mutation di Redux Dengan Reducer

Redux, salah satu state manager paling populer di ekosistem JavaScript, sangat menekankan penggunaan immutability. Berikut contoh implementasi mutation pada data menggunakan Redux-style reducer:

function todosReducer(state = [], action) {
  switch (action.type) {
    case "addTodo":
      // Gunakan spread untuk menambah, tidak mengubah langsung
      return [...state, action.payload];
    case "removeTodo":
      // Filter membuat array baru tanpa mengubah state
      return state.filter(todo => todo.id !== action.payload.id);
    default:
      return state;
  }
}

Pada contoh di atas, setiap “mutation” terhadap state akan membuat snapshot baru agar state tetap predictable. Hal ini krusial agar aplikasi tetap stabil dan mudah di-debug.

Mutation Pada GraphQL

Berbeda konteks, mutation dalam GraphQL adalah salah satu operation type di samping query dan subscription.

Struktur Mutation GraphQL

mutation {
  addBook(title: "Belajar GraphQL", author: "Seno") {
    id
    title
    author
  }
}

Diagram Alur Mutation GraphQL

flowchart TD
    C(Client) -->|Send Mutation| API[(GraphQL API)]
    API -->|Validate| R{Resolver}
    R -->|Ubah/Entri Data| DB[(Database)]
    DB --> R
    R --> API
    API -->|Return Result| C

Penjelasan:

1. Client mengirim mutation request ke GraphQL API.
2. API melakukan validasi lalu menjalankan Resolver khusus mutation.
3. Resolver melakukan perubahan data di database.
4. Hasil akhirnya dikembalikan ke client.

Contoh: Mutation Pada Backend Express + Prisma

Misalkan kamu membuat API register user:

Schema GraphQL

type Mutation {
  registerUser(username: String!, password: String!): User
}

type User {
  id: ID!
  username: String!
}

Handler di Node.js (Express + Prisma)

const resolvers = {
  Mutation: {
    registerUser: async (_parent, args, context) => {
      const user = await context.prisma.user.create({
        data: {
          username: args.username,
          password: hashPassword(args.password),
        },
      });
      return user;
    },
  },
};

Kapan Harus Menggunakan Mutation?

1. Saat Ingin Mengubah State (State Management)

Misal: Mengubah, menghapus, atau menambah nilai pada array/object state frontend.

2. Saat Perlu Update Data di Server (API/GraphQL)

Setiap request yang:

• Menambah data (create)
• Mengubah data (update)
• Menghapus data (delete)

Perlu menggunakan mutation daripada query.

3. Trigger Side Effect

Misal, setelah data user berubah, kita perlu mengirim email atau notification secara otomatis.

Simulasi: Frontend-Backend Mutation Flow

Mari simulasikan flow dari frontend ke backend menggunakan GraphQL mutation:

1. User klik “Add Book” pada aplikasi.
2. Frontend kirim mutation:

   mutation {
     addBook(title: "GraphQL 101", author: "Seno") {
       id
       title
       author
     }
   }
   

3. Backend menangkap, menambah ke database, lalu membalas data baru.
4. Frontend menerima response dan update UI.

Tabel Perbandingan Query dan Mutation

Best Practice Dalam Penggunaan Mutation

1. Selalu Gunakan Immutability (State Frontend) Jangan ubah objek atau array secara langsung, selalu buat salinan.
2. Uji Mutasi Data Secara Isolated Unit test sangat berguna untuk memastikan logic mutation berjalan benar.
3. Hindari Side Effect di Reducer/Dalam Mutation Sebisa mungkin mutation (khususnya di Redux) pure, tidak menjalankan efek lain.
4. Gunakan Naming Yang Jelas Seperti addTodo, editProfile, bukan doSomething.
5. Audit & Logging di Backend Mutations Setiap perubahan data penting dicatat agar mudah trace jika data bermasalah.

Penutup

Mutation adalah konsep fundamental baik di state management frontend maupun API modern seperti GraphQL. Dengan memahami pengertian dan kapan menggunakan mutation, engineer bisa membuat aplikasi yang lebih terstruktur, lebih mudah dipelihara, dan siap berkembang ke skala lebih besar.

Saran saya: biasakan menggunakan pendekatan immutable saat mengubah state, dan gunakan mutation secara eksplisit saat mengubah data pada API. Dengan begitu bug lebih mudah dicari, dan aplikasi lebih durable!

Apakah kamu punya pengalaman menarik atau tantangan seputar penggunaan mutation dalam aplikasi? Bagikan di kolom komentar!