Memudahkan pengambilalihan data untuk aplikasi CRUD depan menggunakan React Query

Membina aplikasi Crud Front-end adalah mudah pada mulanya, tetapi apabila fungsi meningkat, kerumitan meningkat dengan pesat. Bagi setiap titik akhir API, pengurusan negeri, penyegerakan, caching, dan pengendalian ralat diperlukan. Artikel ini akan memperkenalkan perpustakaan yang dipanggil React Query dan bagaimana ia dapat membantu menyelesaikan semua masalah ini. Perpustakaan mendakwa sebagai "Perpustakaan Pengambilalihan Data yang hilang" dan menyediakan "Pengurusan Negeri Pelayan" untuk aplikasi React anda.

kami akan menggunakan projek demo pertanyaan React Complete untuk mempelajari ciri -ciri teras yang disediakan oleh perpustakaan. Anda kemudian boleh menggunakan pengetahuan ini untuk projek anda sendiri. Pertama, mari kita belajar sedikit tentangnya sebelum memulakan persediaan projek.

mata utama

React Query 3 Memudahkan pengurusan negeri dan pemerolehan data dalam aplikasi React, mengendalikan cache, penyegerakan, dan pengurusan ralat dengan cekap.
Perpustakaan ini sesuai untuk pemaju peringkat pertengahan ke tahap yang biasa dengan React, React Router, dan Rest API.
React Query 3 menambah ciri baru dan penambahbaikan kepada versi 2.x dan menyediakan panduan penghijrahan untuk pengguna yang dinaik taraf.
Ciri -ciri utama demo dalam projek demo termasuk pertanyaan asas, pertanyaan paging, dan pertanyaan tanpa had, serta penciptaan, kemas kini, dan memadam operasi.
React Query's DevTools Utility Assists Debugging dengan menggambarkan keadaan dan proses dalaman dalam masa nyata.
• Pilihan konfigurasi seperti
• dan cacheTime mengoptimumkan prestasi dengan menguruskan kesegaran data dan tempoh cache. staleTime
Perpustakaan ini menyokong senario lanjutan seperti menatal tanpa had dan kebergantungan negara yang kompleks, meningkatkan pengalaman pengguna dan pengalaman pemaju.

Mengenai React Query 3

React Query adalah projek sumber terbuka yang dibuat oleh Tanner Linsey. Versi utama React Query 3 terbaru dikeluarkan secara rasmi pada bulan Disember 2020. Dalam versi baru ini, ciri -ciri baru telah ditambah dan ciri -ciri sedia ada telah diperbaiki.

Harus diperhatikan bahawa ia mempunyai beberapa perubahan ketara berbanding dengan versi React Query yang sangat popular 2.x. Terdapat panduan penghijrahan yang jelas menerangkan perubahan ini, kerana anda mungkin menghadapi banyak tutorial ketinggalan zaman yang ditulis untuk versi yang lebih lama.

Versi baru memberikan peningkatan yang besar, dan banyak pepijat yang dilaporkan sebelum ini telah diselesaikan. Walaupun versi 3.x siap untuk pengeluaran, ia masih dalam pembangunan dan sentiasa ditetapkan dengan pepijat yang baru ditemui.

Langkah berjaga -jaga

Artikel ini adalah untuk pemaju depan peringkat pertengahan hingga tinggi, yang telah menguasai kemahiran asas dan pengetahuan berikut:

React
React Router
React cangkuk
Pengambilalihan data API REST

Dalam persekitaran mesin pembangunan anda, anda perlu menetapkan perkara berikut:

node.js
git
pelanggan rehat seperti sambungan rehat untuk postman, insomnia, atau vs code

Mengenai projek

Projek Demo Kami akan menganalisis adalah aplikasi front-end React yang akan menggunakan pertanyaan React untuk mendapatkan data yang disediakan oleh pelayan API JSON REST. Aplikasi ini hanya terdiri daripada lima halaman, menunjukkan apa yang ditawarkan oleh React Query. Ciri -ciri ini termasuk:

• pertanyaan asas
• pertanyaan pagination
• pertanyaan tanpa had
• Buat Operasi
• Kemas kini Operasi
• Padam Operasi

React Query menyediakan lebih banyak ciri, tetapi artikel ini terhad di ruang dan tidak boleh diperkenalkan satu demi satu. Berikut adalah pratonton aplikasi yang akan kami gunakan:

