Data is not updating after calling refetch

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.

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>
  );
}

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(),
  });
}

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

  const { refetch: refreshSession } = useGetUserSession();

  return useMutation(key, () => setOnboardedTrue(), {
    retry: 0,
    onSuccess: () => refreshSession(),
  });
}

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?

Screenshot_2023-01-06_at_10.41.31_PM.png

Screenshot_2023-01-06_at_10.41.46_PM.png

TanStack•4y ago•

9 replies

wet-aqua

Data is not updating after calling refetch

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.

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>
  );
}

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>
  );
}

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

  const { refetch: refreshSession } = useGetUserSession();

  return useMutation(key, () => setOnboardedTrue(), {
    retry: 0,
    onSuccess: () => refreshSession(),
  });
}

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

  const { refetch: refreshSession } = useGetUserSession();

  return useMutation(key, () => setOnboardedTrue(), {
    retry: 0,
    onSuccess: () => refreshSession(),
  });
}

Data is not updating after calling refetch

Data is not updating after calling refetch

Similar Threads

Similar Threads

Similar Threads