probable-pink

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?

7 Replies

ratty-blush•3y ago

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

probable-pinkOP•3y ago

I am not, but I most definitely will now

ratty-blush•3y ago

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

Invalidations from Mutations | TanStack Query Docs

Invalidating queries is only half the battle. Knowing when to invalidate them is the other half. Usually when a mutation in your app succeeds, it's VERY likely that there are related queries in your application that need to be invalidated and possibly refetched to account for the new changes from your mutation. For example, assume we have a mu...

ratty-blush•3y ago

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'] })
  },
})

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?

probable-pinkOP•3y ago

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

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

ratty-blush•3y ago

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

probable-pinkOP•3y ago

I updated my post with more information if anyone can help. Blocked on why this is happening.

Gaming

Programming

Data is not updating after calling refetch

Did you find this page helpful?