React Query adalah pustaka populer yang mempermudah pengelolaan data di aplikasi React. Ini memungkinkan Kita untuk dengan mudah mengambil, menyimpan, dan memperbarui data dari berbagai sumber, seperti API REST atau GraphQL. Artikel ini akan membahas penggunaan React Query di dalam proyek Next.js yang ditulis dengan TypeScript, serta memberikan contoh codingnya step by step.

Instalasi React Query

Langkah pertama adalah menginstal React Query ke dalam proyek Next.js , Kita juga perlu install axios untuk mengambil data dari resource API. Kita dapat melakukannya dengan menjalankan perintah berikut:

yarn add react-query axios

Menggunakan React Query untuk Mengambil Data

Kita akan membuat contoh sederhana untuk mengambil data dari server menggunakan React Query. Misalkan kita akan mengambil daftar pengguna dari API.

Membuat Fungsi Pengambilan Data

Buat sebuah folder dengan nama libs di dalam root. didalamnya buat sebuah file apiusers.ts untuk menentukan fungsi pengambilan data. sehingga struktur folder kita akan terlihat seperti ini

my-nextjs-app/
|-- pages/
|   |-- ...
|-- lib/
|   |-- apiusers.ts
|-- ...

dan buat kode untuk file apiusers.ts

// apiusers.ts
import axios from 'axios';
export const fetchUsers = async () => {
  const response = await axios.get('https://jsonplaceholder.typicode.com/users'); // Ganti dengan endpoint API sesuai kebutuhan Kita
  return response.data;
};

Pastikan mengganti 'https://jsonplaceholder.typicode.com/users' dengan endpoint API yang sesuai dengan proyek Kita.

Tambahkan file configurasi didalam file _app.tsx

// _app.js atau _app.tsx

import { QueryClient, QueryClientProvider, ReactQueryDevtools } from 'react-query';
const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}
export default MyApp;

Menggunakan React Query di Komponen

Sekarang, mari buat komponen React di halaman kita untuk menampilkan daftar pengguna. Buat file pages/users.tsx dan tambahkan kode berikut:

// pages/users.tsx

import { useQuery } from 'react-query';
import { fetchUsers } from '../libs/apiusers';

const UsersPage = () => {
  const { data: users, isLoading, isError } = useQuery('users', fetchUsers);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error fetching data</div>;
  }

  return (
    <div>
      <h1>List of Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UsersPage;

Komponen ini menggunakan hook useQuery dari React Query untuk mengambil data pengguna dengan nama kunci 'users'. Jika data masih dimuat, akan ditampilkan pesan “Loading…”, jika terjadi kesalahan, akan ditampilkan pesan “Error fetching data”, dan jika data sudah tersedia, daftar pengguna akan ditampilkan.

Dengan langkah-langkah di atas, Kita telah mengintegrasikan React Query ke dalam proyek Next.js Kita dengan TypeScript dan membuat halaman yang mengambil data dari API dengan mudah. Kita dapat menggabungkan lebih banyak query dan fitur React Query sesuai kebutuhan proyek Kita. Semoga artikel ini membantu Kita memahami penggunaan React Query di Next.js.