Orkestrasi Data di Frontend: Menggabungkan dan Mentransformasi Data untuk UI yang Responsif dan Efisien

1. Pendahuluan

Di dunia web development modern, aplikasi frontend semakin kompleks. Kita tidak lagi hanya menampilkan data dari satu API sederhana, melainkan seringkali harus berinteraksi dengan berbagai API yang berbeda, mungkin dari microservices yang terpisah, layanan pihak ketiga, atau bahkan backend-for-frontend (BFF) yang spesifik. Tantangan utamanya? Menggabungkan dan mentransformasi data-data ini menjadi satu kesatuan yang kohesif dan siap ditampilkan di UI.

Bayangkan sebuah halaman detail produk di e-commerce. Anda perlu menampilkan informasi dasar produk (nama, harga), ulasan pengguna, produk rekomendasi, dan status ketersediaan stok. Masing-masing mungkin berasal dari API yang berbeda. Jika tidak diorkestrasi dengan baik, ini bisa menyebabkan:

Latensi tinggi: Banyak request berurutan (waterfall) atau request paralel yang tidak efisien.
UI yang tidak responsif: Pengguna harus menunggu semua data terkumpul baru bisa melihat halaman lengkap.
Kode yang berantakan: Logika fetching, penggabungan, dan transformasi tersebar di banyak tempat.
Inkonsistensi data: Data dari satu sumber mungkin tidak sinkron dengan sumber lain.

Orkestrasi data di frontend adalah tentang bagaimana kita secara cerdas mengelola, menggabungkan, dan mengubah data dari berbagai sumber agar sesuai dengan kebutuhan tampilan UI, dengan tetap menjaga performa dan pengalaman pengguna yang optimal. Ini bukan hanya tentang “mengambil data”, tetapi tentang “mengolah data menjadi informasi yang bermakna untuk pengguna”.

Artikel ini akan membawa Anda menyelami berbagai pola, strategi, dan tools untuk melakukan orkestrasi data di frontend. Kita akan belajar bagaimana mengubah fragmentasi data menjadi UI yang responsif dan efisien.

2. Memahami Masalah: Fragmentasi Data di Frontend

Fragmentasi data adalah kondisi di mana informasi yang dibutuhkan untuk satu komponen UI atau satu halaman tersebar di beberapa endpoint API yang berbeda. Ini adalah konsekuensi alami dari arsitektur microservices atau integrasi dengan layanan eksternal.

Contoh Skenario: Halaman Detail Produk

Misalkan kita memiliki halaman detail produk. Untuk menampilkan satu produk secara lengkap, kita membutuhkan data dari:

GET /api/products/{id}: Detail dasar produk (nama, deskripsi, gambar, harga).
GET /api/reviews?productId={id}: Ulasan pengguna untuk produk tersebut.
GET /api/recommendations?productId={id}: Produk rekomendasi terkait.
GET /api/inventory?productId={id}: Ketersediaan stok.

Secara default, jika kita melakukan request ini secara berurutan, akan terjadi “waterfall” yang memperlambat loading halaman:

❌ Masalah Waterfall Request

Client -> Request Product Detail (100ms)
       <- Response Product Detail
Client -> Request Reviews (100ms)
       <- Response Reviews
Client -> Request Recommendations (100ms)
       <- Response Recommendations
Client -> Request Inventory (100ms)
       <- Response Inventory
Total: ~400ms (belum termasuk waktu render)

Selain itu, data yang diterima mungkin tidak langsung dalam format yang ideal untuk UI. Misalnya, data produk mungkin memiliki category_id dan kita perlu menampilkan category_name yang didapat dari API lain, atau ulasan hanya berupa ID pengguna dan kita perlu menampilkan nama pengguna. Di sinilah orkestrasi data menjadi krusial.

3. Pola Orkestrasi Data Dasar: Agregasi Paralel Sederhana

Pola paling dasar untuk mengatasi waterfall adalah dengan melakukan request secara paralel. Ini sangat efektif ketika data yang Anda butuhkan bersifat independen satu sama lain.

