Bagaimana untuk mencapai replikasi segera pangkalan data dalam React Query?

Bagaimana untuk melaksanakan replikasi pangkalan data segera dalam React Query?

Pengenalan:
Dalam pembangunan aplikasi moden, replikasi masa nyata pangkalan data sering terlibat. Replikasi segera bermakna apabila penambahan, pemadaman dan pengubahsuaian berlaku dalam pangkalan data, data terkini boleh disegerakkan secara automatik ke aplikasi. React Query ialah alat yang berkuasa untuk mengurus data aplikasi, menyediakan banyak ciri berguna untuk mengendalikan pengambilan, pengemaskinian dan caching data. Artikel ini akan memperkenalkan cara menggunakan React Query untuk mencapai replikasi segera pangkalan data dan menyediakan contoh kod khusus.

Langkah 1: Pasang dan Sediakan React Query
Mula-mula, kita perlu memasang React Query dan menyediakannya. Jalankan arahan berikut dalam terminal:

npm install react-query

Kemudian, import React Query dalam fail masukan aplikasi dan gunakan komponen QueryClientProvider untuk menyediakan objek QueryClient global. Kod sampel adalah seperti berikut:

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

const queryClient = new QueryClient();

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

Langkah 2: Tentukan fungsi pertanyaan dan kemas kini
Seterusnya, kita perlu mentakrifkan fungsi pertanyaan dan kemas kini. Fungsi pertanyaan digunakan untuk mendapatkan data terkini daripada pangkalan data, manakala fungsi kemas kini digunakan untuk memasukkan, mengemas kini atau memadam data ke dalam pangkalan data. Kod sampel adalah seperti berikut:

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

// 查询函数
const fetchItems = async () => {
  const response = await fetch('/api/items');
  return response.json();
};

// 更新函数
const updateItem = async (item) => {
  const response = await fetch(`/api/items/${item.id}`, {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(item),
  });
  return response.json();
};

Langkah 3: Gunakan useQuery dan useMutation
Kini, kita boleh menggunakan useQuery dan useMutation cangkuk dalam komponen untuk mendapatkan dan mengemas kini data. Kod sampel adalah seperti berikut:

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

const ItemList = () => {
  // 获取最新的数据
  const { data: items } = useQuery('items', fetchItems);

  // 创建更新函数
  const mutation = useMutation(updateItem, {
    onSuccess: () => {
      queryClient.invalidateQueries('items');
    },
  });

  // 提交数据更新
  const handleSubmit = () => {
    const item = {
      id: 1,
      name: 'New Item',
    };
    mutation.mutate(item);
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={handleSubmit}>添加新项目</button>
    </div>
  );
};

Dalam kod sampel di atas, kami menggunakan useQuery hook untuk mendapatkan data terkini, dan useMutation hook untuk mencipta fungsi kemas kini. Apabila data berjaya dikemas kini, kami membatalkan pertanyaan dan mencetuskan pengambilan semula data dengan memanggil queryClient.invalidateQueries('item').

Ringkasan:
Dengan menggunakan React Query, kami boleh mencapai replikasi segera pangkalan data dengan mudah. Mula-mula, kita perlu memasang dan menyediakan React Query, dan menentukan fungsi pertanyaan dan kemas kini. Kemudian, kita boleh menggunakan cangkuk useQuery dan useMutation dalam komponen untuk mendapatkan dan mengemas kini data. Replikasi segera pangkalan data boleh dicapai dengan memanggil kaedah queryClient.invalidateQueries dalam panggilan balik onSuccess bagi fungsi kemas kini. Dengan cara ini, kami boleh mencapai penyegerakan segera dan kemas kini data dengan mudah.

Di atas ialah pengenalan terperinci dan contoh kod tentang cara melaksanakan replikasi segera pangkalan data dalam React Query. Saya harap artikel ini dapat membantu pembaca lebih memahami dan menggunakan React Query untuk merealisasikan fungsi replikasi segera pangkalan data.

Atas ialah kandungan terperinci Bagaimana untuk mencapai replikasi segera pangkalan data dalam React Query?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!