Cara Menangani Pengambilan Data di React.js Menggunakan Tanstack Query
Table of content:
Tanstack Query, AKA React Query, adalah pustaka populer untuk mengambil data dalam aplikasi React. React Query menyederhanakan proses pengambilan, caching, dan memperbarui data dalam aplikasi web. Artikel ini akan membahas penggunaan React Query untuk menangani pengambilan data dalam aplikasi React.
Menginstal dan Menyiapkan Query React
Anda dapat menginstal React Query menggunakan npm atau benang. Untuk menginstalnya menggunakan npm, jalankan perintah berikut di terminal Anda:
npm i @tanstack/react-query
Untuk menginstalnya menggunakan benang, jalankan perintah berikut di terminal Anda:
Baca Juga:
yarn add @tanstack/react-query
Setelah menginstal pustaka React Query, Anda membungkus seluruh aplikasi dalam QueryClientProvider komponen. Itu QueryClientProvider komponen membungkus seluruh aplikasi Anda dan memberikan contoh dari Klien Kueri ke semua komponen anaknya.
Itu Klien Kueri adalah bagian utama dari React Query. Itu Klien Kueri mengelola semua pengambilan data dan logika caching. Itu QueryClientProvider komponen mengambil Klien Kueri sebagai penyangga dan membuatnya tersedia untuk seluruh aplikasi Anda.
Untuk memanfaatkan QueryClientProvider dan Klien Kueri dalam aplikasi Anda, Anda harus mengimpornya dari @tanstack/react-query perpustakaan:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';const queryClient = new QueryClient();
ReactDOM.createRoot(document.getEementd('root')).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</React.StrictMode>
)
Memahami Kait useQuery
Itu useQuery hook adalah fungsi yang disediakan oleh pustaka React Query, yang mengambil data dari server atau API. Itu menerima objek dengan properti berikut: queryKey (kunci kueri) dan kueriFn (fungsi yang mengembalikan janji yang menyelesaikan data yang ingin Anda ambil).
Itu queryKey mengidentifikasi kueri; itu harus unik untuk setiap kueri di aplikasi Anda. Kuncinya bisa berupa nilai apa pun, seperti string, objek, atau larik.
Untuk mengambil data menggunakan useQuery hook, Anda perlu mengimpornya dari @tanstack/react-query perpustakaan, lulus a queryKey dan gunakan kueriFn untuk mengambil data dari API.
Misalnya:
import React from 'react';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';function Home() {
const postQuery = useQuery({
queryKey: ['posts'],
queryFn: async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
const data = await response.data;
return data;
}
})
if( postQuery.isLoading ) return ( <h1>Loading....</h1>)
if( postQuery.isError ) return (<h1>Error loading data!!!</h1>)
return (
<div>
<h1>Home</h1>
{ postQuery.data.map( (item) => ( <p key={item.id}>{item.title}</p>)) }
</div>
)
}
export default Home;
Itu useQuery hook mengembalikan objek yang berisi informasi tentang kueri. Itu postQuery objek berisi sedang Memuat, isErrorDan isSuccess negara bagian. Itu sedang Memuat, isErrorDan isSuccess negara mengelola siklus hidup dari proses pengambilan data. Itu postQuery.data properti berisi data yang diambil dari API.
Itu sedang Memuat status adalah nilai boolean yang menunjukkan apakah kueri sedang memuat data. Ketika sedang Memuat status benar, kueri sedang diproses, dan data yang diminta tidak tersedia.
Itu isError status juga merupakan nilai boolean yang menunjukkan apakah terjadi kesalahan selama pengambilan data. Kapan isError benar, kueri gagal mengambil data.
Itu isSuccess state adalah nilai boolean yang menunjukkan apakah kueri telah berhasil mengambil data. Kapan isSuccess benar, Anda dapat menampilkan data yang diambil di aplikasi Anda.
Catatan Anda dapat mengakses queryKey menggunakan kueriFn. Itu kueriFn mengambil satu argumen. Argumen ini adalah objek yang berisi parameter yang diperlukan untuk permintaan API. Salah satu parameter tersebut adalah queryKey.
Misalnya:
useQuery({
queryKey: ['posts'],
queryFn: async (obj) => {
console.log( obj.queryKey );
}
})
Berurusan Dengan Data Basi
Kueri React menyediakan banyak cara untuk menangani data basi. Pustaka React Query memastikan untuk secara otomatis membuat permintaan pengambilan baru ke API Anda saat data yang diambil menjadi basi. Ini menjamin bahwa Anda terus merender data terbaru.
Anda dapat mengontrol seberapa cepat data Anda menjadi basi dan interval waktu antara setiap permintaan pengambilan otomatis dengan memanfaatkan waktu basi Dan refetchInterval pilihan. Itu waktu basi option adalah properti yang menentukan jumlah milidetik data yang di-cache valid sebelum menjadi basi.
Itu refetchInterval option adalah properti yang menentukan jumlah milidetik antara setiap permintaan pengambilan otomatis dari pustaka React Query.
Misalnya:
useQuery({
queryKey: ['...'],
queryFn: () => {...},
staleTime: 1000;
})
Dalam contoh ini, waktu basi adalah 1000 milidetik (1 detik). Data yang diambil akan menjadi basi setelah 1 detik, dan kemudian pustaka React Query akan membuat permintaan pengambilan lainnya ke API.
Di sini Anda menggunakan refetchInterval opsi untuk mengontrol interval waktu antara setiap permintaan pengambilan otomatis:
useQuery({
queryKey: ['...'],
queryFn: () => {...},
refetchInterval: 6000;
})
Itu refetchInterval adalah 6000 milidetik (6 detik). React Query akan secara otomatis memicu permintaan pengambilan baru untuk memperbarui data yang di-cache setelah 6 detik.
Memahami Hook useMutation
Itu useMutation hook adalah alat yang ampuh di perpustakaan React Query. Itu melakukan mutasi operasi asinkron, seperti membuat atau memperbarui data di server. Menggunakan useMutation hook, Anda dapat dengan mudah memperbarui status aplikasi dan antarmuka pengguna berdasarkan respons mutasi.
Di bawah ini, kami telah membuat sebuah Tambahkan Posting komponen yang merender formulir dengan kolom input dan tombol kirim. Komponen formulir ini akan menggunakan kait useMutation untuk memperbarui status:
import React from 'react'function AddPost() {
const[post, setPost] = React.useState({
title: ""
})
function handleChange(event) {
setPost( (prevState) => ({
...prevState,
[event.target.name]: event.target.value
}) )
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder='Add Title'
name='title'
onChange={handleChange}
value={post.title}
/>
<button>Add Post</button>
</form>
)
}
export default AddPost;
Di dalam Tambahkan Posting komponen adalah keadaan pos yang berfungsi sebagai objek dengan satu properti, judul.
Itu handleChange fungsi memperbarui status pos setiap kali pengguna mengetik di kolom input. Setelah membuat Tambahkan Posting komponen, kami mengimpor useMutation kaitkan dan gunakan untuk memperbarui API.
Misalnya:
import { useMutation } from '@tanstack/react-query'
import axios from 'axios';const newPostMutation = useMutation({
mutationFn: async () => {
const response = await axios.post('<https://jsonplaceholder.typicode.com/posts>', {
title: post.title,
});
const data = response.data;
return data;
}
})
Itu useMutation hook menangani permintaan HTTP untuk membuat postingan baru. Itu newPostMutation konstanta mewakili fungsi mutasi dan opsi konfigurasinya.
Itu mutasiFn adalah fungsi asinkron yang mengirimkan permintaan POST ke titik akhir API. Permintaan mencakup objek yang berisi judul nilai dari pos obyek.
Untuk menjalankan mutasiFnAnda harus memanggil newPostMutation.mutate() metode:
const handleSubmit = async (event) => {
event.preventDefault(); newPostMutation.mutate();
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder='Add Title'
name='title'
onChange={handleChange}
value={post.title}
/>
<button>Add Post</button>
</form>
)
}
Mengirimkan formulir akan menjalankan handleSubmit fungsi. Itu handleSubmit fungsi adalah fungsi asinkron yang memicu fungsi mutasi newPostMutation.mutate().
Pengambilan Data Efisien Dengan Kueri Tanstack
Artikel ini mengeksplorasi cara menangani pengambilan data dalam aplikasi React menggunakan pustaka tanstack/react-query.
Pustaka tanstack/react-query menyediakan alat yang ampuh dan fleksibel untuk mengambil dan menyimpan data dalam cache dalam aplikasi React. Mudah digunakan, dan kemampuan caching membuatnya efisien dan responsif.
Apakah Anda sedang membangun proyek pribadi kecil atau aplikasi perusahaan yang luas, pustaka tanstack/react-query dapat membantu Anda mengelola dan menampilkan data secara efektif dan efisien. Bersamaan dengan React, Next.js juga menyediakan beberapa proses bawaan dan pustaka pihak ketiga untuk menangani pengambilan data.
Artikel Terkait
