Forcing an error state without an unnecessary refetch

[lucas-barake]

Long story short, I realized that instead of hooking up an external state management solution (e.g. Zustand) to persist the data I get from, for example, a /me query, I could do it all within TanStack Query.

I have an AuthWrapper component like this one:

type Props = {
  children: React.ReactNode;
};

export const AuthWrapper: React.FC<Props> = ({ children }) => {
  const meQuery = useMeQuery();

  if (meQuery.isLoading || meQuery.isPending) {
    return <PageSpinner />;
  }

  if (meQuery.isError) {
    return <SignIn />;
  }

  return children;
};

The idea is, the useMeQuery determines whether the user is authenticated or not. If the query results in isError, that means they are not authenticated, hence I render the SignIn component. If it's success, then I know the user is authenticated.

What I'd usually do here is persist the session data with an external store, and if I want to logout, all I'd need to do is remove the data, and the AuthWrapper would already "redirect" the user to the SignIn component.

So, I realized that, instead of hooking two state management solutions together, I can use the useMeQuery for everything. So far, it's working as expected, except that I can't find an elegant solution to have the logout functionality.

I guess I could reset the query, but then I'd have no way to trigger an error to prompt AuthWrapper to render SignIn. And the query will just end up fetching again, making an unnecessary extra HTTP request.

Is this flow possible? Or is this something out for reach for TanStack Query? Thanks!

[87xie]

Is it possible to check if the token exists first, like this:

function useMeQuery() {
  const [token] = useAuthToken();
  const hasToken = token !== '';
  
  const meQuery = useQuery({
    // ...
    enabled: hasToken,
  });
  
  return [meQuery, hasToken] as const;
}

const AuthWrapper = ({ children }) => {
  const [meQuery, hasToken] = useMeQuery();

  if (!hasToken || meQuery.isError) {
    return <SignIn />;
  }

  if (meQuery.isLoading || meQuery.isPending) {
    return <PageSpinner />;
  }

  return children;
};

And logout would be like this:

function useLogoutAction() {
  const [, setToken] = useAuthToken();
  const queryClient = useQueryClient();
  
  return useCallback(() => {
    setToken('');
    queryClient.removeQueries({
      queryKey: [...], // meQuery queryKey
      exact: true,
    });
  }, [setToken, queryClient])
  
}

When the user logs out, the token will be cleared, causing hasToken to be false. As a result, the <AuthWrapper /> will render the <SignIn /> without executing the queryFn again.

[lucas-barake]

Yeah, I thought about that as well.

In fact, I thought about performing the check within the queryFn and throwing an error if the tokens don't exist (which would trigger isError).

However, if you're using HTTP-only cookies, the auth token will be completely invisible to client-side JavaScript. Therefore, I think there's no way to verify its presence other than making an otherwise unnecessary request to the server...

[87xie]

Another approach might be to move the <SignIn /> component to the route level, so you can navigate to that route when the user logs out. Not sure if this article, React Query meets React Router, and the suggestions are helpful to you?

const AuthWrapper = ({ children }) => {
  const meQuery = useMeQuery();

  if (meQuery.isError) {
    return <Navigate to="/sign-in" />;
  }

  if (meQuery.isLoading || meQuery.isPending) {
    return <PageSpinner />;
  }

  return children;
};

function useLogoutAction() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  
  return useCallback(() => {
    navigate('/sign-in');
    queryClient.removeQueries({
      queryKey: [...], // meQuery queryKey
      exact: true,
    });
  }, [navigate, queryClient])
  
}

[lucas-barake]

The key thing is that the useMeQuery serves as the single source of truth determining whether a user is actually signed in. Since we can't validate HTTP-only cookies (or even locally stored tokens) on the client side, we always need to query the API to verify if the token is valid.

In the SignIn component, I still need to know the user's authentication status to prevent them from signing in again when they're already authenticated (or perhaps to show a different flow).

That's why the query encapsulates pretty much everything.

With this, upon login, all I need to do is refetch the query, and we're set.

The only solution I can think of is to maintain a flag outside of TanStack Query, such as hasLoggedOut: boolean in a Zustand store (or in session storage, so when the queryFn is triggered, we can check the value to see if the user logged out, and clear it upon login), or to store UseMeQueryResult | null, where null represents a logged-out session. However, the latter is just an idea that I wouldn't actually implement.

Thanks for your help, though!