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:

benang tambahkan @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:

impor Reaksi dari'reaksi';
impor ReactDOM dari'reaksi-dom/klien';
impor Aplikasi dari'./Aplikasi';
impor { QueryClientProvider, QueryClient } dari'@tanstack/react-query';
const kueriKlien = baru QueryClient();
ReactDOM.createRoot(dokumen.getEementd('akar')).memberikan(



 </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:

impor Reaksi dari'reaksi';
impor axios dari'axios';
impor { useQuery } dari'@tanstack/react-query';
fungsiRumah() {
const postQuery = useQuery({
 queryKey: ['postingan'],
 queryFn: asinkron () => {
const tanggapan = menunggu axios.get(' https://jsonplaceholder.typicode.com/posts');
const data = menunggu respon.data;
kembali data;
 }
 })
jika( postQuery.isLoading ) kembali ( <h1>Memuat...h1>)
jika( postQuery.isError ) kembali (<h1>Kesalahan memuat data!!!h1>)

kembali (



Beranda</h1>
 { postQuery.data.peta( (barang) => ( <Pkunci={item.id}>{nama barang}P>)) }
 </div>
 )
}
eksporbawaan Rumah;

Itu useQuery hook mengembalikan objek yang berisi informasi tentang kueri. Itu postQuery objek berisi sedang Memuat, isError, Dan isSuccess negara bagian. Itu sedang Memuat, isError, Dan 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: ['postingan'],
 queryFn: asinkron (obj) => {
menghibur.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: () => {...},
 waktu basi: 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: () => {...},
 Interval pengambilan ulang: 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. Dia melakukan operasi asinkron mutasi, 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 a formulir dengan kolom input dan tombol kirim. Komponen formulir ini akan menggunakan kait useMutation untuk memperbarui status:

impor Reaksi dari'reaksi'
fungsiTambahkan Posting() {
const[posting, setPost] = React.useState({
 judul: ""
 })
fungsihandleChange(peristiwa) {
 setPost( (prevState) => ({
 ...prevState,
 [event.target.name]: event.target.nilai
 }) )
 }
kembali (



 jenis="teks"
 placeholder='Tambahkan judul'
 nama='judul'
 onChange={handleChange} 
 nilai={post.title}
 />
Tambahkan Posting </button>
 </form>
 )
}
eksporbawaan Tambahkan Posting;

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:

impor { useMutation } dari'@tanstack/react-query'
impor axios dari'axios';
const newPostMutation = useMutation({
 mutasiFn: asinkron () => {
const tanggapan = menunggu axios.post('', {
 judul: post.judul,
 });
const data = tanggapan.data;
kembali 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 mutasiFn, Anda harus memanggil newPostMutation.mutate() metode:

const handleSubmit = asinkron (peristiwa) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
kembali (


 jenis="teks"
 placeholder='Tambahkan judul'
 nama='judul'
 onChange={handleChange} 
 nilai={post.title}
 />
Tambahkan Posting </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.