Bikin Data Handling di React Jadi Gampang dengan TanStack Query dan TypeScript!

Kalau kamu sering berurusan dengan data asinkron di React dan TypeScript, pasti tahu betapa ribetnya ngatur fetching, caching, dan semua drama lainnya. Nah, ada alat keren yang bisa bikin hidupmu lebih mudah: TanStack Query (dulu dikenal sebagai React Query). Artikel ini bakal ngebahas gimana caranya TanStack Query bisa bikin pengelolaan data jadi super gampang dan menyenangkan, lengkap dengan contoh menggunakan TypeScript!

Apa Itu TanStack Query?

TanStack Query itu kayak superhero untuk manajemen data asinkron di aplikasi JavaScript, terutama React. Dengan TanStack Query, kamu bisa ngelola data asinkron dengan cara yang lebih simpel dan bikin kamu fokus ke bagian logika aplikasi, bukan nulis kode boilerplate yang bikin pusing.

Kenapa Harus Coba TanStack Query?

1. Pengambilan Data Jadi Lebih Mudah
Dengan TanStack Query, ambil data dari API atau sumber lain jadi gampang banget. Cukup pakai hooks seperti useQuery dan useMutation, dan semua proses fetching data, handling error, dan status loading udah diurusin buat kamu.

2. Caching Otomatis yang Bikin Hemat
Salah satu fitur yang paling keren dari TanStack Query adalah caching otomatis. Data yang kamu ambil disimpan di cache lokal, jadi kamu nggak perlu bolak-balik nanya ke server. Ini bikin aplikasi kamu lebih cepat dan responsif.

3. Manajemen Status Tanpa Repot
Kamu nggak perlu khawatir lagi tentang status loading, error, atau data berhasil diambil. TanStack Query udah siap ngurusin semua itu dengan cara yang super simpel. Kamu cuma fokus ke logika bisnis, sisanya biar TanStack Query yang urusin.

4. Pagination dan Infinite Query? Gampang Banget!
Kalau aplikasi kamu butuh ngambil data dalam jumlah banyak, TanStack Query punya dukungan buat pagination dan infinite query. Jadi, kamu bisa ambil data secara bertahap atau tanpa batas dengan gampang.

5. Optimistic Updates: UI Jadi Lebih Responsif
TanStack Query juga ngasih fitur optimistik update. Ini bikin aplikasi kamu terasa lebih cepat dan interaktif, karena UI bisa update duluan sebelum server benar-benar memproses perubahan. Mantap, kan?

Contoh Implementasi Sederhana

Yuk, kita lihat gimana cara pakai TanStack Query di aplikasi React dengan TypeScript. Kita bakal ambil data pengguna dari API dan nampilin di komponen.

Langkah 1: Instalasi
Pertama, kamu perlu install TanStack Query:

npm install @tanstack/react-query

atau

yarn add @tanstack/react-query

Langkah 2: Setup Provider
Tambahin QueryClient dan QueryClientProvider di level atas aplikasi kamu:

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Membuat instance QueryClient
const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Langkah 3: Menggunakan useQuery dalam Komponen
Berikut contoh komponen yang ambil dan tampilkan data pengguna:

// App.tsx
import React from 'react';
import { useQuery } from '@tanstack/react-query';

// Definisikan antarmuka untuk respons API
interface Address {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: {
    lat: string;
    lng: string;
  };
}

interface Company {
  name: string;
  catchPhrase: string;
  bs: string;
}

interface ApiResponse {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}

// Definisikan tipe data pengguna yang diinginkan dalam aplikasi
interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
}

// Fungsi untuk memetakan respons API ke antarmuka User
const mapApiResponseToUser = (apiResponse: ApiResponse): User => {
  return {
    id: apiResponse.id,
    name: apiResponse.name,
    email: apiResponse.email,
    phone: apiResponse.phone,
  };
};

// Fungsi untuk mengambil data pengguna dan memetakannya ke antarmuka User
const fetchUser = async (): Promise<User> => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  if (!response.ok) {
    throw new Error('Respons jaringan tidak oke');
  }
  const apiResponse: ApiResponse = await response.json();
  return mapApiResponseToUser(apiResponse);
};

const App: React.FC = () => {
  // Gunakan useQuery untuk mengambil data
  const { data, error, isLoading } = useQuery<User, Error>(['user'], fetchUser);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Ups, terjadi masalah: {error.message}</div>;

  return (
    <div>
      <h1>Info Pengguna</h1>
      <p><strong>Nama:</strong> {data?.name}</p>
      <p><strong>Email:</strong> {data?.email}</p>
      <p><strong>Telepon:</strong> {data?.phone}</p>
    </div>
  );
};

export default App;

Kesimpulan

TanStack Query itu alat yang kece buat ngelola data asinkron di aplikasi React. Dengan fitur caching, manajemen status yang gampang, dan dukungan pagination, TanStack Query bikin pengelolaan data jadi lebih simpel dan cepat. Apalagi kalau kamu pakai TypeScript, kamu bisa bikin kode kamu lebih tipe-safed dan maintainable. Jadi, kalau kamu belum coba, sekarang saatnya untuk upgrade cara kamu ngelola data dengan TanStack Query!

Comments

[Bintang Naufal]

Mantap! Satu pertanyaan, kenapa harus di mapping api response nya?

[Pramahadi Tama Putra]

Nice question, untuk benefitnya antara lain

1. Menyesuaikan Format Data dengan Kebutuhan UI
   API sering kali mengembalikan data dalam format yang tidak langsung cocok dengan komponen frontend.
   Contoh: API mengembalikan objek dengan properti first_name dan last_name, tetapi di UI kita ingin menampilkan "Nama Lengkap".

2. Memfilter Data yang Tidak Dibutuhkan
   API biasanya mengembalikan banyak informasi yang tidak diperlukan di frontend.
   Dengan mapping, kita bisa mengambil hanya data yang relevan agar UI lebih ringan dan performa lebih optimal.

3. Menangani Perubahan Struktur API
   Jika API berubah (misalnya mengganti nama field), kita bisa menyesuaikannya di satu tempat tanpa harus mengubah banyak kode di komponen UI.

4. Meningkatkan Konsistensi Data
   API dari berbagai sumber bisa memiliki format berbeda. Dengan mapping, kita bisa menyamakan format agar lebih konsisten.
   Contoh: API A menggunakan is_active, sedangkan API B menggunakan status. Kita bisa menyamakan

5. Menghindari Data Berantakan atau Undefined
   Jika API tidak selalu mengembalikan semua field, mapping bisa memberikan default value agar tidak terjadi error.

6. Meningkatkan Performa dengan Normalisasi Data
   Jika API mengembalikan nested data yang besar, kita bisa memisahkan data ke bentuk yang lebih optimal untuk state management (misalnya Redux atau Zustand).