Troubleshooting Common Fetching Errors

Offer a code snippet that helps in identifying and troubleshooting common data fetching errors using React Query DevTools, enhancing debugging efficiency.

import { useQuery } from 'react-query';

const fetchUserData = async () => {
  const response = await fetch('https://api.example.com/user');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function UserProfile() {
  const { data, error, isLoading } = useQuery('userData', fetchUserData);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
}

This code uses React Query's useQuery hook to fetch user data from an API. It demonstrates error handling by checking if the response was successful and throws an error if not. In the component, it renders loading state, error messages, or the user's profile based on the query's state.

import { ReactQueryDevtools } from 'react-query/devtools';

function App() {
  return (
    <>
      {/* Other components */}
      <ReactQueryDevtools initialIsOpen={false} />
    </>
  );
}

This snippet includes the ReactQueryDevtools component in your application, making it easy to debug React Query's cache and queries. The 'initialIsOpen' prop is set to false so that the DevTools panel is closed by default and can be toggled open when needed.