Gunakan kueri Tanstack untuk aplikasi reaksi yang dapat diperluas – Beragampengetahuan

Saat membangun aplikasi reaksi, akuisisi data biasanya dimulai dengan alat seperti API ekstraksi asli atau AXIOS. Meskipun pendekatan ini berfungsi untuk proyek -proyek kecil, aplikasi yang lebih besar membutuhkan fitur seperti caching, coba lagi, sinkronisasi, dan membatalkan permintaan, dan di sini, sebelumnya Tanstack Query React Query unggul. Ini memberikan abstraksi untuk operasi CRUD untuk membangun tes tempur yang dibangun oleh manajemen negara yang kuat ada.

Dalam artikel ini, kami akan menelusuri penggunaan data akuisisi, menggunakan mutasi yang dilakukan oleh pengguna, dan menyoroti beberapa fungsi yang membuat fungsi tertentu merupakan Kueri Tanstack Alat yang berguna untuk ekstensi Aplikasi Bereaksi.

Gunakan UseQuery (dapatkan) untuk mendapatkan data

ini UseQuery kait desain Dapatkan panggilan API. Inilah contohnya:

const fetchMovies = async () => {
  const response = await fetch('/v1/api/movies');
  if (!response.ok) throw new Error('Failed to fetch movies');
  return response.json();
};

export const useFetchMoviesList = () => {
  return useQuery({
    queryKey: ['movies_list'],
    queryFn: fetchMovies,
    retry: 3,
  });
};

Dalam contoh ini, fetchMovies Permintaan fitur atau mendapatkan data dari ‘/v1/API/film’, jika respons gagal, kesalahan dilemparkan dan data JSON dikembalikan pada keberhasilan.

Kami membungkusnya dengan kait khusus, useFetchMoviesList,menggunakan useQuery. ini queryKey Tentukan permintaan yang di -cache, queryFn Tentukan cara mendapatkan data dan coba lagi: tiga permintaan yang gagal mengambil hingga tiga kali.

ini useFetchMoviesList Kaitnya bisa MovieList Komponennya adalah sebagai berikut:

const MoviesList = () => {
  const { data, isLoading, isError } = useFetchMoviesList();

  if (isLoading) return <span>Loading...</span>;
  if (isError) return <span>Something went wrong</span>;

  return (
    <ul>
      {data.map((movie: { id: number; title: string }) => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
};

intern MoviesList Komponen, kait memberikan status bawaan termasuk isLoading,,,,, isErrordan data. Di negara bagian ini, Anda tidak lagi mengelola useState atau useEffect Secara manual karena kueri Tanstack menanganinya untuk Anda. Komponen ini menampilkan pesan pemuatan ketika panggilan API berjalan, pesan kesalahan ditampilkan jika permintaan gagal setelah dilanjutkan, dan daftar film setelah data dimuat dengan sukses.

Gunakan pengguna untuk melakukan mutasi

ini menggunakan kait desain Untuk pengiriman /put /deleTE API Panggilan.

const addMovie = async (movieId: string) => {
  const response = await fetch('/v1/api/movies', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({ id: movieId }),
  });
  if (!response.ok) throw new Error('Failed to add movie');
  return response.json();
};


export const useAddMovie = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: addMovie,
    onSuccess: () => {
      // To GET the updated movie list since we added a movie
      queryClient.invalidateQueries({ queryKey: ['movies_list'] });
    },
  });
};

Dalam contoh ini, addMovie Fungsi tersebut mengirimkan permintaan posting ke “V1/API/Film” di badan permintaan menggunakan ID film baru. Jika respons gagal, kesalahan dinaikkan; Kalau tidak, ia mengembalikan respons JSON yang diuraikan.

Kami kemudian membungkusnya dengan kait khusus, useAddMovie,menggunakan useMutation. ini mutationFn Mendefinisikan bagaimana mutasi dilakukan dan onSuccess Panggilan balik invalidateQueries Segarkan cache movies_list bertanya. Ini memastikan bahwa UI mencerminkan daftar yang diperbarui segera setelah menambahkan film.

ini useAddMovie Kaitnya bisa AddMovieButton Komponennya adalah sebagai berikut:

const AddMovieButton = () => {
  const { mutate, isLoading, isError } = useAddMovie();

  const handleAddMovie = () => {
    mutate('123');
  };

  return (
    <section>
      <button onClick={handleAddMovie} disabled={isLoading}>
        {isLoading? 'Adding...': 'Add Movie'}
      </button>

      {isError && <span>Failed to add movie</span>}
    </section>
  );
};

ini AddMovieButton Pemanfaatan komponen useAddMovie Hook mengelola penambahan film baru. Ekstrak mutasi di dalam elemen, isLoadingDan isError Dari kait.

ini handleAddMovie Fungsi ini menyebut mutasi (‘123’), yang memicu mutasi untuk menambahkan film dengan ID ‘123’. Saat permintaan sedang berlangsung, tombol akan dinonaktifkan danTambahkan ke … ‘. Jika permintaan gagal, komponen akan menampilkan pesan kesalahan. Kalau tidak, setelah berhasil, kueri Tanstack akan secara otomatis menyegarkan daftar film.

Singkatnya, komponen ini menyediakan cara yang bersih untuk menambahkan film, menunjukkan pemuatan umpan balik pengguna dan status kesalahan secara real time tanpa perlu kode manajemen negara tambahan.

catatan:menggunakan useQuery Dan useMutationpohon komponen Anda harus dibungkus dengan queryclientprovider. Ini menetapkan konteks klien untuk kueri Tanstack.

Kueri Tanstack Menghilangkan kode boilerplate dan memberikan coba lagi, pilih-pilih, penanganan kesalahan, dan caching, membuat pengembang merasa lebih efisien dan produktif. Ini juga memiliki fitur berikut untuk secara efektif mengelola status server:

• Coba lagi logika: Mengkonfigurasi coba lagi (mis. Retry: 3) sehingga kegagalan sementara tidak menghancurkan aliran pengguna.
• Ekstraksi bersyarat: Setel untuk mengaktifkan false sehingga kueri menunggu sampai kondisi yang diperlukan dipenuhi.
• cache: Setelah data cache kueri Tanstack, komponen dibagikan setelah pengambilan pertama, sehingga mengurangi permintaan duplikat.
• Minta Batal: Batalkan kueri jika tidak lagi diperlukan, misalnya, ketika komponen dihapus atau ketika pengguna menavigasi.
• Latar belakang pilih -pilih: Tanstack Query secara otomatis membuat data tetap segar ketika pengguna memfokuskan kembali browser atau terhubung kembali ke jaringan.

Kueri Tanstack dapat berguna dalam aplikasi skala besar karena menghilangkan duplikat boilerplate, mengurangi risiko ketidakkonsistenan dan menyediakan produksi GRFitur ADE di luar kotak, seperti caching dan sinkronisasi. Namun, untuk aplikasi yang lebih kecil yang hanya membuat beberapa permintaan API, ekstraksi rata -rata mungkin cukup. Dalam hal ini, memperkenalkan pertanyaan Tanstack dapat meningkatkan ukuran bundling yang tidak perlu tanpa memberikan manfaat yang signifikan.

sebagai kesimpulan

Tanstack Query telah menjadi alat yang hebat bagi pengembang untuk menyelesaikan aplikasi yang kompleks dengan memberikan akuisisi data deklaratif, caching, pengambilan dan mutasi. Untuk aplikasi bereaksi skala besar, mengadopsi alat ini dapat membantu membangun sistem yang andal dan dapat dipelihara.