How to implement data caching and persistent storage in React Query?

How to implement data caching and persistent storage in React Query?

As the complexity of front-end applications increases, data management becomes very important. React Query is a powerful tool for data acquisition and management. It provides a way to simplify data retrieval, caching and synchronization, helping us quickly build efficient and easy-to-maintain applications.

Although React Query has memory caching function by default, the cached data will be lost after refreshing the page. To solve this problem, we need to persist cache data to local storage. In this article, we will explore how to implement data caching and persistent storage in React Query.

First, we need to install React Query:

npm install react-query

Next, let’s take a look at how to use React Query to get data and cache and persist it.

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;

In the above code, we use the useQuery hook to get the data. We pass a unique identifier 'data' as the query key, and an asynchronous function to fetch the data fetchData. React Query will automatically cache our data and use the cached data in future requests.

Now, let’s implement persistent storage of data. We can use the getQueryData and setQueryData methods of queryClient to manually cache and obtain data. At the same time, we can use localStorage or other persistent storage solutions similar to localStorage to save data locally.

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 (
    // ...
  );
};

In the above code, we first try to get data from the cache through the queryClient.getQueryData method. If the data exists, the cached data is returned directly to avoid reinitiating the request. If the data does not exist, proceed with the normal data request process and use the queryClient.setQueryData method to cache the data.

In the App component, we first try to get the cached data from local storage. If the data exists, use the queryClient.setQueryData method to set the data to the initial cached data.

Through the above code examples, we successfully implemented data caching and persistent storage in React Query. This allows our application to manage data more efficiently and restore the previous state after refreshing the page.

Summary:

• Use React Query to easily obtain and manage data.
• React Query has memory caching function by default, but after refreshing the page, the cached data will be lost.
• We can manually cache and obtain data using the getQueryData and setQueryData methods of queryClient.
• We can use localStorage or other persistent storage solutions similar to localStorage to save data locally.
• Through data caching and persistent storage, we can improve the performance of the application and restore the previous state.

The above is the detailed content of How to implement data caching and persistent storage in React Query?. For more information, please follow other related articles on the PHP Chinese website!