Refetch user after login?

[nemanjam]

I want to force refetch authenticated user after login but useMe hook doesn't call getUser fetcher function when user id becomes available. I get user refetched only after e.g. I focus out and in from that tab. But onSubmitLogin does not refetch the user.

Here is example log for the code bellow, id is from getUser fetcher function and that never gets called with latest id argument, and useMe id is id from useMe hook. What am I missing here? Im using React Query v4 and React 18.

Login form submit handler:

  const onSubmitLogin = async ({ email, password }: AuthFormData) => {
    const response = await signIn('credentials', { // signIn() is from next-auth
      email,
      password,
      redirect: false, 
    });

    if (response.ok) {
      await queryClient.invalidateQueries([QueryKeys.ME]);
      await queryClient.refetchQueries([QueryKeys.ME]); // refetch me
      await router.push(response.url);
    }
  };

Query hook and fetcher function:

const getUser = async (id: string) => {

  // id is undefined, getUser() is never triggered with updated id
  console.log('id', id); 

  if (!id) return null;

  const { data } = await axiosInstance.get<ClientUser>(`${Routes.API.USERS}${id}`);
  console.log('data', data);

  return data;
};


export const useMe = () => {
  const { data: session, status } = useSession();
  const id = session?.user?.id;

  // id is valid here but () => getUser(id) is not called again with it
  console.log('useMe id', id, 'status', status); 

  const query = useQuery<ClientUser, AxiosError>([QueryKeys.ME], () => getUser(id), {
    enabled: status !== 'loading',
    onError: (error) => {
      console.error('me query error: ', error.response);

      // id exists but not valid session, clear it
      if (id && error.response.status === 404) {
        signOut();
      }
    },
  });

[TkDodo]

invalidateQueries does a refetch already, however, it will refetch with the old id, because the userId is not part of the query key. I would:

• use ["Me", id] as querykey
• call removeQueries on ["Me"] after successful login to remove all data from other users
• then do the router push, which will:
  • redirect to a page that picks up useMe
  • which will make the request with the correct id.

if you want to fetch before you do the redirect, I would do that with queryClient.prefetchQueries

[nemanjam]

Thank you, very useful advice, I will try to fix it with this info. Do I really need id as part of the key since I can have only one logged in user? And removeQueries ["Me"] isn't able to force refetch with updated id on it's own?

[TkDodo]

Do I really need id as part of the key since I can have only one logged in user

yes, because the id can change. dependency wise, you can think of it a bit like this:

useEffect(() => { fetchUser(id) }, [])

you run into stale closure issues if you want to refetch with a different id, but the queryFn still "sees" the old id. Those situations usually work out as long as the id is the same, but as soon as it changes, you'll refetch with the wrong input.

And removeQueries ["Me"] isn't able to force refetch with updated id on it's own?

you can try resetQueries, but since your query isn't mounted, as you are on the login page, it won't be refetched, no.

[nemanjam]

Thank you very much, I did it like you originally suggested. I have only one problem left, Login page shows up (blinks) once again between me refetch and redirect, probably because redirect is in the handler, I will se how to hide it.

  const onSubmitLogin = async ({ email, password }: AuthFormData) => {
    const response = await signIn('credentials', {
      email,
      password,
      redirect: false, 
    });

    if (response.ok) {
      queryClient.removeQueries([QueryKeys.ME]); // MeProvider will mount useMe here too
     // loading spinner from useMe shows up
     // Login page shows up once again before redirect
      await router.push(response.url);
    }
  };