Next.js中如何仅当用户存在时调用react-query hook否则返回默认配置

核心思路 #

React Query 所有查询钩子都提供了enabled配置项，专门用来处理「条件触发查询」的场景，完全不需要条件调用Hook，也不需要把Hook放到useEffect里。

具体修改步骤 #

• 把默认配置的import语句移到模块顶层，ES Module 规范不允许在组件函数内部声明导入
• 给useGetOwnSettingsQuery添加enabled参数，只有user.id存在时才发起查询
• 对最终使用的config做一层兜底，优先使用查询返回的配置，未登录/查询未完成时兜底到默认配置

修改后代码 #

// 导入放在模块顶层
import defaultConfig from 'config.ts'

const LandingPage = ({
  user,
  ipAddress,
}: LandingPageProperties): JSX.Element => {
  
  const { data: userSettings, isLoading } = useGetOwnSettingsQuery(
    {
      endpoint: 'http://localhost:3000/api/graphql',
      fetchParams: {
        headers: setFetchHeaders(),
      },
    },
    { 
      userWhere: { id: user?.id },
      // 仅当用户存在时才发起查询
      enabled: !!user?.id,
      // 可选：直接把默认配置作为初始值，避免查询过程中出现undefined
      initialData: { config: defaultConfig }
    },
  );

  // 最终使用的config，优先取用户查询返回的配置，兜底默认值
  const config = userSettings.config ?? defaultConfig;

  // 可选：如果需要等待查询完成再渲染，加loading判断
  if (isLoading && !!user?.id) {
    return <div>加载中...</div>
  }

  return <LandingPageMap className="map" config={config}/>;
};

补充说明 #

如果你的useGetOwnSettingsQuery是自动生成的GraphQL Hooks，enabled和initialData都是React Query标准支持的参数，通用所有生成的查询钩子，不需要额外修改Hook定义。

内容的提问来源于stack exchange，提问作者Nenad