React中使用@apollo/react-hooks的useQuery触发TypeError报错

• 触发当前TypeError: Object(...) is not a function的核心问题出在useQuery的导入逻辑上
• 现有代码采用了默认导入的语法：import useQuery from "@apollo/react-hooks"，但useQuery是Apollo客户端模块提供的命名导出，不存在对应的默认导出对象，这种导入方式最终拿到的useQuery变量值为undefined
• 当代码执行到第8行尝试调用这个undefined值时，就会触发对应类型错误——这也是导入不存在的导出对象时，打包产物最典型的报错表现，完全匹配当前报错的定位位置
• 其余关联代码（GraphQL查询定义、Pokemon展示组件的导入导出）没有语法问题，不会触发该报错。

根据项目当前安装的Apollo客户端版本，选择对应调整方式：

• 若项目使用的是已废弃的独立@apollo/react-hooks独立包：
  把导入语句从默认导入修改为命名导入：

  // 错误写法（当前代码）
  import useQuery from "@apollo/react-hooks";
  // 正确写法
  import { useQuery } from "@apollo/react-hooks";
  

• 若项目使用的是官方目前主推的@apollo/client一体化客户端包（不再单独安装@apollo/react-hooks）：
  直接调整导入路径和导入方式为：

  import { useQuery } from '@apollo/client';
  

额外校验点：调整完导入逻辑后，需确认根组件已经正确通过ApolloProvider注入了Apollo客户端实例，否则即使导入正确，也会出现查询请求失败的问题，但该场景不会触发当前的类型报错。

内容的提问来源于stack exchange，提问作者BIJITH P N