Tanstack Query with Expo and React Native useQuery().error returning always null

Question

i'm building an Expo/React Native app, with app folder structure (instead of App.tsx main file), but I'm trying to implement Tanstack Query in my project, but I'm getting the error object returned always as null even if I explicitly throw the error in my queryFn property.

My app/(auth)/login.tsx


import { KeyboardAvoidingView, Text } from "react-native";

import { useQuery } from "@tanstack/react-query"

export default function Login() {

  const query = useQuery({
    queryKey: ['test'],
    queryFn: async () => {
      if (true) {
        throw new Error('test')
      }
    },
  })

  if (query.error) {
    return (
      <KeyboardAvoidingView behavior="padding">
        <Text>{query.error.message}</Text>
      </KeyboardAvoidingView>
    )
  } else {
    console.log(query)
    return (
      <KeyboardAvoidingView behavior="padding">
        <Text>Success</Text>
      </KeyboardAvoidingView>
    )
  }
}

app/(auth)/layout.tsx

import { Stack } from "expo-router";

export default function AuthLayout() {
  return (
    <Stack>
      <Stack.Screen name="login" options={{ headerShown: false }} />
    </Stack>
  );
}

app/layout.tsx

import { router, Stack, useRootNavigationState } from "expo-router";
import { useEffect } from "react";
import '@/lang/i18n';
import { ThemeProvider } from 'react-native-magnus';
import { onlineManager, focusManager, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import NetInfo from "@react-native-community/netinfo"
import { AppState } from "react-native";
import type { AppStateStatus } from "react-native";

const query_client = new QueryClient({
  queryCache: new QueryCache(),
})

export default function RootLayout() {
  const navigation_state = useRootNavigationState()
  const navigator_ready = navigation_state?.key !== null

  useEffect(() => {
    if(navigator_ready) {
      router.replace('/(auth)/login')
    }
  }, [navigator_ready])

  useEffect(() => {
    onlineManager.setEventListener((setOnline) => {
      return NetInfo.addEventListener((state) => {
        setOnline(!!state.isConnected);
      })
    })
  }, [NetInfo, onlineManager])

  useEffect(() => {
    const subscriber = AppState.addEventListener('change', onFocusRefetch);

    return () => {
      subscriber.remove();
    }
  }, [])

  const onFocusRefetch = (status: AppStateStatus) => {
    focusManager.setFocused(status === 'active');
  }
  
  return (
    <QueryClientProvider client={query_client}>
      <ThemeProvider>
        <Stack>
          <Stack.Screen name="(auth)" options={{ headerShown: false }}/>
          {/* <Stack.Screen name="(home)" options={{ headerShown: false }}/> */}
          {/* <Stack.Screen name="(checklist)" options={{ headerShown: false }}/>
          <Stack.Screen name="(fleet)" options={{ headerShown: false }}/>
          <Stack.Screen name="(admin)" options={{ headerShown: false }}/> */}
        </Stack>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

What I'm doing wrong to return the error always as null? This is what returns if I console.log the query object after it executes the queryFn function:

{"data": undefined, "dataUpdatedAt": 0, "error": null, "errorUpdateCount": 5, "errorUpdatedAt": 1731019239744, "failureCount": 3, "failureReason": [Error: test], "fetchStatus": "fetching", "isError": false, "isFetched": true, "isFetchedAfterMount": false, "isFetching": true, "isInitialLoading": true, "isLoading": true, "isLoadingError": false, "isPaused": false, "isPending": true, "isPlaceholderData": false, "isRefetchError": false, "isRefetching": false, "isStale": true, "isSuccess": false, "promise": {"_h": 1, "_i": 2, "_j": [Error: experimental_prefetchInRender feature flag is not enabled], "_k": null, "reason": [Error: experimental_prefetchInRender feature flag is not enabled], "status": "rejected"}, "refetch": [Function bound refetch], "status": "pending"}

My Tanstack query version: 5.59.20

TkDodo · Accepted Answer · 2025-02-24 08:20:20Z

0

Given that the query is in pending state, the most logical reason would be that the Login component unmounts and re-mounts for some reason. If we have an error in the Querycache, and a component re-mounts that wants to use that query, the query is put back into pending state and a new fetch is initiated.

answered Feb 24 at 8:20

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

Tanstack Query with Expo and React Native useQuery().error returning always null

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