Data is not updating after calling refetch

[brave tangle]

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

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

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?

[rough compass]

Invalidate your cache there, @brave tangle - Are you using <ReactQueryDevtools /> to watch what's going on? import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

[brave tangle]

I am not, but I most definitely will now

[rough compass]

https://tanstack.com/query/v4/docs/react/guides/invalidations-from-mutations?from=reactQueryV3&original=https%3A%2F%2Freact-query-v3.tanstack.com%2Fguides%2Finvalidations-from-mutations

See in this example that with onSuccess we need to invalidate the related queries so they can be refetched. Try that if you haven't already

import { useMutation, useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
    queryClient.invalidateQueries({ queryKey: ['reminders'] })
  },
})

Any luck?

[brave tangle]

Thank you for sharing that information! I tried that as solution just now but no luck getting it working. I may need to double check a few things.

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

  return useMutation(
    key,
    () => {
      return setOnboardedTrue();
    },
    {
      retry: false,
      onSuccess: () => queryClient.invalidateQueries({ queryKey: ['session'] }),
      onError: () => {
        showErrorToast(
          'Error',
          'Sorry, something went wrong. Please try again.',
        );
      },
    },
  );
}

[rough compass]

hopefully you'll be able to see where your query is/isnt refreshing using RQdevtools and work it out 🙂