TanStack Query中queryKey含undefined的TypeScript问题咨询

可行方案 #

结合React Query的enabled配置控制查询触发时机，同时通过类型处理确保fetchUser的参数合法性，无需修改fetchUser的参数类型：

方案1：非空断言（简洁高效） #

利用enabled配置保证queryFn仅在username存在时执行，此时可以安全使用非空断言消除TS错误：

interface Props {
  username: string | undefined
}

const fetchUser = (username: string): Promise<Object> => Promise.resolve({})

export function UserCard({ username }: Props) {
  const { data, isLoading } = useQuery(
    ['markets', username],
    // 因enabled控制，此时username必然为string，可安全断言
    () => fetchUser(username!), 
    {
      // 仅当username存在时触发查询
      enabled: !!username,
      select: (data: Object): Object => {
        // 你的数据转换逻辑
        return data
      },
    }
  )
  // 后续组件逻辑
}

方案2：类型守卫（更严谨） #

如果不想使用非空断言，可通过类型守卫明确校验username类型，同时因enabled的存在，错误分支永远不会执行：

export function UserCard({ username }: Props) {
  const { data, isLoading } = useQuery(
    ['markets', username],
    () => {
      if (!username) {
        // 此分支不会执行，仅用于TS类型校验
        return Promise.resolve({} as Object)
      }
      return fetchUser(username)
    }, 
    {
      enabled: !!username,
      select: (data: Object): Object => {
        // 你的数据转换逻辑
        return data
      },
    }
  )
  // 后续组件逻辑
}

方案说明 #

• enabled: !!username是核心：它确保只有当username为有效字符串时，queryFn才会被调用，从根源避免了undefined传入fetchUser的情况。
• 两种方案都无需修改fetchUser的参数类型，符合需求。
• 不会产生开发环境错误，因为未满足条件时查询不会触发，queryFn中的错误分支永远不会执行。

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