Memanfaatkan Pertanyaan Reaksi dan Pangkalan Data untuk Konsistensi Cache Data

Menggunakan React Query dan pangkalan data untuk mencapai ketekalan cache data

Apabila aplikasi bahagian hadapan menjadi semakin kompleks, kita sering perlu berinteraksi dengan data bahagian belakang. Untuk meningkatkan prestasi aplikasi dan pengalaman pengguna, kami biasanya menggunakan caching data untuk mengurangkan bilangan permintaan rangkaian. Walau bagaimanapun, caching data membawa soalan penting: bagaimana untuk mengekalkan konsistensi data cache dengan pangkalan data back-end? Dalam artikel ini, saya akan menerangkan cara memanfaatkan React Query dan pangkalan data untuk mencapai ketekalan cache data dan memberikan contoh kod konkrit.

React Query ialah caching data dan pustaka pengurusan negeri yang sangat baik, yang boleh membantu kami mengendalikan isu cache dan penyegerakan data dengan mudah. Dalam artikel ini, kami akan menggunakan React Query untuk cache data senarai pengguna dan memastikan bahawa data cache konsisten dengan data dalam pangkalan data.

Pertama, kita perlu memasang React Query:

npm install react-query

Kemudian, kita boleh mula menulis kod. Berikut ialah contoh mudah yang menunjukkan cara untuk cache data senarai pengguna menggunakan React Query:

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

const queryClient = new QueryClient();

const fetchUsers = async () => {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
}

const UserList = () => {
  const { data } = useQuery('users', fetchUsers);

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

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

export default App;

Dalam kod di atas, kami telah menggunakan fungsi cangkuk useQuery untuk mendapatkan data senarai pengguna daripada cache atau backend . Parameter pertama fungsi useQuery ialah rentetan yang mengenal pasti nama kunci data cache. Pada permintaan seterusnya, kami boleh menggunakan nama kunci yang sama untuk mendapatkan data cache dan bukannya membuat permintaan rangkaian lain. useQuery 钩子函数来从缓存或后端获取用户列表数据。useQuery 函数的第一个参数是一个字符串，用来标识缓存数据的键名。在后续的请求中，我们可以使用相同的键名来获取缓存数据，而不是再次发送网络请求。

同时，我们定义了一个名为 fetchUsers 的函数，该函数通过网络请求获取用户列表数据。这个函数会在初始渲染时触发，从而获取数据并自动更新缓存。

接下来，我们需要确保缓存数据与后端数据库的一致性。为了实现这个目标，我们可以使用 React Query 的 refetch 方法来手动触发数据的更新。下面是一个示例：

import { useQueryClient } from 'react-query';

const UserList = () => {
  const queryClient = useQueryClient();
  const { data } = useQuery('users', fetchUsers);

  const handleUpdate = async () => {
    // 手动触发数据更新
    await queryClient.refetchQueries('users');
  }

  return (
    <div>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <button onClick={handleUpdate}>更新数据</button>
    </div>
  );
}

上面的代码中，我们首先使用 useQueryClient 钩子函数获取一个 QueryClient 实例。然后，我们定义了一个 handleUpdate 函数，该函数通过调用 queryClient.refetchQueries 方法手动触发数据的更新。最后，我们在用户列表下方添加了一个按钮，点击按钮后会调用 handleUpdate

Pada masa yang sama, kami menentukan fungsi bernama fetchUsers, yang memperoleh data senarai pengguna melalui permintaan rangkaian. Fungsi ini akan dicetuskan pada pemaparan awal untuk mendapatkan data dan mengemas kini cache secara automatik.

Seterusnya, kita perlu memastikan ketekalan data cache dengan pangkalan data bahagian belakang. Untuk mencapai matlamat ini, kami boleh menggunakan kaedah refetch React Query untuk mencetuskan kemas kini data secara manual. Berikut ialah contoh:

rrreee

Dalam kod di atas, kami mula-mula menggunakan fungsi cangkuk useQueryClient untuk mendapatkan contoh QueryClient. Kemudian, kami mentakrifkan fungsi handleUpdate yang mencetuskan kemas kini data secara manual dengan memanggil kaedah queryClient.refetchQueries. Akhir sekali, kami menambah butang di bawah senarai pengguna Apabila diklik, fungsi handleUpdate akan dipanggil untuk mendapatkan data terkini daripada bahagian belakang.

Melalui kaedah di atas, kita boleh mencapai konsistensi antara cache data bahagian hadapan dan pangkalan data bahagian belakang. Apabila kami mencetuskan kemas kini data secara manual, React Query menghantar permintaan rangkaian secara automatik dan mengemas kini data dalam cache. 🎜🎜Ringkasnya, menggunakan React Query dan pangkalan data untuk mencapai konsistensi cache data ialah kaedah yang cekap yang boleh memastikan data yang tepat dan terkini sambil mengekalkan prestasi aplikasi. Dengan menggunakan ciri yang disediakan oleh React Query dengan betul, kami boleh mengendalikan cache data dan isu penyegerakan dengan mudah serta meningkatkan pengalaman pengguna aplikasi. 🎜🎜Saya harap artikel ini akan membantu anda memahami dan menguasai penggunaan React Query dan pangkalan data untuk mencapai konsistensi cache data. Saya berharap anda lebih berjaya dalam pembangunan bahagian hadapan! 🎜

Atas ialah kandungan terperinci Memanfaatkan Pertanyaan Reaksi dan Pangkalan Data untuk Konsistensi Cache Data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!