Bagaimana untuk melaksanakan kemas kini tambahan data dalam React Query?

Bagaimana untuk melaksanakan kemas kini tambahan data dalam React Query?

Kata Pengantar:
Dalam pembangunan bahagian hadapan moden, pengemaskinian data masa nyata adalah keperluan yang sangat penting. React Query ialah perpustakaan pengurusan data yang berkuasa yang menyediakan cara yang mudah dan cekap untuk mengurus data bagi aplikasi bahagian hadapan. Apabila menggunakan React Query, kami sering menghadapi situasi di mana kami perlu melaksanakan kemas kini tambahan, iaitu, hanya mengemas kini bahagian data yang baru ditambah, diubah suai atau dipadamkan. Artikel ini menerangkan cara untuk melaksanakan fungsi ini dalam React Query dan menyediakan contoh kod khusus.

Langkah 1: Pasang dan konfigurasikan React Query

Mula-mula, kita perlu memasang React Query dan pakej pergantungan yang berkaitan. Anda boleh menggunakan npm atau yarn untuk memasang:

npm install react-query axios

atau

yarn add react-query axios

Seterusnya, kita perlu mengkonfigurasi React Query dalam fail kemasukan aplikasi (biasanya index.js atau App.js). Mula-mula, import komponen ReactQueryClient dan ReactQueryProvider:

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

Kemudian, buat contoh QueryClient dan bungkusnya dalam komponen QueryClientProvider:

const queryClient = new QueryClient();

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

Kini, kami telah memasang dan mengkonfigurasi React Query, dan bersedia untuk menggunakannya dalam aplikasi kami.

Langkah Kedua: Tentukan Permintaan Data

Seterusnya, kami perlu mentakrifkan permintaan data kami. Kami boleh menggunakan axios, perpustakaan klien HTTP yang popular, untuk menghantar permintaan.

Pertama, import axios:

import axios from 'axios';

Kemudian, tentukan pembolehubah apiUrl untuk menyimpan URL sumber data kami:

const apiUrl = 'https://api.example.com/data';

Seterusnya, kami boleh menggunakan axios untuk menghantar permintaan GET untuk mendapatkan data:

const fetchData = async () => {
  const response = await axios.get(apiUrl);
  return response.data;
};

Langkah 3: Dapatkan data menggunakan React Query

Kini, kita boleh menggunakan useQuery hook React Query untuk mendapatkan data. Gunakan cangkuk useQuery dalam komponen, menghantar kunci pertanyaan dan fungsi permintaan data. Kunci pertanyaan ialah rentetan yang mengenal pasti pertanyaan secara unik. Apabila data berubah, React Query mengemas kini data berdasarkan kunci pertanyaan.

import { useQuery } from 'react-query';

const MyComponent = () => {
  const { data, isLoading, error } = useQuery('data', fetchData);

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

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

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

Dalam kod di atas, kami menggunakan kunci pertanyaan bernama 'data' untuk mengenal pasti pertanyaan. Fungsi fetchData digunakan untuk memulakan permintaan data.

Langkah 4: Gunakan React Query untuk melaksanakan kemas kini tambahan

Kunci untuk melaksanakan kemas kini tambahan ialah cara mengemas kini hanya sebahagian daripada data yang baru ditambah, diubah suai atau dipadamkan. Dalam React Query, kami boleh menggunakan kaedah queryClient.setQueryData() untuk mengemas kini data secara manual.

Pertama, kita perlu menggunakan cangkuk useMutation dalam komponen untuk menentukan kaedah yang mengemas kini data:

import { useMutation } from 'react-query';

const MyComponent = () => {
  const { data, isLoading, error } = useQuery('data', fetchData);
  const mutation = useMutation((updatedData) => {
    queryClient.setQueryData('data', updatedData);
  });

  const handleUpdateData = () => {
    const updatedData = // 在这里根据需要修改 data
    mutation.mutate(updatedData);
  };

  // ...其他代码

  return (
    <div>
      <button onClick={handleUpdateData}>Update Data</button>
    </div>
  );
};

Dalam kod di atas, kami menggunakan cangkuk useMutation untuk menentukan kaedah mutasi yang mengambil data yang dikemas kini sebagai parameter. Kami kemudian menggunakan kaedah queryClient.setQueryData() untuk mengemas kini data yang dikemas kini ke dalam kunci pertanyaan 'data'.

Akhir sekali, kemas kini tambahan boleh dicetuskan dalam komponen dengan memanggil kaedah mutation.mutate().

Ringkasan:

Melalui langkah di atas, kami boleh mencapai kemas kini tambahan data dalam React Query. Mula-mula, pasang dan konfigurasikan React Query. Kemudian, tentukan fungsi permintaan data dan kaedah untuk mengemas kini data. Akhir sekali, gunakan cangkuk React Query dalam komponen untuk mendapatkan data dan mencetuskan kemas kini tambahan dengan memanggil kaedah mutation.mutate(). Dengan cara ini, kami boleh mencapai kemas kini masa nyata pada data dan meningkatkan prestasi dan pengalaman pengguna aplikasi.

Nota: Untuk memudahkan kod, beberapa pengendalian ralat dan pelarasan struktur kod telah ditinggalkan daripada contoh di atas. Dalam aplikasi praktikal, kita perlu membuat pelarasan dan pemprosesan yang sesuai mengikut situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kemas kini tambahan data dalam React Query?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!