如何使用Apollo Client发送无嵌套字段的GraphQL查询

我在Next.js项目里用Apollo Client的gql和useQuery请求GraphQL接口，目标查询fetchBoardsCount在API演示环境能正常运行，但项目里报错。

接口定义与可用查询 #

// 接口文档定义
fetchBoardsCount: Int!

// 可正常运行的查询语句
query {
  fetchBoardsCount
}

我的错误代码 #

// 查询定义
export const FETCH_BOARDS_COUNT = gql`{
    query FetchBoardsCount {
        fetchBoardsCount
    }
}`;

// 请求逻辑
const { data, loading, error } = useQuery(FETCH_BOARDS_COUNT);

错误提示 #

Cannot query field "query" on type "Query".

疑问：怎么用Apollo Client发送这种无子查询、无嵌套字段的简单GraphQL查询？

项目依赖 #

"dependencies": {
    "@apollo/client": "^3.7.1",
    "graphql": "^16.6.0",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.11.0",
    "@types/react": "18.0.21",
    "eslint": "8.25.0",
    "eslint-config-next": "12.3.1",
    "typescript": "4.8.4"
  }

问题出在查询语句的语法错误：你在gql模板里给查询多套了一层外层花括号，导致Apollo把query当成了Query类型下的字段，而非查询关键字。

修正后的查询有两种写法：

写法1：简写形式（省略查询名称） #

export const FETCH_BOARDS_COUNT = gql`
  query {
    fetchBoardsCount
  }
`;

写法2：标准命名形式（推荐，方便调试和日志追踪） #

export const FETCH_BOARDS_COUNT = gql`
  query FetchBoardsCount {
    fetchBoardsCount
  }
`;

重点：gql模板字符串直接写完整的GraphQL查询语句即可，不需要额外在外层加花括号。你之前的写法相当于让GraphQL去查询Query类型下的query字段，这和接口定义不符，所以报错。

修正后正常使用useQuery即可获取数据：

const { data, loading, error } = useQuery(FETCH_BOARDS_COUNT);

if (data) {
  console.log('看板总数:', data.fetchBoardsCount);
}

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