React Query (TanStack Query): Pengambilan Data dan Pengurusan Negeri yang Cekap untuk React

Pertanyaan React (Pertanyaan TanStack): Perpustakaan Pengambilan Data dan Pengurusan Negeri yang Berkuasa untuk React

React Query (kini dipanggil TanStack Query) ialah pustaka pengurusan negeri dan pengambilan data yang sangat popular untuk aplikasi React. Ia memudahkan kerja dengan data jauh dengan mengendalikan kerumitan pengambilan data, caching, penyegerakan dan penomboran. React Query menghilangkan banyak proses manual yang terlibat dalam membuat permintaan API, menyimpan dan mengemas kini data serta mengurus keadaan pemuatan.

TanStack Query membantu pembangun mengurus keadaan pelayan dalam aplikasi React dengan persediaan minimum, memastikan pengalaman pengguna yang lancar, terutamanya apabila berurusan dengan operasi tak segerak.

---

1. Apakah itu React Query (TanStack Query)?

React Query ialah alat pengambilan data dan state management yang membantu dalam memudahkan proses berinteraksi dengan data sebelah pelayan dalam aplikasi React. Ia mengabstrak dan mengurus pengambilan, caching, penyegerakan dan pengemaskinian latar belakang data.

Ia digunakan terutamanya untuk mengurus keadaan pelayan, yang merujuk kepada data yang datang daripada pelayan jauh atau API, seperti data daripada REST API, GraphQL atau mana-mana sumber data lain.

Ciri Utama:

• Caching Automatik: React Query secara automatik cache data yang diambil, yang membolehkan pengambilan data berikutnya yang lebih pantas tanpa permintaan rangkaian tambahan.
• Penyegerakan Automatik: Ia memastikan data anda kekal segerak antara klien dan pelayan, walaupun apabila pengguna bertukar antara halaman atau melawat semula apl.
• Pengambilan Latar Belakang: React Query boleh mengambil semula data secara automatik di latar belakang untuk memastikan pengguna sentiasa mempunyai data yang paling terkini.
• Polling dan Penomboran: React Query menyokong pengundian dan penomboran di luar kotak, yang memudahkan tugas biasa ini.

---

2. Konsep Teras Pertanyaan Reaksi

1. Pertanyaan

Pertanyaan dalam React Query digunakan untuk mengambil data daripada pelayan (atau mana-mana sumber data luaran). Pertanyaan dikenal pasti dengan kunci unik, yang React Query gunakan untuk cache dan menjejak data.

Contoh:

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json());
}

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

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

• useQuery cangkuk mengambil data menggunakan fungsi fetchPosts. Rentetan siaran ialah kunci unik dan React Query akan cache data yang diambil di bawah kunci ini.

2. Mutasi

Mutasi digunakan untuk mengubah suai atau mencipta data pada pelayan (cth., POST, PUT, DELETE permintaan). Seperti pertanyaan, mutasi boleh dijejaki dan mengemas kini keadaan anda secara automatik selepas mutasi berjaya.

Contoh:

import { useMutation } from 'react-query';

function createPost(postData) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify(postData),
    headers: { 'Content-Type': 'application/json' },
  }).then((response) => response.json());
}

const NewPost = () => {
  const mutation = useMutation(createPost);

  const handleCreatePost = async () => {
    await mutation.mutate({ title: 'New Post', body: 'This is a new post' });
  };

  return (
    <div>
      <button onClick={handleCreatePost}>Create Post</button>
      {mutation.isLoading ? <p>Creating post...</p> : null}
      {mutation.isError ? <p>Error creating post</p> : null}
      {mutation.isSuccess ? <p>Post created!</p> : null}
    </div>
  );
};

• useMutation cangkuk digunakan untuk operasi seperti mencipta, mengemas kini atau memadam data.

3. Cache

React Query secara automatik cache hasil pertanyaan. Caching ini membolehkan pemaparan yang lebih pantas dan mengelakkan membuat permintaan pendua kepada pelayan. Data cache dikemas kini secara automatik apabila pertanyaan diambil semula.

Anda boleh menyesuaikan gelagat caching agar sesuai dengan keperluan apl anda, seperti menetapkan masa cache atau menentukan masa lapuk (masa selepas itu data cache dianggap lapuk).

Contoh:

const { data } = useQuery('posts', fetchPosts, {
  staleTime: 1000 * 60 * 5, // Cache is fresh for 5 minutes
  cacheTime: 1000 * 60 * 30, // Cache persists for 30 minutes
});

