React Query - QueryErrorResetBoundary not work as excepted

Question

When I receive a 500 HTTP status from the server, the error boundary catches it. However, the retry button does not refetch the query as I expected.

I noticed that React Query attempts to retrieve the decks from the API four times before throwing an error. After I press the Retry button, nothing happens. There is no API call. In the dev tools, I can see that the query remains in an "inactive" state.

What could be wrong? I did it in react native.

I created a ScreenViewQueryBoundaries to group ResetBoundary, ErrorBoundary, and suspense.

export const ScreenViewQueryBoundaries = ({children, loading}: Props) => (
    <QueryErrorResetBoundary>
        {({reset}) => (
            <ErrorBoundary
                onReset={reset}
                FallbackComponent={(props, context) => {
                    return (
                        <ScreenView>
                            <Button
                                mode="outlined"
                                onPress={() => props.resetErrorBoundary()}>Retry</Button>
                        </ScreenView>
                    )
                }}>
                <Suspense fallback={loading ?? <QueryLoadingView/>}>
                    {children}
                </Suspense>
            </ErrorBoundary>
        )}
    </QueryErrorResetBoundary>
);

Page Component.

export default function Page() {
    return (
        <View>
            <ScreenViewQueryBoundaries>
                <DeckListContainer />
            </ScreenViewQueryBoundaries>
        </View>
    );
}

Container:

export default function DeckListContainer() {
    const {data, fetchNextPage} = useGetDeckInfiniteQuery()

    if (!data) return null

    // TODO
    const paginatedData: DeckType[] = data.pages.map(page => page.data).flat()

    return (
        <BaseFlatList
            data={paginatedData ?? []}
            keyExtractor={item => item.id}
            renderItem={({item}) =>
                <DeckListItem
                    item={item}/>
            }
            onEndReached={() => fetchNextPage()}
            onEndReachedThreshold={0.8}
        />
    );
}

useGetDeckInfiniteQuery has only queryKey, queryFn, getNextPageParam and getPreviousPageParam.

The queryClient looks like:

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: Infinity,
            refetchOnWindowFocus: false,
            suspense: true,
        }
    }
})

1. react-query v5.20.5
2. react-error-boundary v4.0.12

Thank you for any idea!

Answer 1

OMG! Found the issue!

I had

"@tanstack/react-query": "^5.20.5",

next to

"react-query": "^3.39.3",

How I did it :)