Wie implementiert man Daten-Caching und persistenten Speicher in React Query?

Wie implementiert man Daten-Caching und persistenten Speicher in React Query?

Da die Komplexität von Front-End-Anwendungen zunimmt, wird das Datenmanagement immer wichtiger. React Query ist ein leistungsstarkes Tool zur Datenerfassung und -verwaltung. Es bietet eine Möglichkeit, den Datenabruf, das Caching und die Synchronisierung zu vereinfachen und hilft uns, schnell effiziente und leicht zu wartende Anwendungen zu erstellen.

Obwohl React Query standardmäßig über eine Speicher-Caching-Funktion verfügt, gehen die zwischengespeicherten Daten nach dem Aktualisieren der Seite verloren. Um dieses Problem zu lösen, müssen wir Cache-Daten im lokalen Speicher speichern. In diesem Artikel erfahren Sie, wie Sie Daten-Caching und persistenten Speicher in React Query implementieren.

Zuerst müssen wir React Query installieren:

npm install react-query

Als nächstes schauen wir uns an, wie man React Query verwendet, um Daten abzurufen, zwischenzuspeichern und beizubehalten.

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;

Im obigen Code verwenden wir den Hook useQuery, um die Daten abzurufen. Wir übergeben einen eindeutigen Bezeichner 'data' als Abfrageschlüssel und eine asynchrone Funktion zum Abrufen der Daten fetchData. React Query speichert unsere Daten automatisch zwischen und verwendet die zwischengespeicherten Daten in zukünftigen Anfragen. 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
Jetzt implementieren wir die dauerhafte Speicherung von Daten. Wir können die Methoden getQueryData und setQueryData von queryClient verwenden, um Daten manuell zwischenzuspeichern und abzurufen. Gleichzeitig können wir localStorage oder andere persistente Speicherlösungen ähnlich localStorage verwenden, um Daten lokal zu speichern.
• rrreee
Im obigen Code versuchen wir zunächst, die Daten aus dem Cache über die Methode queryClient.getQueryData abzurufen. Wenn die Daten vorhanden sind, werden die zwischengespeicherten Daten direkt zurückgegeben, um eine erneute Initiierung der Anforderung zu vermeiden. Wenn die Daten nicht vorhanden sind, fahren Sie mit dem normalen Datenanforderungsprozess fort und verwenden Sie die Methode queryClient.setQueryData, um die Daten zwischenzuspeichern.

🎜In der App-Komponente versuchen wir zunächst, die zwischengespeicherten Daten aus dem lokalen Speicher abzurufen. Wenn die Daten vorhanden sind, verwenden Sie die Methode queryClient.setQueryData, um die Daten auf die ursprünglich zwischengespeicherten Daten festzulegen. 🎜🎜Durch die obigen Codebeispiele haben wir Daten-Caching und persistente Speicherung in React Query erfolgreich implementiert. Dadurch kann unsere Anwendung Daten effizienter verwalten und den vorherigen Zustand nach dem Aktualisieren der Seite wiederherstellen. 🎜🎜Zusammenfassung: 🎜

🎜Verwenden Sie React Query, um Daten einfach abzurufen und zu verwalten. 🎜🎜React Query verfügt standardmäßig über eine Speicher-Caching-Funktion, aber nach dem Aktualisieren der Seite gehen die zwischengespeicherten Daten verloren. 🎜🎜Mit den Methoden getQueryData und setQueryData von queryClient können wir Daten manuell zwischenspeichern und abrufen. 🎜🎜Wir können localStorage oder andere persistente Speicherlösungen ähnlich localStorage verwenden, um Daten lokal zu speichern. 🎜🎜Mit Daten-Caching und persistenter Speicherung können wir die Leistung der Anwendung verbessern und den vorherigen Zustand wiederherstellen. 🎜🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man Daten-Caching und persistenten Speicher in React Query?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!