How to handle error with react-query and ErrorBoundary - Runtime error

Question

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
    <React.StrictMode>
        <ErrorBoundary fallback={<ErrorMessage />}>
            <Suspense fallback={<Loading />}>
                <App />
            </Suspense>
        </ErrorBoundary>
    </React.StrictMode>
);

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import DogList from './components/Dog/DogLIst';

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            throwOnError: true,
        },
        mutations: {
            throwOnError: true,
        },
    },
});

function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <DogList />
        </QueryClientProvider>
    );
}

export default App;

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

type DogType = {
    id: string;
    url: string;
    width: number;
    height: number;
};

const DogList = () => {
    const fetchDogList = async () => {
        const response = await axios.get('https://api.thecatapi.com/v0/images/search?limit=10');
        return response.data;
    };

    const { data: list } = useSuspenseQuery<DogType[]>({
        queryKey: ['doglist'],
        queryFn: fetchDogList,
        retry: 0,
    });

    return (
        <div style={{ margin: '3rem auto', textAlign: 'center' }}>
            {list &&
                list.map((item) => (
                    <div key={item.id}>
                        <img src={item.url} alt={item.id} width="300px" height="300px" />
                    </div>
                ))}
        </div>
    );
};

export default DogList;

I intentionally generated an api error in the DogList component.
Then, because the App component is wrapped in ErrorBoundary, a fallback should be shown, but a runtime error occurs as shown below. Maybe it doesn't detect the runtime error

How can I handle errors globally?

Please edit your question and add the error as text, not as image. — Gert Arnold
– Gert Arnold, Commented Apr 9, 2024 at 17:32

Arjun Patel · Accepted Answer · 2024-05-17 17:23:16Z

0

You may have to put the <QueryClientProvider client={queryClient}> higher in the tree than the boundaries and suspense.

answered May 17, 2024 at 17:23

Arjun Patel

1191 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to handle error with react-query and ErrorBoundary - Runtime error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related