🎯 Menggunakan Promise.all di JavaScript

Promise.all adalah sahabat terbaik Anda untuk skenario ini. Ia menerima array Promise dan akan mengembalikan Promise baru yang akan resolve ketika semua Promise dalam array tersebut telah resolve, atau reject jika salah satu Promise reject.

async function fetchProductData(productId) {
  try {
    const [productDetail, reviews, recommendations, inventory] = await Promise.all([
      fetch(`/api/products/${productId}`).then(res => res.json()),
      fetch(`/api/reviews?productId=${productId}`).then(res => res.json()),
      fetch(`/api/recommendations?productId=${productId}`).then(res => res.json()),
      fetch(`/api/inventory?productId=${productId}`).then(res => res.json())
    ]);

    // Menggabungkan data yang sudah didapat
    const combinedData = {
      product: productDetail,
      reviews: reviews,
      recommendations: recommendations,
      inventory: inventory
    };

    console.log('Data lengkap produk:', combinedData);
    return combinedData;
  } catch (error) {
    console.error('Gagal mengambil data produk:', error);
    throw error;
  }
}

// Contoh penggunaan
fetchProductData('prod-123');

✅ Keuntungan:

Performa lebih cepat: Mengurangi total waktu fetching karena request berjalan bersamaan.
Kode lebih bersih: Logika agregasi terpusat.

⚠️ Keterbatasan:

Jika satu request gagal, Promise.all akan langsung reject. Anda mungkin perlu Promise.allSettled jika ingin memproses semua hasil, terlepas dari kegagalan.
Tidak cocok untuk data yang memiliki ketergantungan (misal: data rekomendasi memerlukan data detail produk yang sudah diambil).

4. Pola Orkestrasi Lanjutan: Transformasi dan Normalisasi Data

Setelah data berhasil diambil, langkah selanjutnya adalah mentransformasikannya agar sesuai dengan kebutuhan UI Anda. Ini sering melibatkan:

Menggabungkan objek: Mengambil properti dari beberapa objek menjadi satu objek baru.
Mengubah struktur: Mengubah array menjadi map, atau meratakan struktur data yang berlapis.
Menormalisasi data: Menghilangkan duplikasi data dan menciptakan referensi tunggal (misalnya, semua objek pengguna disimpan di satu tempat, dan produk mereferensinya dengan ID).

🎯 Contoh: Menggabungkan Detail Produk dan Ulasan dengan Nama Pengguna

Misalkan API ulasan hanya mengembalikan userId, dan kita punya API lain untuk GET /api/users/{id}.

async function fetchProductAndReviewsWithUsers(productId) {
  try {
    const [product, reviews] = await Promise.all([
      fetch(`/api/products/${productId}`).then(res => res.json()),
      fetch(`/api/reviews?productId=${productId}`).then(res => res.json())
    ]);

    // Ambil semua user ID unik dari ulasan
    const uniqueUserIds = [...new Set(reviews.map(review => review.userId))];

    // Ambil detail user secara paralel
    const userPromises = uniqueUserIds.map(userId =>
      fetch(`/api/users/${userId}`).then(res => res.json())
    );
    const users = await Promise.all(userPromises);

    // Buat map user untuk akses cepat
    const usersMap = new Map(users.map(user => [user.id, user]));

    // Transformasi ulasan untuk menyertakan detail user
    const transformedReviews = reviews.map(review => ({
      ...review,
      user: usersMap.get(review.userId) // Gabungkan detail user
    }));

    return {
      product,
      reviews: transformedReviews
    };
  } catch (error) {
    console.error('Error during data orchestration:', error);
    throw error;
  }
}

// Contoh penggunaan
fetchProductAndReviewsWithUsers('prod-456').then(data => {
  console.log('Produk dengan ulasan lengkap:', data);
});

💡 Tips Praktis untuk Transformasi:

