data fetching react query

Cara Mudah Data Fetching dengan Menggunakan React Query

React Query merupakan pustaka populer yang dapat membantu developer React dalam mengelola server state dalam aplikasi dengan lebih mudah dan efisien.

React Query sendiri menyediakan satu set hook dan utilitas, sehingga dapat dengan mudah untuk mengambil, menyimpan, dan memperbarui data dari server atau API.

Dengan menggunakan React Query dapat membantu kita dalam menangani pengambilan data, caching, background updates, dan pembaruan optimis dengan cara deklaratif dan efisien.

Dalam artikel ini, kita akan mempelajari cara Data Fetching dengan menggunakan React Query.

Membuat Proyek React

Silahkan kalian buka terminal dan buatlah direktori baru untuk proyek anda. Kemudian, masuk ke direktori tersebut melalui terminal dan jalankan perintah berikut untuk membuat proyek React:

npx create-react-app react-query

Setelah proses selesai, silahkan kalian masuk ke direktory proyek yang sudah dibuat dengan menggunakan perintah berikut ini.

cd react-query

Kemudian silahkan jalankan proyek dengan menggunakan perintah berikut ini.

npm start

Setelah itu, halaman default React akan terbuka di browser Anda.

Menginstal dan Memasang React Query

Silahkan buka kembali terminal anda dan pastikan anda masih berada di direktori proyek. Kemudian jalankan perintah berikut ini untuk menginstall package React Query pada proyek.

npm install @tanstack/react-query

Langkah selanjutnya yaitu kita perlu menerapkan QueryClient yang telah disediakan oleh React Query. Jika kita akan menerapkan QueryClient, maka kita bisa meletakannya pada top-level component.

Sebagai contoh kita akan melakukan modifikasi pada file App.js dan menerapkan QueryClient didalamnya.

import "./App.css";
import { Movie } from "./Movie";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();
const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <header className="App-header">
          <Movie />
        </header>
      </div>
    </QueryClientProvider>
  );
};

export default App;

Selanjutnya kita perlu membuat file Movie.js yang akan digunakan untuk React Query hook.

Melakukan Data Fetching

Setelah kita membuat Movie component, maka didalamnya kita akan menggunakan useQuery sebagai hooks ketika ingin melakukan fetching data menggunakan API. Berikut ini contohnya.

import { useQuery } from "@tanstack/react-query";

const fetchMovieFastx = async () => {
  const res = await fetch(
    "https://api.themoviedb.org/3/movie/385687?api_key=your_api&language=en-US"
  );
  const data = await res.json();
  return data;
};

export const Movie = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ["MovieFastx"],
    queryFn: fetchMovieFastx,
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error fetching data</div>;
  }
  return (
    <>
      <table
        class="styled-table"
        style={{ tableLayout: "fixed", width: "100%" }}
      >
        <thead>
          <tr>
            <th>Name Movie</th>
            <th>Overview</th>
          </tr>
        </thead>
        <tbody>
          <tr style={{ width: "50%" }}>
            <td>{data.original_title}</td>
            <td>{data.overview}</td>
          </tr>
        </tbody>
      </table>
    </>
  );
};

Pada kode diatas terdapat hook useQuery yang digunakan untuk mengambil data dari API. useQuery memiliki 2 arguments yaitu queryKey dan queryFn.

  • queryKey merupakan identifikasi nama query yang digunakan untuk mengelola caching. Disini saya memberi nama pada queryKey yaitu MovieFastx.
  • queryFn merupakan promise dan resolve data yang kita ambil. Disini queryfn yang digunakan diambil dari fungsi fetchMovieFastx. Adapun tujuan dari fungsi tersebut yaitu mengembalikan data dari endpoint yang digunakan.

Kemudian pada kode diatas terdapat Hook yang mengembalikan objek dengan properti seprti data, isLoading, dan error. Properti data berisi mengenai data yang diambil.

Untuk properti isLoading menunjukan bahwa data masih diambil, dan properti error akan menyimpan kesalahan apa pun yang terjadi saat pengambilan data.

Menambahkan React Query Dev Tools

React Query DevTools merupakan ekstensi browser yang menyediakan tampilan untuk memeriksa dan melakukan debug pada kueri. React Query DevTools akan membantu kita memvisualisasikan status kueri, melacak pembaruan cache, dan memantau permintaan.

Jika kalian ingin memasang React Query DevTools pada proyek kalian, maka kalian perlu install terlebih dahulu. Silahkan kalian ketik perintah berikut untuk menginstall React Query DevTools.

npm install @tanstack/react-query-devtools

Tunggu hingga proses instalasi selesai, Jika sudah selesai maka tahap selanjutnya kita perlu melakukan perubahan pada file App.js untuk mengaktifkan React Query DevTools pada proyek.

import "./App.css";
import { Movie } from "./Movie";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient();
const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <header className="App-header">
          <Movie />
        </header>
      </div>
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
};

export default App;

React Query DevTools hanya akan aktif apabila pada level development, jadi kalian tidak perlu khawatir untuk memodifikasi kode saat proyek kalian berada pada production karena React Query DevTools tidak akan aktif.

Kesimpulan

Dalam tutorial ini, Anda telah mempelajari cara Data Fetching dengan menggunakan React Query. Anda telah membuat proyek, menginstal dan melakukan Data Fetching menggunakan React Query.

Dengan menggunakan React Query ini dapat membantu anda ketika hendak melakukan Data Fetching, karena akan lebih mudah dan efisien. Serta kita juga mempelajari React Query DevTools yang sangat membantu dalam memvisualisasikan status kueri, melacak pembaruan cache, dan memantau permintaan.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top