Handling Fetching State in Component

Illustrate the use of the useIsFetching hook within a component to conditionally render content or a loading state based on the fetching status of a specific query.

import { useIsFetching } from '@tanstack/react-query';

export default function ContentWithFetchIndicator() {
  const isFetching = useIsFetching({ queryKey: ['myData'] });

  // The component will conditionally render a loading message if there is a fetch in progress.
  if (isFetching) return <div>Loading data...</div>;

  return <div>Your content here.</div>;
}

This code demonstrates how to use the 'useIsFetching' hook from '@tanstack/react-query' within a component to detect if there is an ongoing fetch for data associated with a specific query key ('myData'). If the query is being fetched, it conditionally renders a loading message. Otherwise, it renders the actual content.