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!