状態管理をswrやreact-queryで行う場合の認証について

Question

ログイン時にページリロードなしでNavBarにユーザー名を表示させたいです。

状態管理にreact-queryを使っており、NavBarコンポーネントのトップレベルでプロフィールデータを取得するようになっています。

ログイン時にNavBarコンポーネントを再レンダリングしてプロフィール情報を取得したいのですが、よい方法はないでしょうか？

ログインメソッド内でqueryClient.refetchQueries("me")としてみたのですが、うまく行きませんでした。

なお、リロードするとユーザー名が表示されます。

// サーバーからプロフィール情報を取得するカスタムフック
import { customAxios } from "@/utils/customAxios";
import { useQuery } from "react-query";

export const useMeQuery = () => {
  return useQuery("me", async () => {
    const { data } = await customAxios.get("/api/users/me");
    return data;
  });
};

// ログイン処理を行うメソッドを返すカスタムフック
import { customAxios } from "@/utils/customAxios";
import { useRouter } from "next/router";
import { useQueryClient } from "react-query";

export const useLoginUser = () => {
  const queryClient = useQueryClient();
  const router = useRouter();
  const loginUser = async (userInput: {
    username: string;
    password: string;
  }) => {
    const { data } = await customAxios.post("/api/auth/login", userInput);
    localStorage.setItem("token", data);
    queryClient.refetchQueries("me");
    router.push("/");
  };
  return loginUser;
};

// ログイン状態に応じて表示が変化するナビゲーションバー
export const NavBar: React.FC = () => {
  const { data } = useMeQuery(); //ログインしたときにデータを取得し直して再レンダリングしたい
  const logoutUser = useLogoutUser();

  let body = null;

  if (!data) {
    body = (
      <>
        <NextLink href="/login">
          <Link mr={2}>Login</Link>
        </NextLink>
        <NextLink href="/register">
          <Link>Register</Link>
        </NextLink>
      </>
    );
  } else {
    body = (
      <Flex>
        <Box mr={2}>{data.username}</Box>
        <Button variant="link" onClick={() => logoutUser()}>
          logout
        </Button>
      </Flex>
    );
  }
  return (
    <Flex zIndex={2} position="sticky" top={0} bg="teal" p={4}>
      <Box ml={"auto"}>{body}</Box>
    </Flex>
  );
};