Pure Functions: Buat fungsi transformasi sebagai pure functions (tidak memiliki side effects) agar mudah diuji dan digunakan kembali.
Selector Pattern: Gunakan selector untuk mengekstrak dan mentransformasi data dari state global atau hasil API. Ini menjaga logika UI tetap bersih dari detail struktur data.
Normalisasi State: Jika aplikasi Anda menggunakan state management seperti Redux atau Zustand, pertimbangkan untuk menormalisasi data yang diambil (misalnya, menyimpan entitas produk, ulasan, dan pengguna dalam objek terpisah yang diindeks dengan ID).

5. Mengatasi Ketergantungan Data dan Caching di Frontend

Terkadang, satu request API membutuhkan data dari request API sebelumnya. Ini disebut ketergantungan data.

🎯 Contoh: Ketergantungan Data dengan async/await

async function fetchProductDetailAndCategory(productId) {
  try {
    const product = await fetch(`/api/products/${productId}`).then(res => res.json());
    // Asumsi product memiliki categoryId
    const category = await fetch(`/api/categories/${product.categoryId}`).then(res => res.json());

    return {
      ...product,
      categoryName: category.name // Gabungkan nama kategori
    };
  } catch (error) {
    console.error('Error fetching product and category:', error);
    throw error;
  }
}

Ini adalah pola yang valid, tetapi bisa menyebabkan masalah “N+1” jika Anda perlu mengambil banyak kategori untuk banyak produk.

📌 Pentingnya Caching dan Deduplikasi

Untuk mengatasi ketergantungan data dan masalah N+1, serta meningkatkan performa secara keseluruhan, caching dan deduplikasi request di frontend sangat penting.

Deduplikasi Request: Memastikan bahwa untuk request yang sama (misalnya, GET /api/users/123), hanya satu request jaringan yang benar-benar dikirim, bahkan jika ada banyak komponen yang memintanya secara bersamaan. Hasilnya kemudian dibagikan ke semua pemohon.
Caching: Menyimpan hasil request API yang sudah berhasil untuk jangka waktu tertentu. Ketika request yang sama datang lagi, data bisa langsung diambil dari cache tanpa perlu request jaringan baru.

Contoh fetchProductAndReviewsWithUsers di atas sudah melakukan deduplikasi user ID secara manual (uniqueUserIds). Namun, mengelola caching dan deduplikasi secara manual bisa rumit. Di sinilah library modern sangat membantu.

6. Tools dan Library Pendukung Orkestrasi Data

Membangun logika orkestrasi data dari nol bisa jadi pekerjaan besar. Untungnya, ekosistem frontend modern menyediakan banyak tools yang bisa meringankan beban ini.

a. React Query (TanStack Query) / SWR

💡 Fokus: Caching, deduplikasi, revalidation, dan sinkronisasi data asinkronus.

Library-library ini secara fundamental mengubah cara Anda berpikir tentang fetching data. Mereka menyediakan hook yang memungkinkan Anda mendeklarasikan data apa yang Anda butuhkan, dan mereka akan mengurus:

Caching: Menyimpan data yang sudah diambil.
Deduplikasi: Mencegah request ganda untuk data yang sama.
Revalidation: Memastikan data selalu segar (stale-while-revalidate).
Retry: Mengulang request yang gagal secara otomatis.
Background fetching: Memperbarui data tanpa memblokir UI.

Dengan React Query/SWR, Anda bisa dengan mudah mengagregasi data karena setiap permintaan data akan memanfaatkan cache yang ada.

// Contoh dengan React Query
import { useQuery } from '@tanstack/react-query';

function useProductDetail(productId) {
  return useQuery({
    queryKey: ['product', productId],
    queryFn: async () => {
      const res = await fetch(`/api/products/${productId}`);
      if (!res.ok) throw new Error('Failed to fetch product');
      return res.json();
    }
  });
}

function useProductReviews(productId) {
  return useQuery({
    queryKey: ['reviews', productId],
    queryFn: async () => {
      const res = await fetch(`/api/reviews?productId=${productId}`);
      if (!res.ok) throw new Error('Failed to fetch reviews');
      return res.json();
    }
  });
}

