Using React Query for Data Fetching and Loading States
Integrate React Query for managing server state in Next.js 14 and implementing loading states with the use of 'isLoading' flag.
import { useQuery } from 'react-query';
import axios from 'axios';
// This is a custom hook that uses react-query's useQuery
// to fetch data from an API endpoint
const useFetchData = (url) => {
// The useQuery hook is used to fetch data from the server.
// It returns an object with properties including: status, data, error, and isLoading.
return useQuery('data', async () => {
const { data } = await axios.get(url);
return data;
});
};
This piece of code defines a custom hook 'useFetchData' using React Query's 'useQuery' to fetch data from a URL. The hook returns the query object including the 'isLoading' flag which indicates whether the query is in a loading state.
import React from 'react';
import { useFetchData } from './hooks/useFetchData';
// Example of a component that fetches data using the useFetchData
// hook and displays loading state or the fetched data.
const DataComponent = ({ url }) => {
const { data, isLoading, error } = useFetchData(url);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>An error occurred: {error.message}</div>;
// Render the fetched data
return (
<div>
<h1>Fetched Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
export default DataComponent;
This piece of code represents a React component 'DataComponent' which uses the 'useFetchData' custom hook to fetch data from a URL. It uses the 'isLoading' flag to render a loading state, handles potential errors, and then renders the fetched data.
import { QueryClient, QueryClientProvider } from 'react-query';
import DataComponent from './DataComponent';
// Initialize a QueryClient instance,
// which will be used to provide react-query context for the entire app.
const queryClient = new QueryClient();
function MyApp() {
return (
<QueryClientProvider client={queryClient}>
<DataComponent url='/api/data' />
</QueryClientProvider>
);
}
export default MyApp;
This is the main entry component 'MyApp' of the Next.js application, where QueryClientProvider from React Query is used to wrap the application's components. 'DataComponent' is provided as a child, which receives a URL to fetch data from the server. It ensures that React Query context is available in the component tree.