Menguasai Pertanyaan TanStack: Panduan Komprehensif untuk Pengambilan Data yang Cekap dalam React

Dalam pembangunan React moden, pengambilan data yang cekap dan pengurusan keadaan adalah penting untuk membina aplikasi yang responsif dan berprestasi. Walaupun alat tradisional seperti useEffect dan useState boleh mengendalikan pengambilan data, ia sering menghasilkan kod yang kompleks dan sukar diselenggara, terutamanya apabila aplikasi anda berkembang. Masukkan TanStack Query (dahulunya dikenali sebagai React Query), perpustakaan berkuasa yang memudahkan pengambilan data, caching, penyegerakan dan banyak lagi.

Dalam siaran ini, kami akan mendalami apa itu TanStack Query, sebab anda perlu mempertimbangkan untuk menggunakannya dan cara melaksanakannya dalam aplikasi React anda.

---

Apakah TanStack Query?

TanStack Query ialah perpustakaan pengambilan data tanpa kepala untuk React dan rangka kerja lain. Ia menyediakan alatan untuk mengambil, menyimpan cache, menyegerak dan mengemas kini keadaan pelayan dalam aplikasi anda tanpa memerlukan kod yang rumit dan sering berlebihan.

Ciri Utama:

• Caching Data: Menyimpan data secara automatik dan menggunakannya semula sehingga ia menjadi basi.
• Pengambilan Semula Automatik: Mengambil semula data secara automatik di latar belakang untuk memastikan UI anda dikemas kini.
• Kemas Kini Optimis: Menyediakan mekanisme untuk kemas kini optimistik, memastikan UI yang responsif.
• Rendering Sebelah Pelayan: Menyokong pemaparan sebelah pelayan dengan mudah.
• Out-of-the-Box Devtools: Termasuk devtools untuk nyahpepijat dan pertanyaan pemantauan.

Mengapa Gunakan Pertanyaan TanStack?

Menggunakan TanStack Query boleh memudahkan logik pengambilan data dalam aplikasi React anda secara drastik. Berikut ialah beberapa sebab untuk mempertimbangkannya:

• Mengurangkan Kod Boilerplate: Mengambil data menggunakan useEffect memerlukan pengurusan keadaan pemuatan, pengendalian ralat dan pengambilan semula. TanStack Query menguraikan kebimbangan ini, membolehkan anda menumpukan pada fungsi teras.

• Meningkatkan Prestasi: Dengan caching, pengambilan semula latar belakang dan penyahduplikasian, TanStack Query membantu meningkatkan prestasi aplikasi dengan mengurangkan permintaan rangkaian yang tidak perlu.

• Mengendalikan Senario Kompleks: Sama ada penomboran, penatalan tidak terhingga atau mengendalikan data lapuk, TanStack Query menyediakan penyelesaian yang mantap untuk keperluan pengambilan data yang kompleks.

Cara Menggunakan Pertanyaan TanStack dalam Aplikasi React

Mari kita mula menyediakan TanStack Query dalam projek React dan menggunakannya untuk mengambil data daripada API.

Langkah 1: Pemasangan

Mula-mula, pasang pakej yang diperlukan:

npm install @tanstack/react-query

Jika anda menggunakan TypeScript, anda juga perlu memasang jenis:

npm install @tanstack/react-query @types/react

Langkah 2: Sediakan Klien Pertanyaan

Sebelum menggunakan TanStack Query dalam aplikasi anda, anda perlu menyediakan QueryClient dan bungkus aplikasi anda dengan QueryClientProvider.

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Create a client
const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Langkah 3: Mengambil Data dengan useQuery

Untuk mengambil data, TanStack Query menyediakan cangkuk useQuery. Cangkuk ini mengambil kunci pertanyaan dan fungsi yang mengembalikan janji (biasanya panggilan API).

Berikut ialah contoh mengambil data daripada API:

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

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  const { data, error, isLoading } = useQuery(['posts'], fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading posts</div>;

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

Langkah 4: Mengendalikan Keadaan Pertanyaan

TanStack Query memudahkan anda mengendalikan keadaan pertanyaan anda yang berbeza, seperti pemuatan, ralat atau kejayaan. Anda boleh menggunakan isLoading, isError, isSuccess dan sifat lain yang disediakan oleh useQuery untuk mengawal perkara yang diberikan berdasarkan keadaan pertanyaan.

const { data, error, isLoading, isSuccess, isError } = useQuery(['posts'], fetchPosts);

if (isLoading) {
  return <div>Loading...</div>;
}

if (isError) {
  return <div>Error: {error.message}</div>;
}

if (isSuccess) {
  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

Langkah 5: Kemas Kini Optimis

Kemas kini optimistik membolehkan anda mengemas kini UI sebelum pelayan mengesahkan kemas kini, memberikan pengalaman pengguna yang lebih pantas. Ini boleh dilakukan menggunakan cangkuk useMutation dalam TanStack Query.

import { useMutation, useQueryClient } from '@tanstack/react-query';

const addPost = async (newPost) => {
  const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
  return data;
};

function AddPost() {
  const queryClient = useQueryClient();

  const mutation = useMutation(addPost, {
    onMutate: async newPost => {
      await queryClient.cancelQueries(['posts']);

      const previousPosts = queryClient.getQueryData(['posts']);

      queryClient.setQueryData(['posts'], old => [...old, newPost]);

      return { previousPosts };
    },
    onError: (err, newPost, context) => {
      queryClient.setQueryData(['posts'], context.previousPosts);
    },
    onSettled: () => {
      queryClient.invalidateQueries(['posts']);
    },
  });

  return (
    <button onClick={() => mutation.mutate({ title: 'New Post', body: 'This is a new post.' })}>
      Add Post
    </button>
  );
}

Kesimpulan

TanStack Query ialah alat berkuasa yang boleh meningkatkan dengan ketara cara anda mengurus keadaan sisi pelayan dalam aplikasi React anda. Dengan mengendalikan pengambilan data, caching, penyegerakan dan banyak lagi, ia membolehkan anda menumpukan pada ciri membina tanpa terperangkap oleh kerumitan pengurusan negeri.

Sama ada anda sedang membina projek kecil atau aplikasi berskala besar, penyepaduan TanStack Query boleh membawa kepada kod yang lebih bersih, lebih boleh diselenggara dan pengalaman pengguna yang lebih baik. Dengan ciri seperti pengambilan semula automatik, caching dan kemas kini yang optimistik, TanStack Query ialah alat yang sangat diperlukan untuk pembangun React moden.

Cuba TanStack Query dalam projek anda yang seterusnya, dan alami kecekapan serta kesederhanaan yang dibawanya kepada pengambilan data dalam React!

Selamat Mengekod??

Atas ialah kandungan terperinci Menguasai Pertanyaan TanStack: Panduan Komprehensif untuk Pengambilan Data yang Cekap dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!