4. Penomboran

React Query menyediakan sokongan terbina dalam untuk penomboran. Anda boleh mengambil data bernombor dengan halaman tersuai dan menghadkan parameter, dan ia akan cache respons dengan sewajarnya.

Contoh:

const fetchPage = (page) => fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`)
  .then((res) => res.json());

const PaginatedPosts = () => {
  const [page, setPage] = React.useState(1);
  const { data, isLoading, isError } = useQuery(['posts', page], () => fetchPage(page));

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return (
    <div>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={() => setPage((prev) => prev - 1)} disabled={page === 1}>
        Previous
      </button>
      <button onClick={() => setPage((prev) => prev + 1)}>Next</button>
    </div>
  );
};

• Kait useQuery digunakan dengan kunci tatasusunan (['siaran', halaman]) untuk mengambil data bernombor.

---

3. Memasang dan Menyediakan Pertanyaan Reaksi (Pertanyaan TanStack)

Untuk menggunakan React Query, anda perlu memasang react-query (TanStack Query):

npm install react-query

1. Menyediakan Pembekal Pertanyaan React

Untuk mendayakan React Query dalam aplikasi anda, anda perlu membungkus komponen akar anda dalam QueryClientProvider untuk menyediakan konteks yang diperlukan kepada keseluruhan apl.

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <YourApp />
  </QueryClientProvider>
);

• QueryClient ialah objek teras React Query. Ia mengurus semua pertanyaan dan mutasi dalam apl anda.

---

4. Ciri Lanjutan React Query

1. Penomboran dan Pertanyaan Infinite

React Query menyokong penomboran dan penatalan tak terhingga dengan useInfiniteQuery, membolehkan anda mengendalikan senarai dan penomboran tak terhingga.

Contoh:

import { useInfiniteQuery } from 'react-query';

function fetchPostsPage({ pageParam = 1 }) {
  return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam}`)
    .then((res) => res.json());
}

const InfinitePosts = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetchingNextPage,
  } = useInfiniteQuery('posts', fetchPostsPage, {
    getNextPageParam: (lastPage, allPages) => lastPage.length === 10 ? allPages.length + 1 : false,
  });

  return (
    <div>
      {isLoading ? <div>Loading...</div> : null}
      {data?.pages.map((page, i) => (
        <div key={i}>
          {page.map((post) => (
            <p key={post.id}>{post.title}</p>
          ))}
        </div>
      ))}
      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
        {isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'No more posts'}
      </button>
    </div>
  );
};

2. Pembatalan Pertanyaan

Anda boleh membatalkan pertanyaan secara manual menggunakan queryClient.invalidateQueries. Ini memaksa pengambilan semula data untuk kunci pertanyaan yang ditentukan.

Contoh:

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json());
}

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

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

• Ini memastikan bahawa selepas membuat siaran baharu, senarai siaran diambil semula secara automatik.

---

5. Faedah Menggunakan React Query

1. Pengambilan Data Ringkas

React Query mengurangkan boilerplate untuk mengendalikan keadaan pemuatan, kejayaan dan ralat, menjadikan pengambilan data lebih mudah dan lebih deklaratif.

2. Caching Automatik

Data yang diambil dicache secara lalai, mengurangkan permintaan rangkaian yang tidak diperlukan dan mempercepatkan apl anda.

3. Kemas Kini Latar Belakang

React Query menyediakan pengambilan data latar belakang, memastikan data apl anda kekal segar walaupun ia tidak diambil semula secara eksplisit.

4. Penomboran Terbina dalam dan Pertanyaan Infinite

Mengendalikan penomboran dan penatalan tanpa had adalah mudah dan cekap dengan cangkuk terbina dalam React Query.

5. DevTools untuk Penyahpepijatan

React Query menyediakan antara muka DevTools yang sangat baik untuk memeriksa pertanyaan, mutasi dan keadaannya dalam masa nyata.

---

**6. Kesimpulan

**

React Query (TanStack Query) menyediakan cara yang cekap dan berskala untuk mengendalikan pengambilan data dan pengurusan keadaan dalam aplikasi React. Dengan cache terbina dalam, pengambilan latar belakang, penomboran dan pengendalian ralat, React Query menjadikan interaksi dengan data sebelah pelayan mudah dan lancar.

---

Atas ialah kandungan terperinci React Query (TanStack Query): Pengambilan Data dan Pengurusan Negeri yang Cekap untuk React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!