Dengan React Query, Data Fetching Tidak lagi Pusing

Pada aplikasi web SPA (Single Page Applications) mengonsumsi data melalui internet menjadi kebutuhan primer. Hal tersebut yang menjembatani aplikasi agar mampu berkomunikasi dengan back-end ataupun server. Tak ayal lagi, kita membutuhkan pustaka yang dapat mengakomodir kebutuhan dalam melakukan fetching data sehingga menjadi lebih efisien dalam membangun aplikasi web dengan React. Sebelumnya kita sudah belajar tentang React, sebuah pustaka JavaScript besutan Meta yang digunakan membangun halaman UI berbasis komponen. Pada artikel kali ini, kita akan mengenal apa itu React Query, cara menggunakannya dan ragam fungsinya serta mengeksplorasi berbagai fitur di dalamnya.

Pengenalan React Query

React Query (atau dapat disebut TanStack Query) merupakan pustaka yang menawarkan solusi untuk mengatasi manajemen server state dalam aplikasi React. Apa itu server state? Singkatnya adalah informasi ataupun data yang tersimpan pada database server. Dengan menggunakan React Query, hal-hal yang berkaitan dengan fetching data, manage cache, track loading, dan error handling dapat dengan mudah diimplementasikan sehingga menjadi lebih cepat dan reliable.

Buat Project Baru

Untuk mengikuti langkah-langkah yang sesuai pada artikel ini, kita bisa membuat project baru dengan menggunakan perintah berikut.

1	npx create-react-app latihan-react-query

Perintah tersebut akan menginisiasi project secara singkat. Apabila proses sudah selesai, silakan masuk ke directory project pada folder latihan-react-query dan jalankan project menggunakan perintah berikut.

npm start

Jadi, hasilnya akan seperti berikut. Selanjutnya project sudah siap untuk kita gunakan dan modifikasi sesuai keinginan.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Memasang React Query pada Project

Pertama, kita perlu menambahkan React Query pada project. Jalankan perintah berikut untuk memasangnya.

1	npm install @tanstack/react-query

Selanjutnya, kita perlu menerapkan QueryClient yang telah disediakan oleh React Query. Sebagai tips, QueryClient dapat ditempatkan pada top-level component. Lihatlah contoh pada baris kode berikut yang telah dilakukan modifikasi pada file App.js.

App.js

import "./App.css";

import { Quote } from "./Quote";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {

return (

</header>

</div>

</QueryClientProvider>

);

}

export default App;

Berdasarkan baris kode di atas, langkah selanjutnya kita akan coba menggunakan React Query hooks pada Quote component. Maka dari itu, kita bisa membuat membuat file Quote.jsx terlebih dahulu.

Fetching Data

Pada Quote component, kita akan menggunakan useQuery yang akan digunakan sebagai hooks ketika kita ingin melakukan fetching data menggunakan REST API. Berikut adalah contoh dalam mengimplementasikan useQuery.

Quote.jsx

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

async function fetchNarutoQuote() {

const res = await fetch(

"https://animechan.vercel.app/api/random/anime?title=naruto"

);

const data = await res.json();

return data;

}

export function Quote() {

const { data, isError, isLoading } = useQuery({

queryKey: ["NarutoQuote"],

queryFn: fetchNarutoQuote,

});

if (isLoading) {

return <p>Loading...</p>;

}

if (isError) {

return <p>Error fetching data</p>;

}

return (

<p>

<code>

{data.quote} {`- ${data.character}`}

</code>

</p>

);

}

Pada contoh tersebut useQuery memiliki dua arguments.

queryKey
queryKey digunakan untuk mengidentifikasi nama query yang dipakai dan melakukan caching atas data yang didapat. Dalam hal ini, queryKey kita beri nama NarutoQuote
queryFn
queryFn merupakan query function yang berupa promise dan resolve data yang ingin kita ambil. Pada kasus ini, query function yang kita pakai fungsi fetchNarutoQuote sebagaimana yang telah didefinisikan. Fungsi tersebut bertujuan untuk mengembalikan data dari endpoint https://animechan.vercel.app/api/random/anime?title=naruto

useQuery sendiri mengembalikan object dalam beberapa properti, di antaranya sebagai berikut.

data
Ketika useQuery berhasil melakukan fetching, properti data merupakan hasil yang didapat dari endpoint.
isError
Properti ini bernilai boolean yang mengindikasikan adanya kesalahan saat melakukan fetching.
isLoading
Properti ini pula bernilai boolean yang mengisyaratkan bahwa sedang terjadi proses fetching.

Apabila fetching berjalan dengan sukses, hasil dari kode di atas akan seperti berikut. Fetching berjalan sukses

React Query Dev Tools

Bayangkan dalam satu halaman kita mengambil data dari endpoint yang berbeda dan melakukan request secara berulang. Seiring bertambahnya kompleksitas maka kita perlu sebuah tools yang mumpuni dalam melakukan aktivitas debugging.

React Query Dev tools hadir untuk mengatasi masalah tersebut. Salah satu fitur utama dari React Query Dev tools adalah menghadirkan informasi berkaitan dengan query yang sedang aktif secara berkala. Hal ini tentunya sangat membantu apabila kita menggunakan multiple query.

Bagaimana cara untuk menambahkannya pada project kita sebelumnya?

Pertama kita dapat memasangnya dengan perintah berikut.

1	npm install @tanstack/react-query-devtools

Apabila proses instalasi sudah selesai, langkah selanjutnya kita perlu melakukan modifikasi pada file App.js yang bertujuan untuk mengaktifkan penggunaan React Query Dev tools pada project. Ingat bahwa React Query Dev tools tidak akan aktif pada level production. Maka tak perlu risau ataupun memodifikasi kode yang telah kita buat karena pengunaan Dev Tools hanya berlaku di level development.

App.js

import "./App.css";

import { Quote } from "./Quote";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

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

const queryClient = new QueryClient();

function App() {

return (

</header>

</div>

</QueryClientProvider>

);

}

export default App;

Masuk ke halaman web browser dan kita akan melihat bahwa terdapat tombol mengambang di pojok kiri bawahnya.
tombol untuk membuka DevTools Apabila tombol tersebut ditekan, jendela DevTools yang berisikan ragam informasi mengenai query dan status data fetching akan terbuka. Coba lakukan refresh halaman web browser untuk mengetahui aktivitas dan hal-hal yang terjadi pada query yang sedang aktif.

Kesimpulan

React Query adalah pustaka yang membantu developer React dalam mengatur server state dalam aplikasi dengan lebih mudah dan efisien. Dengan menggunakan React Query, kita dapat dengan mudah melakukan fetching data hingga menambahkan DevTools untuk melakukan debugging yang lebih efisien.

Tentunya, React Query memiliki banyak keunggulan lain yang tidak bisa dibahas satu-persatu dalam artikel ini. Anda dapat mengeksplorasi lebih lanjut melalui halaman dokumentasi resmi mereka.