function ProductPage({ productId }) {
  const { data: product, isLoading: productLoading, error: productError } = useProductDetail(productId);
  const { data: reviews, isLoading: reviewsLoading, error: reviewsError } = useProductReviews(productId);

  if (productLoading || reviewsLoading) return <div>Loading...</div>;
  if (productError) return <div>Error loading product: {productError.message}</div>;
  if (reviewsError) return <div>Error loading reviews: {reviewsError.message}</div>;

  // Data product dan reviews sudah tersedia dan dikelola cachingnya oleh React Query
  // Anda bisa melakukan transformasi di sini jika diperlukan
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <h2>Reviews</h2>
      {reviews.map(review => (
        <p key={review.id}>"{review.comment}" - {review.author}</p>
      ))}
    </div>
  );
}

b. GraphQL Client (Apollo Client, Relay)

💡 Fokus: Mendeklarasikan data yang dibutuhkan UI secara spesifik dan mendapatkan data teragregasi dari satu endpoint.

Jika backend Anda menggunakan GraphQL, sebagian besar masalah orkestrasi data di frontend sudah teratasi secara arsitektural. Anda hanya perlu membuat satu request ke endpoint GraphQL, dan di sana Anda bisa meminta data dari berbagai “resources” (produk, ulasan, pengguna) dalam satu query yang spesifik.

GraphQL client seperti Apollo Client atau Relay kemudian akan mengelola:

Caching: Cache data di sisi klien.
Normalisasi: Menyimpan data dalam cache yang dinormalisasi (misalnya, semua objek User disimpan di cache.User[id]).
Data fetching: Mengirim query ke server GraphQL.

# Contoh GraphQL Query untuk halaman detail produk
query GetProductDetails($id: ID!) {
  product(id: $id) {
    id
    name
    description
    price
    reviews {
      id
      comment
      rating
      author {
        id
        name
      }
    }
    recommendations {
      id
      name
      imageUrl
    }
  }
}

Dengan satu query ini, Anda mendapatkan semua data yang teragregasi dan terstruktur sesuai kebutuhan UI dari server.

c. State Management Libraries (Zustand, Redux Toolkit)

💡 Fokus: Menyimpan data yang sudah diorkestrasi dan ditransformasi agar bisa diakses oleh berbagai komponen UI.

Meskipun React Query atau GraphQL client mengelola fetching dan caching, Anda mungkin masih perlu menyimpan hasil akhir orkestrasi data di state global aplikasi Anda, terutama jika data tersebut akan digunakan oleh banyak komponen yang tidak terkait langsung dengan fetching.

Zustand/Redux Toolkit: Ideal untuk menyimpan data yang sudah bersih dan siap pakai oleh UI, atau untuk menyimpan state UI yang kompleks yang bergantung pada data yang diorkestrasi.
Recoil/Jotai: Cocok untuk atom-based state management, di mana Anda bisa membuat “atom” atau “selector” yang menggabungkan dan mentransformasi data dari berbagai sumber.

Kesimpulan

Orkestrasi data di frontend adalah keterampilan penting dalam membangun aplikasi web modern yang kompleks. Dengan memahami pola dasar seperti agregasi paralel dan transformasi data, serta memanfaatkan tools canggih seperti React Query atau GraphQL client, Anda dapat mengatasi tantangan fragmentasi data, meningkatkan performa, dan menyajikan pengalaman pengguna yang lebih mulus.

Mulai dari yang sederhana: gunakan Promise.all untuk request paralel. Jika kompleksitas meningkat, pertimbangkan untuk menggunakan library fetching data yang mengelola caching dan deduplikasi secara otomatis. Dan jika backend Anda mendukung, GraphQL adalah solusi yang sangat kuat untuk menggeser beban orkestrasi ke server dan menyederhanakan frontend secara drastis.

Dengan strategi orkestrasi data yang tepat, Anda tidak hanya membangun aplikasi yang lebih cepat, tetapi juga kode yang lebih rapi, lebih mudah dipelihara, dan lebih tangguh terhadap perubahan API di masa depan.