Utiliser une base de données pour filtrer et trier les données dans React Query

Utilisez la base de données dans React Query pour le filtrage et le tri des données

React Query est une bibliothèque de gestion des données. Sa puissance réside dans sa capacité à interagir avec la base de données pour implémenter des fonctions de filtrage et de tri des données. Dans cet article, nous montrerons un exemple concret de la façon de filtrer et trier des données à l'aide d'une base de données dans React Query.

Tout d'abord, pour faciliter la démonstration, nous supposons que nous utilisons une table de base de données nommée "todos", qui contient les champs suivants : id, titre, description, statut, créé_at.

Ensuite, nous devons installer et configurer React Query et établir une connexion à la base de données. Pour les étapes d'installation et de configuration spécifiques, veuillez vous référer à la documentation officielle de React Query.

Nous supposons que nous avons terminé l'installation et la configuration de React Query et créé un composant nommé "TodoList" pour afficher la liste de tâches. Ensuite, nous montrerons comment filtrer et trier les données à l'aide de React Query.

Tout d'abord, nous devons obtenir toutes les données de tâches dans la base de données. Dans le composant "TodoList", nous pouvons utiliser le code suivant pour interroger la base de données et obtenir les données de tâches :

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery('todos', async () => {
    const response = await fetch('/api/todos');
    const data = await response.json();
    return data;
  });

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

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

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

Maintenant que nous avons obtenu avec succès les données de tâches, nous allons ajouter des capacités de filtrage et de tri.

Supposons que nous souhaitions filtrer les données de tâches en fonction du statut, nous pouvons ajouter un paramètre de statut lors de l'interrogation de la base de données et obtenir les données correspondantes de la base de données via ce paramètre. Voici un exemple de code :

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery(['todos', { status: 'completed' }], async (_, { status }) => {
    const response = await fetch(`/api/todos?status=${status}`);
    const data = await response.json();
    return data;
  });

  // 省略其他代码
};

Dans le code ci-dessus, nous spécifions les clés de la requête en passant un tableau comme premier paramètre de useQuery. Le premier élément du tableau est la chaîne « todos », qui peut être utilisée comme identifiant unique pour la requête. Le deuxième élément du tableau est un objet contenant les critères de filtrage. Dans cet exemple, nous spécifions que nous obtenons uniquement les données de tâches terminées en ajoutant { status: 'completed' }.

Ensuite, nous ajouterons la fonction de tri. Supposons que nous souhaitions trier les tâches par ordre décroissant par heure de création. Nous pouvons ajouter un paramètre de tri lors de l'interrogation de la base de données et trier les données par ce paramètre. Voici un exemple de code :

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery(['todos', { orderBy: 'created_at', order: 'desc' }], async (_, { orderBy, order }) => {
    const response = await fetch(`/api/todos?orderBy=${orderBy}&order=${order}`);
    const data = await response.json();
    return data;
  });

  // 省略其他代码
};

Dans le code ci-dessus, nous spécifions les clés de la requête en passant un tableau comme premier paramètre de useQuery. Le premier élément du tableau est la chaîne « todos », qui peut être utilisée comme identifiant unique pour la requête. Le deuxième élément du tableau est un objet contenant les paramètres utilisés pour le tri. Dans cet exemple, nous spécifions l'ordre décroissant par heure de création (created_at) en ajoutant { orderBy: 'created_at', order: 'desc' }.

À travers l'exemple de code ci-dessus, nous démontrons l'implémentation spécifique de la façon d'utiliser la base de données pour filtrer et trier les données dans React Query. Bien entendu, dans les projets réels, la mise en œuvre spécifique peut être différente et vous devez procéder aux ajustements correspondants en fonction de vos propres besoins. Dans le même temps, vous devez également effectuer les opérations de requête et de tri correspondantes en fonction de la base de données et du framework back-end que vous utilisez. Mais en général, React Query fournit une interface très pratique pour interagir avec la base de données, rendant le filtrage et le tri des données plus faciles et plus efficaces.

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!