React Query + Expo Dev

I’m running into a React Query v5 + Expo Router (React Native) behavior I’m trying to sanity-check.

Setup:

* Expo / React Native
* expo-router
* @tanstack/react-query v5
* Exactly ONE QueryClientProvider at the root app/_layout.tsx (no other clients anywhere)
* Same queryKey everywhere: ['activeWorkoutSession']

I have a hook:

export function useGetActiveWorkoutSession() {
  return useQuery({
    queryKey: ['activeWorkoutSession'],
    queryFn: async () => {
      return await trpcProxy.workoutSession.getActiveSession.query();
    },
  });
}

export function useGetActiveWorkoutSession() {
  return useQuery({
    queryKey: ['activeWorkoutSession'],
    queryFn: async () => {
      return await trpcProxy.workoutSession.getActiveSession.query();
    },
  });
}

Today screen shows an ActiveSessionCard:

export function ActiveSessionCard() {
  const { data: activeSession } = useGetActiveWorkoutSession();
  console.log('activeWorkoutSession', activeSession);
  return null;
}

export function ActiveSessionCard() {
  const { data: activeSession } = useGetActiveWorkoutSession();
  console.log('activeWorkoutSession', activeSession);
  return null;
}

Starting a workout happens on another screen:

const startSessionMutation = useMutation({
  mutationFn: async ({ templateId }) => {
    await trpcProxy.workoutSession.clearAndStartTemplate.mutate({ templateId });

    await queryClient.invalidateQueries({
      queryKey: ['activeWorkoutSession'],
      refetchType: 'all',
      exact: false,
    });
  },
});

const startSessionMutation = useMutation({
  mutationFn: async ({ templateId }) => {
    await trpcProxy.workoutSession.clearAndStartTemplate.mutate({ templateId });

    await queryClient.invalidateQueries({
      queryKey: ['activeWorkoutSession'],
      refetchType: 'all',
      exact: false,
    });
  },
});

Navigation flow:
today.tsx -> push(start) -> push(workout.tsx)

Observations:

* workout.tsx uses useGetActiveWorkoutSession and DOES get the active session
* today.tsx / ActiveSessionCard keeps logging:
activeSession undefined
activeSession undefined
activeSession undefined

The cache is updated — calling getQueryData(['activeWorkoutSession']) shows the session object.

Adding this to Active Session Card makes everything work:

useFocusEffect(
  useCallback(() => {
    refetch();
  }, [refetch])
);

useFocusEffect(
  useCallback(() => {
    refetch();
  }, [refetch])
);

Question:
Is this expected behavior on React Native with navigation?
Does React Query not trigger rerenders or refetches for screens that are mounted but not focused?
Is the recommended pattern on RN to refetch on screen focus (useFocusEffect), or should invalidation/refetch propagate to off-focus screens automatically?

Just want to make sure I’m not fighting the intended model here.

TanStack•2mo ago•

1 reply

uncertain-scarlet

React Query + Expo Dev

export function useGetActiveWorkoutSession() {
  return useQuery({
    queryKey: ['activeWorkoutSession'],
    queryFn: async () => {
      return await trpcProxy.workoutSession.getActiveSession.query();
    },
  });
}

export function useGetActiveWorkoutSession() {
  return useQuery({
    queryKey: ['activeWorkoutSession'],
    queryFn: async () => {
      return await trpcProxy.workoutSession.getActiveSession.query();
    },
  });
}

Today screen shows an ActiveSessionCard:

export function ActiveSessionCard() {
  const { data: activeSession } = useGetActiveWorkoutSession();
  console.log('activeWorkoutSession', activeSession);
  return null;
}

export function ActiveSessionCard() {
  const { data: activeSession } = useGetActiveWorkoutSession();
  console.log('activeWorkoutSession', activeSession);
  return null;
}

Starting a workout happens on another screen:

const startSessionMutation = useMutation({
  mutationFn: async ({ templateId }) => {
    await trpcProxy.workoutSession.clearAndStartTemplate.mutate({ templateId });

    await queryClient.invalidateQueries({
      queryKey: ['activeWorkoutSession'],
      refetchType: 'all',
      exact: false,
    });
  },
});

const startSessionMutation = useMutation({
  mutationFn: async ({ templateId }) => {
    await trpcProxy.workoutSession.clearAndStartTemplate.mutate({ templateId });

    await queryClient.invalidateQueries({
      queryKey: ['activeWorkoutSession'],
      refetchType: 'all',
      exact: false,
    });
  },
});

useFocusEffect(
  useCallback(() => {
    refetch();
  }, [refetch])
);

useFocusEffect(
  useCallback(() => {
    refetch();
  }, [refetch])
);

React Query + Expo Dev

Similar Threads

React Query + Expo Dev

Similar Threads

Similar Threads

Similar Threads