Verwenden einer Datenbank zum Filtern und Sortieren von Daten in React Query

Verwenden Sie die Datenbank in React Query zum Filtern und Sortieren von Daten.

React Query ist eine Bibliothek zum Verwalten von Daten. Ihre Leistungsfähigkeit liegt in ihrer Fähigkeit, mit der Datenbank zu interagieren, um Datenfilter- und Sortierfunktionen zu implementieren. In diesem Artikel zeigen wir ein konkretes Beispiel für das Filtern und Sortieren von Daten mithilfe einer Datenbank in React Query.

Zur Vereinfachung der Demonstration gehen wir zunächst davon aus, dass wir eine Datenbanktabelle mit dem Namen „todos“ verwenden, die die folgenden Felder enthält: ID, Titel, Beschreibung, Status, erstelltes_at.

Als nächstes müssen wir React Query installieren und konfigurieren und eine Verbindung zur Datenbank einrichten. Spezifische Installations- und Konfigurationsschritte finden Sie in der offiziellen Dokumentation von React Query.

Wir gehen davon aus, dass wir die Installation und Konfiguration von React Query abgeschlossen und eine Komponente namens „TodoList“ zur Anzeige der To-Do-Liste erstellt haben. Als Nächstes zeigen wir, wie man Daten mit React Query filtert und sortiert.

Zuerst müssen wir alle To-Do-Daten in der Datenbank abrufen. In der Komponente „TodoList“ können wir den folgenden Code verwenden, um die Datenbank abzufragen und die To-Do-Daten abzurufen:

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>
  );
};

Nachdem wir die To-Do-Daten erfolgreich abgerufen haben, werden wir Filter- und Sortierfunktionen hinzufügen.

Angenommen, wir möchten Aufgabendaten nach Status filtern, können beim Abfragen der Datenbank einen Statusparameter hinzufügen und über diesen Parameter die entsprechenden Daten aus der Datenbank abrufen. Hier ist ein Beispielcode:

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;
  });

  // 省略其他代码
};

Im obigen Code geben wir die Schlüssel der Abfrage an, indem wir ein Array als ersten Parameter von useQuery übergeben. Das erste Element des Arrays ist die Zeichenfolge „todos“, die als eindeutige Kennung für die Abfrage verwendet werden kann. Das zweite Element des Arrays ist ein Objekt, das die Filterkriterien enthält. In diesem Beispiel geben wir an, dass wir nur abgeschlossene Aufgabendaten erhalten, indem wir {status: 'abgeschlossen'} hinzufügen.

Als nächstes fügen wir die Sortierfunktion hinzu. Angenommen, wir möchten die Aufgaben in absteigender Reihenfolge nach Erstellungszeitpunkt sortieren. Wir können beim Abfragen der Datenbank einen Sortierparameter hinzufügen und die Daten nach diesem Parameter sortieren. Hier ist ein Beispielcode:

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;
  });

  // 省略其他代码
};

Im obigen Code geben wir die Schlüssel der Abfrage an, indem wir ein Array als ersten Parameter von useQuery übergeben. Das erste Element des Arrays ist die Zeichenfolge „todos“, die als eindeutige Kennung für die Abfrage verwendet werden kann. Das zweite Element des Arrays ist ein Objekt, das die zum Sortieren verwendeten Parameter enthält. In diesem Beispiel geben wir die absteigende Reihenfolge nach Erstellungszeitpunkt (created_at) an, indem wir { orderBy: 'created_at', order: 'desc' } hinzufügen.

Anhand des obigen Codebeispiels demonstrieren wir die spezifische Implementierung der Verwendung der Datenbank zum Filtern und Sortieren von Daten in React Query. Natürlich kann die konkrete Implementierung in tatsächlichen Projekten unterschiedlich sein und Sie müssen entsprechende Anpassungen entsprechend Ihren eigenen Bedürfnissen vornehmen. Gleichzeitig müssen Sie je nach verwendeter Datenbank und Back-End-Framework entsprechende Abfrage- und Sortiervorgänge durchführen. Aber im Allgemeinen bietet React Query eine sehr praktische Schnittstelle zur Interaktion mit der Datenbank, wodurch das Filtern und Sortieren von Daten einfacher und effizienter wird.

Das obige ist der detaillierte Inhalt vonVerwenden einer Datenbank zum Filtern und Sortieren von Daten in React Query. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!