Next.js结合Apollo GraphQL调用Drupal接口报缺少query或queryId错误求助

问题排查与解决方案 #

这个错误是GraphQL服务端没有收到请求中的查询语句导致的，按以下优先级排查即可解决：

1. 优先排查持久化查询配置错误
   这是该报错90%以上的诱因：你大概率在Apollo Client初始化时开启了**持久化查询（Persisted Queries）**功能，该模式下客户端默认只会发送查询的哈希值（queryId）给服务端，不会发送完整的查询语句。但你Drupal端的GraphQL模块没有开启持久化查询支持，也没有配置降级逻辑，就会抛出这个错误。
   • 验证方法：打开浏览器F12网络面板，找到本次搜索的GraphQL请求，查看请求Payload：如果只有extensions.persistedQuery.sha256Hash字段，没有query字段，就可以确认是该问题。
   • 解决方法：
     • 不需要持久化查询的情况，直接删掉Apollo Client初始化配置中的persistedQueries相关配置即可
     • 需要保留的情况，到Drupal后台的GraphQL模块设置中开启持久化查询支持，确保前后端的哈希生成规则完全一致
2. 检查查询对象的导出导入是否正常
   在调用useQuery的代码前加一行console.log(SEARCH)，确认输出的是包含loc.source.body属性的标准DocumentNode对象：
   • 如果输出为undefined：检查你导入SEARCH的路径是否正确，有没有拼写错误
   • 如果输出不是DocumentNode：确认你的gql标签是从@apollo/client包导入的，不是其他graphql相关包导入的错误版本
3. 检查Apollo请求链路是否修改了请求体
   如果你自定义了Apollo Link中间件/拦截器，检查是否有逻辑误删了请求body中的query字段，可参考以下最简Apollo Client初始化配置核对：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';

const client = new ApolloClient({
  uri: '你的Drupal GraphQL接口地址',
  cache: new InMemoryCache(),
  // 确认没有加错误的持久化查询配置
});

4. 可选：规避变量名冲突
   你当前的查询变量名刚好是query，和GraphQL请求的顶级参数名重名，部分老版本的服务端解析可能会出现异常，可以尝试修改变量名避免冲突：

export const SEARCH = gql`
  query search($keyword: String!) {
    search(query: $keyword, access: "Search") {
      ... on SearchDocuments {
        total
        type
        documents {
          id
          parent {
            id
            labelOnly
            path
            title
            type
          }
          path
          status
          summary
          title
          type
        }
      }
    } 
  } 
`;

调用时对应调整变量：

variables: {
  keyword: "test"
}

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