Cache data bercantum menggunakan React Query dan pangkalan data

Gunakan React Query dan pangkalan data untuk penggabungan cache data

Pengenalan:
Dalam pembangunan bahagian hadapan moden, pengurusan data adalah bahagian yang sangat penting. Untuk meningkatkan prestasi dan pengalaman pengguna, kami biasanya perlu menyimpan cache data yang dikembalikan oleh pelayan dan menggabungkannya dengan data pangkalan data tempatan. React Query ialah perpustakaan caching data yang sangat popular yang menyediakan API yang berkuasa untuk mengendalikan pertanyaan, caching dan mengemas kini data. Artikel ini akan memperkenalkan cara menggunakan React Query dan pangkalan data untuk penggabungan cache data, dan memberikan contoh kod khusus.

Langkah 1: Pasang dan konfigurasikan React Query
Mula-mula, kita perlu memasang React Query. Buka terminal dan laksanakan arahan berikut:

npm install react-query
atau
yarn add react-query
Seterusnya, buat fail konfigurasi untuk React Query dalam projek kami. Buat fail bernama react-query-config.js dalam direktori src dan tambah kandungan berikut:

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

const queryClient = new QueryClient();

export const QueryClientProviderWrapper = ({ children }) => (
4ff4012f2f27f4e315cebf66acd66b88

{children}

312edf7fbf3a24b7b5e525df9ab19b12
);
Di sini kami mencipta contoh bernama QueryClientProvider dan menetapkannya Dengan cara ini kita boleh menggunakan React Query sepanjang projek.

Langkah 2: Cipta API data
Kini kita perlu mencipta API data untuk mendapatkan data pada pelayan dan cachekannya ke dalam React Query. Katakan API kami menyediakan kaedah getItems() yang mendapat senarai item dan mengembalikan tatasusunan yang mengandungi semua item. Buat fail bernama api.js dalam direktori src dan tambah kandungan berikut:

import { queryClient } daripada './react-query-config';

export const getItems = async () => Dapatkan data item daripada pelayan
const response = await fetch('/api/items');
const data = await response.json(); , data);

kembali data;

};
Di sini kami menggunakan kaedah fetch() untuk mendapatkan data daripada pelayan dan kaedah queryClient.setQueryData() untuk cache data ke dalam React Query.

Langkah 3: Buat API pangkalan data
Seterusnya, kita perlu mencipta API pangkalan data untuk mendapatkan data daripada pangkalan data tempatan. Katakan pangkalan data kami menyediakan kaedah getItemsFromDatabase() untuk mendapatkan senarai item dalam pangkalan data dan mengembalikan tatasusunan yang mengandungi semua item. Cipta fail bernama database.js dalam direktori src dan tambahkan kandungan berikut:

export const getItemsFromDatabase = () => {

// Dapatkan data item daripada pangkalan data
const item = ...

return item ;
};
Dalam aplikasi sebenar, anda perlu melaksanakan kaedah getItemsFromDatabase() mengikut jenis pangkalan data dan perpustakaan sepadan yang anda gunakan.

Langkah 4: Gabungkan Data
Kini, kita boleh menggunakan React Query dan API pangkalan data untuk menggabungkan data. Dalam komponen kami, kami menggunakan cangkuk useQuery() untuk mendapatkan data dan cangkuk useMutation() untuk mengendalikan kemas kini kepada data. Berikut ialah komponen contoh asas:

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

import { getItems, getItemsFromDatabase } from './api';

const ItemList = () => Gunakan useQuery hook untuk mendapatkan data

const { data: serverData } = useQuery('item', getItems);
const { data: databaseData } = useQuery('itemsFromDatabase', getItemsFromDatabase);

// Gunakan useMutation hook untuk memproses Data kemas kini
const { mutate } = useMutation(() => {

// 在这里使用数据库API更新数据

});

// Cantumkan data cache dan data pangkalan data
const mergedData = [...serverData, ...databaseData];

return (

<div>
  {mergedData.map((item) => (
    <div key={item.id}>{item.name}</div>
  ))}
</div>

);
};

Di sini, kami menggunakan dua cangkuk useQuery untuk mendapatkan data daripada pelayan dan pangkalan data masing-masing (dengan menghantar 'item' dan 'itemFromDatabase' sebagai kunci pertanyaan). Kami kemudian menggunakan cangkuk useMutation untuk mengendalikan kemas kini kepada data. Akhir sekali, kami menggabungkan data cache dengan data pangkalan data dan memaparkannya dalam komponen.

Ringkasan:

Menggunakan React Query dan pangkalan data untuk penggabungan cache data boleh meningkatkan prestasi aplikasi dan pengalaman pengguna. Dalam artikel ini, kami mempelajari cara memasang dan mengkonfigurasi React Query serta menggunakan React Query dan API pangkalan data untuk mendapatkan dan mengemas kini data. Saya harap artikel ini membantu dan jika anda mempunyai sebarang pertanyaan, sila tanya!

Atas ialah kandungan terperinci Cache data bercantum menggunakan React Query dan pangkalan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!