React Query替代Context：Nextjs+Supabase用户状态管理问题

一、能否完全用 React Query 替代 Context？ #

• 对于服务端异步数据（比如用户信息、列表数据）：React Query 完全可以替代 Context，它自带缓存、自动重新获取、背景更新等能力，比手动用 Context + useState/useReducer 管理异步状态更简洁高效，还能避免重复请求、状态不同步的问题。
• 对于客户端本地状态（比如UI主题、侧边栏展开状态、表单临时输入）：Context 依然是合适的选择，这类状态不需要和后端交互，React Query 并不擅长管理这类纯客户端状态。

简言之：可以用 React Query 替代 Context 管理你的用户数据这类服务端状态，但 Context 仍有其适用场景。

二、解决用户数据提前获取与缓存问题 #

你遇到跳转后 data 为 undefined 的问题，核心原因是组件挂载时查询未完成，或未全局缓存用户数据导致重复请求。以下是具体解决方案：

1. 优化 useUser Hook（处理边界情况） #

先完善 getUser 函数，处理用户未登录、查询失败的场景，避免组件崩溃：

export const getUser = async (): Promise<Profile | null> => {
  const { data: authData, error: authError } = await supabase.auth.getUser();
  if (authError || !authData.user) {
    // 用户未登录或授权失败，返回null
    return null;
  }

  const userId = authData.user.id;
  const { data, error } = await supabase
    .from("profiles")
    .select()
    .eq("id", userId)
    .single();

  if (error) {
    console.error("获取用户资料失败:", error);
    throw error; // 抛出错误让React Query捕获，便于组件处理
  }

  return data;
};

export const useUser = () => {
  return useQuery(["user"], getUser, {
    // 设置缓存有效期，默认5分钟，可按需调整
    staleTime: 5 * 60 * 1000,
    // 用户未登录时跳过查询，避免无效请求
    enabled: !!supabase.auth.currentUser,
  });
};

2. 全局预加载用户数据 #

在 Next.js 的 _app.tsx 中调用 useUser，应用初始化时就触发查询，用户数据会被缓存到 React Query 的全局缓存中，所有子组件调用 useUser 都会复用缓存，不会重复请求：

// pages/_app.tsx
import { useUser } from "../hooks/useUser";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
  // 全局加载用户数据，缓存到React Query
  useUser();

  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

export default MyApp;

3. 组件中正确使用 useUser #

在个人资料组件中必须处理加载状态和数据不存在的情况，不能直接使用 data：

// components/Profile.tsx
import { useUser } from "../hooks/useUser";

export default function Profile() {
  const { data: user, isLoading, error } = useUser();

  if (isLoading) {
    return <div>加载中...</div>;
  }

  if (error || !user) {
    return <div>未登录或获取用户信息失败</div>;
  }

  return (
    <div>
      <h1>{user.username}</h1>
      {/* 渲染用户其他信息 */}
    </div>
  );
}

4. 登录后触发用户数据更新 #

登录成功后，调用 refetch 更新缓存，再跳转页面：

// pages/login.tsx
import { useUser } from "../hooks/useUser";
import { useRouter } from "next/router";

export default function Login() {
  const router = useRouter();
  const { refetch } = useUser();

  const handleLogin = async () => {
    // 执行Supabase登录逻辑
    const { error } = await supabase.auth.signInWithPassword({
      email: "user@example.com",
      password: "password",
    });

    if (!error) {
      // 登录成功后更新用户缓存
      await refetch();
      router.push("/");
    }
  };

  return <button onClick={handleLogin}>登录</button>;
}

5. 路由跳转前验证用户状态 #

在需要登录验证的页面，利用 React Query 缓存数据判断用户状态：

// pages/ProtectedPage.tsx
import { useUser } from "../hooks/useUser";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function ProtectedPage() {
  const { data: user, isLoading } = useUser();
  const router = useRouter();

  useEffect(() => {
    if (!isLoading && !user) {
      // 用户未登录，跳转登录页
      router.push("/login");
    }
  }, [user, isLoading, router]);

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return <div>受保护的页面内容</div>;
}

内容的提问来源于stack exchange，提问作者José Carlos