Tirer parti de la requête React et de la base de données pour la cohérence du cache de données

Utiliser React Query et la base de données pour assurer la cohérence du cache de données

À mesure que les applications frontales deviennent de plus en plus complexes, nous devons souvent interagir avec les données back-end. Afin d'améliorer les performances des applications et l'expérience utilisateur, nous utilisons généralement la mise en cache des données pour réduire le nombre de requêtes réseau. Cependant, la mise en cache des données soulève un problème important : comment maintenir la cohérence des données mises en cache avec la base de données back-end ? Dans cet article, j'expliquerai comment tirer parti de React Query et d'une base de données pour assurer la cohérence du cache de données et je fournirai des exemples de code concrets.

React Query est une excellente bibliothèque de mise en cache des données et de gestion de l'état, qui peut nous aider à gérer facilement les problèmes de mise en cache et de synchronisation des données. Dans cet article, nous utiliserons React Query pour mettre en cache les données de la liste d'utilisateurs et garantir que les données mises en cache sont cohérentes avec les données de la base de données.

Tout d'abord, nous devons installer React Query :

npm install react-query

Ensuite, nous pouvons commencer à écrire du code. Voici un exemple simple montrant comment mettre en cache les données de la liste d'utilisateurs à l'aide de 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;

Dans le code ci-dessus, nous avons utilisé la fonction hook useQuery pour obtenir les données de la liste d'utilisateurs à partir du cache ou du backend. Le premier paramètre de la fonction useQuery est une chaîne qui identifie le nom de clé des données mises en cache. Lors des requêtes suivantes, nous pouvons utiliser le même nom de clé pour obtenir les données mises en cache au lieu d'envoyer une autre requête réseau. 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

rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!