Kemas kini data masa nyata menggunakan pemalam pangkalan data React Query

Gunakan pemalam pangkalan data React Query untuk kemas kini data masa nyata

React Query ialah alat pengurusan data yang berkuasa yang boleh membantu kami memudahkan aplikasi React kami proses pemprosesan data. Ia menyediakan penyelesaian yang elegan untuk operasi seperti pengambilan data, caching dan pengemaskinian. Artikel ini akan memperkenalkan cara menggunakan pemalam React Query untuk melaksanakan fungsi kemas kini data masa nyata dan memberikan contoh kod khusus.

Untuk lebih memahami proses ini, kami akan mengambil aplikasi pengurusan tugasan yang mudah sebagai contoh. Mari kita anggap bahawa terdapat senarai tugasan dalam aplikasi Apabila pengguna menyelesaikan tugasan, kita perlu mengemas kini status tugasan dalam masa nyata.

Pertama sekali, kita perlu memasang pemalam React Query. Jalankan arahan berikut dalam terminal:

npm install react-query

Selepas pemasangan selesai, kami boleh memperkenalkan React Query ke dalam komponen akar aplikasi dan mencipta contoh QueryClient global. Kodnya adalah seperti berikut:

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用组件 */}
    </QueryClientProvider>
  );
}

export default App;

Seterusnya, dalam komponen di mana kita perlu mengemas kini data dalam masa nyata, buat operasi kemas kini data dengan menggunakan cangkuk useMutation yang disediakan oleh React Query. Kami boleh mentakrifkan logik kemas kini dalam pengendali acara klik pada butang penyiapan tugas. Kod khusus adalah seperti berikut:

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

function TaskItem({ task }) {
  const queryClient = useQueryClient();

  const completeTaskMutation = useMutation(async () => {
    // 发送异步请求完成任务
    await fetch(`/api/tasks/${task.id}`, { method: 'PUT', body: JSON.stringify({ completed: true }) });

    // 手动更新缓存
    queryClient.setQueryData(['tasks', task.id], { ...task, completed: true });
  });

  const handleCompleteClick = () => {
    completeTaskMutation.mutate();
  }

  return (
    <div>
      <p>{task.name}</p>
      <button onClick={handleCompleteClick}>完成</button>
    </div>
  );
}

Dalam kod ini, kami mula-mula mencipta pembolehubah bernama completeTaskMutation dengan memanggil useMutation. Ia ialah objek yang mengandungi fungsi mutasi, yang digunakan untuk mencetuskan operasi kemas kini data.

Dalam pengendali acara klik butang, kami memanggil completeTaskMutation.mutate() untuk mencetuskan kemas kini data. Ini akan memanggil fungsi async yang kami luluskan dalam useMutation dan selepas menyelesaikan permintaan tak segerak, kemas kini data dalam cache secara manual. Di sini kami menggunakan kaedah setQueryData untuk mengemas kini data tugasan dalam cache dan memasukkan ['tasks', task.id] sebagai parameter pertama untuk menunjukkan bahawa ini ialah operasi pertanyaan untuk senarai tugasan.

Akhir sekali, dalam komponen senarai tugas, kami menggunakan cangkuk useQuery untuk mendapatkan data tugasan. Kodnya adalah seperti berikut:

import { useQuery } from 'react-query';

function TaskList() {
  const { data } = useQuery('tasks', async () => {
    const response = await fetch('/api/tasks');
    const data = await response.json();
    return data;
  });

  return (
    <div>
      {data && data.map(task => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
}

Dalam kod ini, kami memanggil useQuery('tasks', ...) untuk memulakan operasi pertanyaan. Parameter pertama ialah kunci yang digunakan untuk mengenal pasti pertanyaan, di sini kita menggunakan 'tugas'. Parameter kedua ialah fungsi tak segerak yang digunakan untuk mendapatkan data senarai tugas. Kami boleh menghantar permintaan tak segerak dalam fungsi ini dan mengembalikan data tindak balas. React Query akan menyimpan data ini secara automatik dan mengemas kininya apabila diperlukan.

Melalui contoh kod di atas, kami berjaya menggunakan pemalam React Query untuk melaksanakan fungsi kemas kini data masa nyata. Sama ada mencipta data baharu, mengemas kini data atau memadamkan data, React Query boleh membantu kami mengurus proses pemerolehan dan kemas kini data, sekaligus memudahkan kerumitan pemprosesan data dalam aplikasi. Saya harap artikel ini akan membantu anda mempelajari cara menggunakan React Query!

Atas ialah kandungan terperinci Kemas kini data masa nyata menggunakan pemalam pangkalan data React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!