Tetapan Projek

Sebelum kita mula menubuhkan, saya fikir lebih baik melihat dengan ringkas tentang kebergantungan lain yang digunakan dalam projek ini. Ini termasuk:

vite: alat binaan yang sangat cepat
Windicss: Penyusun CSS Tailwind yang sangat cepat
Borang Hook React: Perpustakaan Pembina dan Pengesahan Borang yang menggunakan cangkuk React
React Modal: Komponen modal yang boleh diakses
Axios: Pelanggan HTTP Pelayar Berasaskan Janji
JSON Server: Pelayan API REST Lengkap

Untuk menyediakan aplikasi demo pertanyaan React pada mesin anda sendiri, lakukan arahan berikut:

# 克隆項目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 導航到項目目錄
cd react-query-demo

# 安裝包依賴項
npm install

# 為 json-server 設置數(shù)據(jù)庫文件
cp api/sample.db.json api/db.json

# 啟動 json-server
npm run json-server

Fail pangkalan data yang digunakan oleh JSON-Server mengandungi pelbagai pengguna. Apabila anda melaksanakan

, pelayan API palsu akan bermula pada port 3004. Melaksanakan permintaan GET akan menghasilkan contoh berikut JSON Response: npm run json-server

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

Seterusnya, mulakan pelayan pembangunan yang akan menjalankan kod depan:

# 在另一個終端中，啟動 React 開發(fā)服務器
npm run dev

pergi ke penyemak imbas anda dan buka

untuk mengakses permohonan. Anda harus mempunyai pengalaman yang sama seperti dalam pratonton di atas. Pastikan untuk melaksanakan tugas -tugas berikut untuk meneroka fungsi aplikasi: http://localhost:3000

Lihat halaman pertanyaan asas (halaman utama).
Akses halaman paging dan berinteraksi dengan butang sebelumnya dan seterusnya.
Akses halaman tanpa had dan berinteraksi dengan butang Load More.
kembali ke halaman pertanyaan asas dan klik butang "Buat Pengguna". Anda akan diarahkan ke halaman Buat Pengguna. Isi borang dan klik butang Simpan.
Dalam jadual pengguna, cari ikon edit. Klik. Ini akan membawa anda ke halaman Edit Pengguna. Buat sebarang perubahan yang anda suka dan klik butang "Simpan".
Dalam jadual pengguna, cari ikon "Padam". Klik. Ini akan memulakan kotak dialog modal yang meminta anda mengesahkan operasi padam. Klik butang Padam untuk mengesahkan.

Selepas menyelesaikan semua tugas di atas, kita boleh mula menguraikan projek. Sila periksa struktur projek untuk memahami lokasi setiap komponen dan pandangan. Saya akan menyediakan versi mudah komponen ini dalam artikel ini supaya anda dapat memahami asas -asas menggunakan pertanyaan React dalam projek anda.

Pemasangan React Query

React Query boleh dipasang dalam projek React kosong atau sedia ada menggunakan arahan berikut:

# 克隆項目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 導航到項目目錄
cd react-query-demo

# 安裝包依賴項
npm install

# 為 json-server 設置數(shù)據(jù)庫文件
cp api/sample.db.json api/db.json

# 啟動 json-server
npm run json-server

Pakej ini mengandungi semua yang anda perlukan - termasuk ciri utiliti DevTools, yang akan dibincangkan kemudian. Selepas memasang pakej, anda perlu mengemas kini komponen peringkat atas anda- App.jsx -As ditunjukkan di bawah:

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

Mana -mana komponen kanak -kanak

QueryClientProvider akan dapat mengakses cangkuk yang disediakan oleh Perpustakaan Pertanyaan React. Cangkuk yang akan kita gunakan dalam artikel ini adalah:

• useQuery
• useInfiniteQuery
• useMutation
• Berikut adalah dikemas kini (versi mudah) useQueryClient dengan subviews yang akan kami gunakan:

App.jsx (Kandungan sedemikian, sila terus menerjemahkan bahagian yang tinggal mengikut keperluan anda, termasuk komponen UI, pertanyaan asas, pertanyaan penomboran, pertanyaan tanpa had, mutasi dan bab lain.)

Atas ialah kandungan terperinci React Query 3: Panduan untuk mengambil dan menguruskan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!