React Query onSuccess callback is not rerendering my useEffect after calling refetch. Backend gets updated properly but frontend refuses to update

[mypalvikram]

I'm running into an issue where I can't get my react query callback to rerender my navigation stack when a user finishes onboarding. I can walk you through what I have now.

So the main navigation logic sits here. We have 3 different stacks where the user is navigated depending on their auth state.

export default function Navigation() {
  const { data: userSession, isLoading, refetch } = useGetUserSession();
  const onboardedStatus = userSession?.user.app_metadata.onboarded;

  useEffect(() => {
    const { data: authListener } = supabaseClient.auth.onAuthStateChange(() => {
      refetch();
    });

    return () => {
      if (authListener) {
        authListener.subscription.unsubscribe();
      }
    };
  }, [refetch]);

  if (!isLoading) {
    RNBootSplash.hide({ fade: true });
  }

  return (
    <NavigationContainer linking={Linking}>
      {userSession && onboardedStatus && <AppStack />}
      {userSession && !onboardedStatus && <OnboardingStack />}
      {!userSession && <AuthStack />}
    </NavigationContainer>
  );
}

In the above, if a user is not onboarded they will not see the main app stack until they have. useGetUserSession essentially just gets the latest session for the user if they are valid or not. If they log out the session becomes null and they are redirected to the auth stack.

Now, here is the function that when invoked updates the user onboarded status in the database to true. It's working, I can verify it from the database.

But, on the frontend if I console log out the onboarded status it's not up to date with the database.

function useSetOnboardedTrue() {
  const key = ['use-set-onboarded-true'];

  const { refetch: refreshSession } = useGetUserSession();

  return useMutation(key, () => setOnboardedTrue(), {
    retry: 0,
    onSuccess: () => refreshSession(),
    onError: () =>
      showErrorToast('Error', 'Sorry, something went wrong. Please try again.'),
  });
}

export default useSetOnboardedTrue;

Why is it that this onSuccess callback does not cause a rerender? I assume it has to do with the way react query caches things, but shouldn't the refetch method on the query refresh that data when called?

[mypalvikram]

I've figured out my issue. It wasn't because of React Query, it was because of the way Supabase caches and returns sessions.