Bagaimana untuk melaksanakan caching data dan storan berterusan dalam React Query?

Bagaimana untuk melaksanakan caching data dan penyimpanan berterusan dalam React Query?

Apabila kerumitan aplikasi bahagian hadapan bertambah, pengurusan data menjadi sangat penting. React Query ialah alat yang berkuasa untuk pemerolehan dan pengurusan data. Ia menyediakan cara untuk memudahkan pengambilan data, caching dan penyegerakan, membantu kami membina aplikasi yang cekap dan mudah diselenggara dengan cepat.

Walaupun React Query mempunyai fungsi caching memori secara lalai, data cache akan hilang selepas memuat semula halaman. Untuk menyelesaikan masalah ini, kami perlu mengekalkan data cache ke storan setempat. Dalam artikel ini, kami akan meneroka cara melaksanakan caching data dan storan berterusan dalam React Query.

Mula-mula, kita perlu memasang React Query:

npm install react-query

Seterusnya, mari kita lihat cara menggunakan React Query untuk mendapatkan data dan cache serta mengekalkannya.

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

const queryClient = new QueryClient();

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

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

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

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

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

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

export default App;

Dalam kod di atas, kami menggunakan cangkuk useQuery untuk mendapatkan data. Kami menghantar pengecam unik 'data' sebagai kunci pertanyaan dan fungsi tak segerak untuk mengambil data fetchData. React Query akan cache data kami secara automatik dan menggunakan data cache dalam permintaan masa hadapan. useQuery 钩子来获取数据。我们传递一个唯一的标识符 'data' 作为查询键，以及一个取数据的异步函数 fetchData。React Query 会自动缓存我们的数据，并在以后的请求中使用缓存数据。

现在，我们来实现数据的持久化存储。我们可以使用 queryClient 的 getQueryData 和 setQueryData 方法来手动缓存和获取数据。同时，我们可以使用 localStorage 或其他类似于 localStorage 的持久化存储方案将数据保存在本地。

const fetchData = async () => {
  const cachedData = queryClient.getQueryData('data');

  if (cachedData) {
    return cachedData;
  }

  const response = await fetch('https://api.example.com/data');
  const data = response.json();

  queryClient.setQueryData('data', data);

  localStorage.setItem('data', JSON.stringify(data));

  return data;
};

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

  // ...

  return (
    // ...
  );
};

const App = () => {
  const cachedData = JSON.parse(localStorage.getItem('data'));

  if (cachedData) {
    queryClient.setQueryData('data', cachedData);
  }

  return (
    // ...
  );
};

在上述代码中，我们首先通过 queryClient.getQueryData 方法尝试从缓存中获取数据。如果数据存在，则直接返回缓存的数据，避免重新发起请求。如果数据不存在，则进行正常的数据请求流程，并使用 queryClient.setQueryData 方法将数据缓存起来。

在 App 组件中，我们首先尝试从本地存储中获取缓存的数据。如果数据存在，则使用 queryClient.setQueryData 方法将数据设置为初始缓存数据。

通过上述代码示例，我们成功实现了在 React Query 中的数据缓存和持久化存储。这使得我们的应用程序能够更高效地管理数据，并在刷新页面后能够恢复之前的状态。

总结：

• 使用 React Query 可以方便地获取和管理数据。
• React Query 默认具有内存缓存功能，但刷新页面后，缓存的数据将丢失。
• 我们可以使用 queryClient 的 getQueryData 和 setQueryData 方法手动缓存和获取数据。
• 我们可以使用 localStorage 或其他类似于 localStorage
Sekarang, mari kita laksanakan penyimpanan data yang berterusan. Kami boleh menggunakan kaedah getQueryData dan setQueryData queryClient untuk cache dan mendapatkan data secara manual. Pada masa yang sama, kami boleh menggunakan localStorage atau penyelesaian storan berterusan lain yang serupa dengan localStorage untuk menyimpan data secara setempat.
• rrreee
Dalam kod di atas, kami mula-mula cuba mendapatkan data daripada cache melalui kaedah queryClient.getQueryData. Jika data wujud, data yang dicache dikembalikan secara langsung untuk mengelak daripada memulakan semula permintaan. Jika data tidak wujud, teruskan dengan proses permintaan data biasa dan gunakan kaedah queryClient.setQueryData untuk cache data.

🎜Dalam komponen App, kami mula-mula cuba mendapatkan data cache daripada storan setempat. Jika data wujud, gunakan kaedah queryClient.setQueryData untuk menetapkan data kepada data cache awal. 🎜🎜Melalui contoh kod di atas, kami berjaya melaksanakan caching data dan penyimpanan berterusan dalam React Query. Ini membolehkan aplikasi kami mengurus data dengan lebih cekap dan memulihkan keadaan sebelumnya selepas memuat semula halaman. 🎜🎜Ringkasan: 🎜

🎜Gunakan React Query untuk mendapatkan dan mengurus data dengan mudah. 🎜🎜React Query mempunyai fungsi caching memori secara lalai, tetapi selepas memuat semula halaman, data cache akan hilang. 🎜🎜Kami boleh cache dan mendapatkan data secara manual menggunakan kaedah getQueryData dan setQueryData queryClient. 🎜🎜Kami boleh menggunakan localStorage atau penyelesaian storan berterusan lain yang serupa dengan localStorage untuk menyimpan data secara setempat. 🎜🎜Dengan caching data dan storan berterusan, kami boleh meningkatkan prestasi aplikasi dan memulihkan keadaan sebelumnya. 🎜🎜

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