Troubleshooting ReactJS Error: "Unexpected Application Error" with useQuery and Axios

ReactJS - Handling "Unexpected Application Error" in useQuery

This script handles the error using ReactJS and @tanstack/react-query for dynamic data fetching. It employs proper error handling for optimal code performance and security.

import React from 'react';
import Post from '../post/Post';
import './posts.scss';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
import { makeRequest } from '../../axios';
// Create a new Query Client instance
const queryClient = new QueryClient();
const Posts = () => {
  // Using useQuery to fetch posts data with proper error handling
  const { isLoading, error, data } = useQuery({
    queryKey: ['posts'],
    queryFn: () => makeRequest.get('/posts').then(res => res.data),
    onError: (err) => {
      console.error("Error fetching posts:", err);
    }
  });
  return (
    <div className="posts">
      {error ? (
        <p>Something went wrong: {error.message}</p>
      ) : isLoading ? (
        <p>Loading...</p>
      ) : (
        data?.map((post) => <Post post={post} key={post.id} />)
      )}
    </div>
  );
};
export default Posts;

Alternative Solution: Using Fallback Components

In this approach, the script defines fallback components for better user experience and additional error information.

import React from 'react';
import Post from '../post/Post';
import './posts.scss';
import { useQuery } from '@tanstack/react-query';
import { makeRequest } from '../../axios';
// Fallback components
const Loading = () => <p>Loading...</p>;
const ErrorComponent = ({ error }) => (
  <p>Error: {error.message} - Please try again later.</p>
);
const Posts = () => {
  const { isLoading, error, data } = useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
      const response = await makeRequest.get('/posts');
      return response.data;
    }
  });
  return (
    <div className="posts">
      {error ? (
        <ErrorComponent error={error} />
      ) : isLoading ? (
        <Loading />
      ) : (
        data?.map((post) => <Post post={post} key={post.id} />)
      )}
    </div>
  );
};
export default Posts;

Back-end Script: Setting Up a Sample Axios Endpoint for Testing

This script uses Node.js and Express to set up a test endpoint for fetching posts data.

const express = require('express');
const app = express();
// Sample data to simulate database posts
const posts = [
  { id: 1, title: 'Post One', content: 'Content for post one' },
  { id: 2, title: 'Post Two', content: 'Content for post two' }
];
app.get('/posts', (req, res) => {
  res.json(posts);
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log('Server running on port', PORT));

Unit Tests: Verifying Component Rendering and API Fetch

The following tests validate component rendering and API fetch success using Jest and React Testing Library.

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Posts from './Posts';
test('renders loading message initially', () => {
  render(<Posts />);
  expect(screen.getByText(/loading.../i)).toBeInTheDocument();
});
test('displays error message on fetch failure', async () => {
  render(<Posts />);
  expect(await screen.findByText(/something went wrong/i)).toBeInTheDocument();
});
test('displays posts data after successful fetch', async () => {
  render(<Posts />);
  expect(await screen.findByText(/Post One/i)).toBeInTheDocument();
});

Top React Query & Error Handling FAQs

1. What does useQuery do in React?
2. The useQuery hook fetches, caches, and updates asynchronous data in React components, automatically handling loading, error, and success states.
3. Why does React show "Objects are not valid as a React child" error?
4. This error happens when an object is passed directly as a child element. React requires text, numbers, or React elements as children, not objects.
5. How does queryFn work in React Query?
6. queryFn specifies how data is fetched in useQuery. It’s the function responsible for making API requests, like axios.get.
7. Why use error.message for displaying errors?
8. Using error.message provides detailed, user-friendly error messages rather than vague statements like "Something went wrong," helping with troubleshooting.
9. What is the role of queryKey in React Query?
10. queryKey uniquely identifies each query, allowing React Query to cache results and reduce unnecessary network requests.
11. Can I handle errors differently in React Query?
12. Yes, the onError callback in useQuery can be customized to handle specific error types, making debugging easier.
13. What is onError used for in useQuery?
14. onError in useQuery is a callback that runs when an error occurs during the query. It lets you log or display error information dynamically.
15. How do I test React Query components?
16. Use libraries like Jest and React Testing Library to simulate API responses and check if loading, error, and success states work as expected.
17. Why should I use conditional rendering in React?
18. Conditional rendering improves user experience by displaying specific UI based on loading, error, or success states rather than showing raw data or errors.
19. What are fallback components in React?
20. Fallback components provide alternative UI, such as error or loading messages, if the main content can’t be displayed. They improve app resilience and user experience.
21. How does axios.get work in the example?
22. axios.get sends an HTTP GET request to the server to retrieve data. Here, it fetches posts data in JSON format for rendering in the component.

Error Handling Tips for React Apps

New developers in ReactJS can gain confidence by learning to troubleshoot and resolve common errors like unexpected application issues. Solutions such as using React Query, properly formatting Axios responses, and setting up accurate error handling make it possible to avoid many pitfalls. By improving the user experience with informative messages and using fallback components, you ensure a smoother development process.

Building stable applications also involves adopting testing strategies to validate that components behave as expected in any condition. With tools like Jest and React Testing Library, developers can simulate network responses and verify that the app reacts appropriately to both successes and failures. This approach not only reinforces stability but also fosters better coding practices. 🚀